以下是切换视图的示例代码。
|
| 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. | } |
切换上一视图
切换上一视图通过定义onclickZoomToPrevExtent()方法实现。
| 1. | function onclickZoomToPrevExtent() { |
| 2. | navigation.zoomToPrevExtent(); |
| 3. | } |
创建切换上一视图按钮
| 1. | <input type="button" class="Button" value="上一视图" onclick="onclickZoomToPrevExtent()" id="ZoomToPrevExtent" > |
切换下一视图
切换下一视图通过定义onclickZoomToNextExtent()方法实现。
| 1. | function onclickZoomToNextExtent() { |
| 2. | navigation.zoomToNextExtent(); |
| 3. | } |
创建切换下一视图按钮
| 1. | <input type="button" class="Button" value="下一视图" onclick="onclickZoomToNextExtent()" id="ZoomToNextExtent" style="left: 90px;" > |