arcgis api 3.x for js 入门开发系列三地图工具栏（附源码下载）

前言

关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。

内容概览

1. 地图框选缩放、地图漫游、清空、量算工具
2. 地图比例尺控件
3. 地图显示坐标
4. 地图鹰眼
5. 源代码 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之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波