如何调用动态地图服务
看一个简单的例子:
- <!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
来源: http://www.jianshu.com/p/2af05f58066c