arcgis api for js入門開發系列三地圖工具欄

上一篇實現了demo的地圖載入展示，在上篇實現的基礎上，新增了地圖工具欄以及通用地圖控制項功能，比如地圖框選縮放、地圖漫遊、清空、量算工具、地圖導航控制項、地圖比例尺控制項、地圖鷹眼圖等等，總共分為5個部分，截圖如下：

1.工具欄，在map.html頁面引入工具欄實現需要的js文件

<script type="text/javascript" src="js/main/map.map2dPanel.js"></script>n

然後在map.js文件中地圖初始化函數load2DMap進行工具欄的js調用

//顯示地圖工具欄n DCI.map2dTool.InitTool(map);n

map2dPanel.js實現了地圖工具欄所有的功能，談談實現核心部分功能的代碼：

（1）拉框放大：這個實現比較簡單，利用拉框的矩形範圍，直接設置地圖的範圍為拉框的範圍即可

$("#zoomIn").click(function () {//地圖拉框放大n map.setMapCursor("url(" + getRootPath() + "Content/images/index/cursor/zoomout.cur),auto");//設置地圖滑鼠形狀n DCI.map2dTool.drawtool.activate(esri.toolbars.Draw.EXTENT);//利用api的畫工具draw來畫矩形，獲取矩形範圍n DCI.map2dTool.drawExtent(null, function (geometry) {//draw工具畫完的回調函數n DCI.map2dTool.zoomOutByExtent(geometry);//獲取回調函數的geometry（extent）範圍n });n });n

drawExtent: function (symbol, onDrawEnd) {

DCI.map2dTool.onDrawEnd = onDrawEnd;

//根據拉框範圍放大n zoomInByExtent: function (geometry) {n DCI.map2dTool.map.setExtent(geometry.getExtent());//根據extent來進行地圖縮放n }n

（2）拉框縮小：這個跟拉框放大的原理是類似的，也是首先獲取拉框的的矩形範圍，但是不同的是，獲取矩形範圍之後跟地圖當前的範圍按一定的比例進行計算，構造一個新的範圍extent，然後再進行地圖的縮放

$("#zoomOut").click(function () {n map.setMapCursor("url(" + getRootPath() + "Content/images/index/cursor/zoomin.cur),auto");n DCI.map2dTool.drawtool.activate(esri.toolbars.Draw.EXTENT);n DCI.map2dTool.drawExtent(null, function (geometry) {n DCI.map2dTool.zoomInByExtent(geometry);n });n });n drawExtent: function (symbol, onDrawEnd) {n DCI.map2dTool.onDrawEnd = onDrawEnd;n },n //根據拉框範圍縮小n zoomOutByExtent: function (geometry) {n if (geometry.xmin != geometry.xmax && geometry.ymin != geometry.ymax) {//畫矩形的範圍沒超出地圖當前範圍n var currExtent = DCI.map2dTool.map.extent;//獲取地圖的當前範圍n var currWidth = Math.abs(currExtent.xmin - currExtent.xmax);//計算當前地圖範圍的寬度n var boxWidth = Math.abs(geometry.xmin - geometry.xmax);//計算拉框矩形的範圍寬度n var widthFactor = currWidth / boxWidth;//計算兩者的寬度的比率nn var currHeight = Math.abs(currExtent.ymin - currExtent.ymax);//計算當前地圖範圍的高度n var boxHeight = Math.abs(geometry.ymin - geometry.ymax);//計算拉框矩形的範圍高度n var heightFactor = currHeight / boxHeight;//計算兩者的高度比率nn if (widthFactor >= heightFactor) {n currExtent = currExtent.expand(widthFactor);n } else {n currExtent = currExtent.expand(heightFactor);n }n DCI.map2dTool.map.setExtent(currExtent);n } else {//超出地圖當前範圍時候，直接地圖縮小一級n if (parseInt(DCI.map2dTool.map.getLevel()) > 0) {n DCI.map2dTool.map.setLevel(parseInt(DCI.map2dTool.map.getLevel()) - 1);n }n }n }n

（3）量算工具，這個部分詳細的參照：arcgis api for js共享乾貨系列之一自寫演算法實現地圖量算工具

2.Navigation控制項，這個部分詳細的參照：arcgis api for js共享乾貨系列之二自定義Navigation控制項樣式風格

3.地圖比例尺控制項，這個實現比較簡單，直接調用api封裝好的Scalebar

//載入比例尺n var scalebar = new esri.dijit.Scalebar({n map: map,//地圖對象n attachTo: "bottom-left",//控制項的位置，左下角n scalebarStyle: "ruler",//line 比例尺樣式類型n scalebarUnit: "metric"//顯示地圖的單位，這裡是kmn });n

其他的具體屬性請參照api：Scalebar | API Reference

4.地圖顯示坐標，這個實現利用地圖移動onMouseMove以及拖拽onMouseDrag事件，通過監聽事件動態獲取地圖當前的滑鼠坐標值

//載入地圖顯示坐標n showCoordinates(map);nn/**n * 顯示地圖坐標n*/nfunction showCoordinates(map) {n var coordinatesDiv = document.getElementById("map_coordinates");//js通過id獲取divn if (coordinatesDiv) {//div存在就顯示n coordinatesDiv.style.display = "block";n }n else {//不存在情況下，動態創建指定id的divn var _divID_coordinates = "map_coordinates";//div的idn coordinatesDiv = document.createElement("div");//動態創建divn coordinatesDiv.id = _divID_coordinates;//idn coordinatesDiv.className = "map-coordinates";//div的css樣式n coordinatesDiv.innerHTML = "";//默認div填充為空n document.getElementById("map").appendChild(coordinatesDiv);//動態創建的div放在地圖map容器div裡面n dojo.connect(map, "onMouseMove", showCoords);//監聽地圖的移動事件n dojo.connect(map, "onMouseDrag", showCoords);n function showCoords(evt) {n evt = evt ? evt : (window.event ? window.event : null);n var mp = evt.mapPoint;//獲取滑鼠當前位置的地圖坐標值n coordinatesDiv.innerHTML = "<span id=cd_label stylex=font-size:13px;text-align:center;font-family:微軟雅黑;>" + "橫坐標：" + mp.x.toFixed(3) + " 縱坐標：" + mp.y.toFixed(3) + "</span>";n }n }n}n

5.地圖鷹眼控制項，這個實現比較簡單，直接調用api封裝好的OverviewMap

//載入鷹眼n var overviewMapDijit = new esri.dijit.OverviewMap({n map: map,n attachTo: "bottom-right",n color: " #D84E13",n opacity: .40n });n

其他的具體屬性請參照api：OverviewMap | API Reference

GIS之家作品：首頁-GIS之家-淘寶網

GIS之家興趣部落：gis之家部落-興趣部落

GIS項目交流群：238339408

GIS之家交流群一：432512093