製品版のみの機能
マップ - シンボル シリーズ
このサンプルは、マップを作成し、主要な市の位置を地理記号シリーズで表示する方法を示します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このマップは、市の人口に基づいて地理記号を塗りつぶすためにカスタム マーカー テンプレートを使用します。人口最小都市はグレーの丸で描画し、人口最大都市は緑、オレンジ、または赤の丸で描画されます。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<script src="/js/map-helper.js" type="text/javascript" ></script>
<style>
#tooltipTable
{
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#tooltipTable td, #tooltipTable th
{
font-size: 9px;
border: 1px solid #5da7df;
padding: 3px 7px 2px 7px;
}
#tooltipTable th
{
font-weight: bold;
font-size: 11px;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #5da7df;
color: #ffffff;
}
</style>
<script id="geoSymbolTooltip" type="text/x-jquery-tmpl">
<table id="tooltipTable" >
<tr><th colspan="2">${item.City}, ${item.Country}</th></tr>
<tr>
<td>人口:</td>
<td>${item.Population}</td>
</tr>
</table>
</script>
</head>
<body>
<script type="text/javascript">
$(function () {
// load geo-locations from shapefile and simplify data structure
var worldCities = [];
var points = [];
var shapeDataSource = new $.ig.ShapeDataSource({
shapefileSource: "/data-files/shapes/world_cities.shp",
databaseSource: "/data-files/shapes/world_cities.dbf",
transformRecord: function (rec) {
var pointX = rec.points.item(0).item(0).x();
var pointY = rec.points.item(0).item(0).y();
var city = rec.fields.item("NAME");
var country = rec.fields.item("COUNTRY");
var population = rec.fields.item("POPULATION");
if (population > 7000) {
points.push({
Latitude: pointY, Longitude: pointX,
City: city, Country: country,
Population: population
});
}
},
callback: function () {
worldCities = points.sort(compareCities);;
createMap();
}
});
shapeDataSource.dataBind();
function compareCities(a, b) {
if (a.Population > b.Population)
return -1;
if (a.Population < b.Population)
return 1;
return 0;
}
function createMap() {
$("#map").igMap({
width: "700px",
height: "500px",
windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
overviewPlusDetailPaneVisibility: "visible",
overviewPlusDetailPaneBackgroundImageUri: "/images/samples/maps/world.png",
backgroundContent: {
type: "openStreet"
},
series: [{
type: "geographicSymbol",
name: "worldCities",
dataSource: worldCities,
longitudeMemberPath: "Longitude",
latitudeMemberPath: "Latitude",
showTooltip: true,
tooltipTemplate: "geoSymbolTooltip",
// using custom template
markerType: "none",
markerTemplate: {
measure: function (measureInfo) {
measureInfo.width = 10;
measureInfo.height = 10;
},
render: function (renderInfo) {
var ctx = renderInfo.context;
var x = renderInfo.xPosition;
var y = renderInfo.yPosition;
if (renderInfo.isHitTestRender)
ctx.fillStyle = renderInfo.data.actualItemBrush().fill();
else
ctx.fillStyle = "black";
var size = 10;
var heightHalf = size / 2.0;
var widthHalf = size / 2.0;
if (renderInfo.isHitTestRender) {
ctx.fillRect(x - widthHalf, y - heightHalf, size, size);
} else {
// color markers based on population of cities
var pop = renderInfo.data.item()["Population"];
if (pop > 0)
ctx.fillStyle = "rgba(120,120,120,0.8)";
if (pop > 100000)
ctx.fillStyle = "rgba(160,200,20,0.8)";
if (pop > 1000000)
ctx.fillStyle = "rgba(210,155,20,0.8)";
if (pop > 5000000)
ctx.fillStyle = "rgba(210,60,20,0.8)";
if (pop > 10000000)
ctx.fillStyle = "rgba(155,20,20,0.8)";
size = 3;
ctx.globalAlpha = 1;
ctx.strokeStyle = "rgba(20,20,20,0.36)";
ctx.beginPath();
ctx.arc(x, y, size, 0, 2.0 * Math.PI);
ctx.fill();
ctx.stroke();
}
}
}
}]
});
$("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
};
});
</script>
<div>
<div id="map"></div>
</div>
</body>
</html>