如何調用動態地圖服務
看一個簡單的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" >
<link rel="stylesheet" >
<script src="http://192.168.2.118:8484/arcgis_js_api/library/3.20/3.20/init.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<title>動態圖層</title>
<script type="text/javascript">
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/domReady!"
], function(
Map,ArcGISDynamicMapServiceLayer
) {
map= new Map("map",{
//去掉logo
logo:false,
zoom:5
});
var url="http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer";
var layer = new ArcGISDynamicMapServiceLayer(url);
map.addLayer(layer);
//地圖縮放結束事件
map.on("zoom-end",function(){
//彈出當前地圖縮放比例值
alert(map.getZoom());
});
});
</script>
</head>
<body>
<div id="map" style="width: 100%;height:500px;border: 1px blue solid;"></div>
<h2>世界地圖ArcGISDynamicMapServiceLayer圖層</h2>
<h4>針對ArcGISDynamicMapServiceLayer獲取當前Zoom的值為-1的解決方法</h4>
</body>
</html>
頁面效果如下圖
動態地圖.png
很簡單的一個例子，通過地圖比例縮放結束事件獲取當前地圖縮放比例的值一直為-1，接下來問題來了，如果我要根據當前地圖的縮放比例來顯示高速公路，怎么辦？
為什么getZoom()方法只會返回-1
由于Zoom屬性是基于地圖的lods屬性，而動態地圖服務圖層并沒有lods屬性，此時則需人為定義lods
在瀏覽器中打開地址：http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer
地圖lods.gif
接下來人為設置lods
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" >
<link rel="stylesheet" >
<script src="http://192.168.2.118:8484/arcgis_js_api/library/3.20/3.20/init.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<title>動態圖層</title>
<script type="text/javascript">
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/domReady!"
], function(
Map,ArcGISDynamicMapServiceLayer
) {
var lods = [
{ "level": 0, "resolution": 156543.03392800014, "scale": 5.91657527591555E8},
{ "level": 1, "resolution": 78271.51696399994, "scale": 2.95828763795777E8},
{ "level": 2, "resolution": 39135.75848200009, "scale": 1.47914381897889E8},
{ "level": 3, "resolution": 19567.87924099992, "scale": 7.3957190948944E7},
{ "level": 4, "resolution": 9783.93962049996, "scale": 3.6978595474472E7},
{ "level": 5, "resolution": 4891.96981024998, "scale": 1.8489297737236E7},
{ "level": 6, "resolution": 2445.98490512499, "scale": 9244648.868618},
{ "level": 7, "resolution": 1222.992452562495, "scale": 4622324.434309},
{ "level": 8, "resolution": 611.4962262813797, "scale": 2311162.217155},
{ "level": 9, "resolution": 305.74811314055756, "scale": 1155581.108577},
{ "level": 10, "resolution": 152.87405657041106, "scale": 577790.554289},
{ "level": 11, "resolution": 76.43702828507324, "scale": 288895.277144},
{ "level": 12, "resolution": 38.21851414253662, "scale": 144447.638572}
];
map= new Map("map",{
//去掉logo
logo:false,
lods:lods,
zoom:5
});
var url="http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer";
var layer = new ArcGISDynamicMapServiceLayer(url);
map.addLayer(layer);
//地圖比例縮放結束事件
map.on("zoom-end",function(){
//彈出當前地圖縮放比例值
alert(map.getZoom());
});
});
</script>
</head>
<body>
<div id="map" style="width: 100%;height:500px;border: 1px blue solid;">
</div>
<h2>世界地圖ArcGISDynamicMapServiceLayer圖層</h2>
<h4>針對ArcGISDynamicMapServiceLayer獲取當前Zoom的值為-1的解決方法</h4>
</body>
</html>
神奇的事情發生了
人為設置lods.gif
