arcgis api for javascript 自定义工具栏总结

效果示例：

工具栏功能包括：拉框放大、拉框缩小、漫游、全图、复位、拉框查询、属性查询、测量工具、清除选择、比例尺、鹰眼。

一方面使用api自带的封装好的功能，比如

//工具栏        var navToolbar = new Navigation(map);        $("#zoomoutbox").click(function() {            navToolbar.activate(Navigation.ZOOM_OUT);        })        $("#zoominbox").click(function() {            navToolbar.activate(Navigation.ZOOM_IN);        })        $("#panbtn").click(function() {            navToolbar.activate(Navigation.PAN);            navToolbar.deactivate();        })        $("#fullbtn").click(function () {            map.centerAndZoom(new Point(116.473,40.071),1);        });        $("#movebtn").click(function() {            navToolbar.deactivate();            reset();        })

另一方面，需要自己实现，比如拉框查询，首先需要定义Draw绘图工具，绑定绘图事件，当绘图完成时得到一个geometry对象，该对象即为查询的范围，触发回调函数，在回调函数中使用QueryTask来进行空间查询。

需要注意的是，这样查询出来的结果是一个新的要素集，在显示高亮的时候，如果本来就已经在地图上存在显示的样式，高亮的样式就会叠加在原来的样式上。那如果要替换原来的样式怎么办？
有一种办法，就是得到draw以后的geometry后，拿这个geometry的范围来判断待查询的要素是否在这个范围内，如果在就替换它的要素，效果就是这样的：

//TODO 拉框查询         var toolBar = new Draw(map);        var selectedGraphics = new Array(); //存放选择过的元素        on(dom.byId("drawbtn"), "click", function (e) {               clickStatus=clickType.DRAW; //修改鼠标状态为draw               resetSelectedSymbol();               map.disableMapNavigation();               toolBar.activate(Draw.RECTANGLE);        });        //拉框结束 进行查询        on(toolBar,"draw-end", function(result) {            var geometry = result.geometry;            map.enableMapNavigation();            toolBar.deactivate();            geometryContains(geometry,selectedlayer);        });/**         * 判断geometry是否包含layer中的要素         * @param geometry         */        function geometryContains(geometry,layer) {            var graphics = layer.graphics;            if(graphics.length==0){                alert("无要素可被选择！")                return;            }            for(var i= 0, total=graphics.length;i<total;i++){                if(geometry.contains(graphics[i].geometry)){                    graphics[i].setSymbol(xiaoquSelectedSymbol);                 }            }            if(selectedGraphics.length==0){                alert("未选中目标");                return;            }        }

关于测量工具已经在上篇文章中说到了，这里就不重复说了。

比例尺：

  var scalebar = new esri.dijit.Scalebar({        map: map,        scalebarUnit: "metric"    },dom.byId("scalebar"));

鹰眼：

var overviewMapDijit = new OverviewMap({            map: map,   // 必要的            visible: true,  // 初始化可见，默认为false            attachTo: "bottom-right",   // 默认右下角            width: 250, // 默认值是地图高度的 1/4th            height: 150, // 默认值是地图高度的 1/4th            opacity: .40,    // 透明度 默认0.5            maximizeButton: true,   // 最大化,最小化按钮，默认false            expandFactor: 10,    //概览地图和总览图上显示的程度矩形的大小之间的比例            color: "red"    // 默认颜色为#000000        });        overviewMapDijit.startup();

点击工具栏时图片替换：

var toolArr=["../../image/fd_h.png","../../image/sx_h.png","../../image/py_h.png","../../image/qt_h.png","../../image/my_h.png","../../image/xz_h.png","../../image/searchText1.png","../../image/clh.png","../../image/cdh.png","../../image/mjh.png","../../image/qc1.png","../../image/blc_h.png","../../image/yy_h.png"];    var toolArr2=["../../image/fd_l.png","../../image/sx_l.png","../../image/py_l.png","../../image/qt_l.png","../../image/my_l.png","../../image/xz_l.png","../../image/searchText2.png","../../image/lll.png","../../image/cdl.png","../../image/mjl.png","../../image/qc2.png","../../image/blc_l.png","../../image/yy_l.png"];    var toolbox = document.getElementById('maptoolbox');    var toolimg = toolbox.getElementsByTagName('img');    var t2;    for (var i = 0; i < toolimg.length; i++) {        toolimg[i].index =i;        toolimg[i].onclick=function (){            for (var i = 0; i < toolimg.length; i++) {                toolimg[i].src = toolArr[toolimg[i].index];            }            this.src = toolArr2[this.index];            t2=this.src;        };    };