解决Arcgis动态图层Zoom值为-1的问题
2018-03-05 本文已影响0人
荒野之森
如何调用动态地图服务
看一个简单的例子:
<!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" href="http://192.168.2.118:8484/arcgis_js_api/library/3.20/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://192.168.2.118:8484/arcgis_js_api/library/3.20/3.20/esri/css/esri.css">
<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" href="http://192.168.2.118:8484/arcgis_js_api/library/3.20/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://192.168.2.118:8484/arcgis_js_api/library/3.20/3.20/esri/css/esri.css">
<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
