改变地图范围后,显示当前地图范围
以下是地图范围改变时触发事件的示例代码。
|
| 1. | < !--引入地图框架--> |
| 2. | < script src="http://服务器IP/地图API名称/" type="text/javascript" />< /script> |
创建地图容器元素
创建地图浏览应用程序需要在页面中创建一块区域用于显示地图内容，这个区域我们叫做地图容器，即在body中加入的一个div容器，其页面代码为：
| 1. | <div id="map_div" class="content"> </div> |
参数初始化设置
地图实例通过下列代码创建，其中，DCIMapConfig.mapInitParams是地图初始化参数。
| 1. | var map = new DCIMap("map_div", DCIMapConfig.mapInitParams); |
加载图层到地图
根据底图类型，创建底图，添加到地图中。
| 1. | switch (DCIMapConfig.vecMap.type) { |
| 2. | case 0://WMTS |
| 3. | var layers = new DCIWMTSLayer(DCIMapConfig.vecMap.Url); |
| 4. | map.addLayer(layers, 0); |
| 5. | map.showSlider(map.initExtent, DCIMapConfig.sliderConfig); |
| 6. | break; |
| 7. | case 1://1为mapserver切片 |
| 8. | var layers = new esri.layers.ArcGISTiledMapServiceLayer(DCIMapConfig.vecMap.Url); |
| 9. | map.addLayer(layers, 0); |
| 10. | dojo.connect(layers, "onLoad", function () { |
| 11. | map.showSlider(map.initExtent, DCIMapConfig.sliderConfig); |
| 12. | }) |
| 13. | break; |
| 14. | } |
| 15. | } |
范围改变事件
范围改变事件，通过监听onExtentChange事件实现。
| 1. | dojo.connect(map.esriMap, "onExtentChange", function (extent) { |
| 2. | var s = ""; |
| 3. | if (!document.all) {//FF/{谷歌浏览器用这个 |
| 4. | s = "当前地图范围为:\n" |
| 5. | + "Xmin: " + extent.xmin + "\n" |
| 6. | + "Ymin: " + extent.ymin + "\n" |
| 7. | + "Xmax: " + extent.xmax + "\n" |
| 8. | + "Ymax: " + extent.ymax; |
| 9. | } |
| 10. | else { |
| 11. | s = "当前地图范围为:\r\n" |
| 12. | + "Xmin: " + extent.xmin + "\r\n" |
| 13. | + "Ymin: " + extent.ymin + "\r\n" |
| 14. | + "Xmax: " + extent.xmax + "\r\n" |
| 15. | + "Ymax: " + extent.ymax; |
| 16. | } |
| 17. | alert(s); |
| 18. | }) |