製品版のみの機能
マップ - シェープ シリーズ
このサンプルでは、世界の国を持つデータベースおよびシェープ ファイルをマップ コントロールに地理シェイプ シリーズでバインドする方法を示します。
このサンプルは 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>
<style>
#tooltipTable
{
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#tooltipTable td, #tooltipTable th
{
font-size: 9px;
border: 1px solid #2d87cb;
padding: 3px 7px 2px 7px;
}
#tooltipTable th
{
font-weight: bold;
font-size: 11px;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #2d87cb;
color: #ffffff;
}
</style>
</head>
<body>
<script id="geoShapeTooltip" type="text/x-jquery-tmpl">
<table id="tooltipTable" >
<tr><th class="tooltipHeading" colspan="2">
${item.fieldValues.NAME}, ${item.fieldValues.REGION}</th></tr>
<tr>
<td>人口:</td>
<td>${item.fieldValues.POP2005}</td>
</tr>
</table>
</script>
<script type="text/javascript" src="/js/map-helper.js" ></script>
<script type="text/javascript">
function ColorPickerByIndex(min, max) {
// Initialize internal state
var brushes = ["#d9c616", "#d96f17", "#d1150c"];
var interval = (max - min) / (brushes.length - 1);
// Returns a color from the brushes array depending on the input value
this.getColorByIndex = function(val) {
var index = Math.round(val / interval);
if (index < 0) {
index = 0;
} else if (index > (brushes.length - 1)) {
index = brushes.length - 1;
}
return brushes[index];
};
}
$(function () {
var colorPicker = new ColorPickerByIndex(100000, 500000000);
// alternative functions for generating color based on a data value
var getColorValue = function (val) {
var ratio = val / 1338299500.0;
var col = 255.0 * ratio;
var colString = "rgba(0,50," + Math.round(col) + ",0.45)";
return colString;
};
var getLogColorValue = function (val) {
var ratio = Math.log(val) / Math.log(1338299500.0);
var col = 255.0 * ratio;
var colString = "rgba(0,50," + Math.round(col) + ",0.45)";
return colString;
};
$("#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",
series: [{
type: "geographicShape",
name: "worldCountries",
markerType: "none",
shapeMemberPath: "points",
shapeDataSource: '/data-files/shapes/world_countries_reg.shp',
databaseSource: '/data-files/shapes/world_countries_reg.dbf',
opacity: 0.8,
outlineThickness: 1,
showTooltip: true,
tooltipTemplate: "geoShapeTooltip",
shapeStyleSelector: {
selectStyle: function (s, o) {
var pop = s.fields.item("POP2005");
var popInt = parseInt(pop);
var colString = colorPicker.getColorByIndex(popInt); //getColorValue(popInt);
return {
fill: colString,
stroke: "gray"
};
}
}
}]
});
$("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
});
</script>
<div id="map"></div>
</body>
</html>