前言
關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 3.x for js：esri 官網 api，里面詳細的介紹 arcgis api 3.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 3.x 的好素材。
內容概覽
- 地圖框選縮放、地圖漫游、清空、量算工具
- 地圖比例尺控件
- 地圖顯示坐標
- 地圖鷹眼
- 源代碼 demo 下載
- 工具欄，在 map.html 頁面引入工具欄實現需要的 js 文件
<script type="text/javascript" src="js/main/map.map2dPanel.js"></script>
然后在 map.js 文件中地圖初始化函數 load2DMap 進行工具欄的 js 調用
//顯示地圖工具欄 DCI.map2dTool.InitTool(map);
map2dPanel.js 實現了地圖工具欄功能，談談實現核心部分功能的代碼：
拉框放大：這個實現比較簡單，利用拉框的矩形范圍，直接設置地圖的范圍為拉框的范圍即可
$("#zoomIn").click(function () {//地圖拉框放大
map.setMapCursor("url('" + getRootPath() + "Content/images/index/cursor/zoomout.cur'),auto");//設置地圖鼠標形狀
DCI.map2dTool.drawtool.activate(esri.toolbars.Draw.EXTENT);//利用api的畫工具draw來畫矩形，獲取矩形范圍
DCI.map2dTool.drawExtent(null, function (geometry) {//draw工具畫完的回調函數
DCI.map2dTool.zoomOutByExtent(geometry);//獲取回調函數的geometry（extent）范圍
});
});
drawExtent: function (symbol, onDrawEnd) {
DCI.map2dTool.onDrawEnd = onDrawEnd;
},
//根據拉框范圍放大
zoomInByExtent: function (geometry) {
DCI.map2dTool.map.setExtent(geometry.getExtent());//根據extent來進行地圖縮放
}
拉框縮小：這個跟拉框放大的原理是類似的，也是首先獲取拉框的的矩形范圍，但是不同的是，獲取矩形范圍之后跟地圖當前的范圍按一定的比例進行計算，構造一個新的范圍extent，然后再進行地圖的縮放
更多的詳情見：GIS之家小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波