距離測量，面積測量等工具條是常用的工具。也是GIS系統的基礎功能

效果圖

工具條樣式：

距離測量：

面積測量：

require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/toolbars/navigation",
    "esri/toolbars/draw",
    "esri/tasks/GeometryService",
    "esri/symbols/Font",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol"
 
,
    "esri/symbols/TextSymbol",
    "esri/Color",
    "esri/graphic",
    "esri/tasks/LengthsParameters",
    "esri/geometry/Point",
    "esri/geometry/Polyline",
    "esri/tasks/AreasAndLengthsParameters",
    "dojo/dom-attr",
    "dojo/domReady!"
],function(Map,ArcGISDynamicMapServiceLayer,Navigation,Draw,GeometryService,Font,SimpleMarkerSymbol,SimpleLineSymbol,TextSymbol,Color,Graphic,LengthsParameters,
    Point,Polyline,AreasAndLengthsParameters,domAttr)
 
{ 
    var chinaCollagelayer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/2017shixi/collegeMap/MapServer");
    var map = new Map("map");
    map.addLayer(chinaCollagelayer);
//建立地圖操作物件
    var navToolbar = new Navigation(map);
//toolbar工具條
    var toolbar = new Draw(map);
 //呼叫esri自帶的服務（在arcgis server Manger中，記得開啟服務）
 

    var geometryService =new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
    var totleDistance = 0.0;//總距離
    var totalGraphic = null;//儲存點集合
    var disFun =false;//距離測量
    var areaFun = false;//面積測量
    var inputPoints = [];//儲存生成點的集合
    var startFont = new Font('12px').setWeight(Font.WEIGHT_BOLD);//定義文字樣式
    var makerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,8,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([204,102,51]),1),
                new Color([158.184,71,0.65]));//定義標記點樣式
//給按鈕新增繫結事件
    query(".functionWrap").on("click",function(event){
        //獲得按鈕的文字資訊
        var value=domAttr.get(this,"title");
        switch(value){
            case "平移":
                navToolbar.activate(Navigation.PAN);
                break;
            case "拉框縮小":
                navToolbar.activate(Navigation.ZOOM_OUT);
                break;
            case "拉框放大":
                navToolbar.activate(Navigation.ZOOM_IN);
                break;
            case "全圖":
                map.centerAndZoom(([110,38.5]),5);
                break;
            case "距離測量":
                distanceMeasure();
                break;
            case "面積測量":
                areaMeasure();
                break;
            case "清除標記":
                clearAction();
                break;
        }
    };
   //長度量算
    function distanceMeasure() {
        map.enableScrollWheelZoom();
        disFun=true;
        areaFun=false;
        toolbar.activate(Draw.POLYLINE);
    }
    //面積量算
    function areaMeasure() {
        map.enableScrollWheelZoom();
        disFun=false;
        areaFun=true;
        toolbar.activate(Draw.POLYGON);
    }
    // 量算功能觸發
    map.on("click",function (evt) {
        mapClick(evt);
    });
    //觸發完成的事件
    toolbar.on("draw-end",function (evt) {
        addToMap(evt);
    });
 //生成兩點之間的連線
    toolbar.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2));
 //量算函式
    function mapClick(evt) {
        if(disFun){
            inputPoints.push(evt.mapPoint);
            var  textSymbol;
            if(inputPoints.length ===1){
                textSymbol = new TextSymbol("起點",startFont,new Color([204,102,51]));
                textSymbol.setOffset(0,-20);
                map.graphics.add(new Graphic(evt.mapPoint,textSymbol));
            }
            map.graphics.add(new Graphic(evt.mapPoint,makerSymbol));
            if(inputPoints.length >=2){
                //    設定距離測量的引數
                var  lengthParams = new LengthsParameters();
                lengthParams.distanceUnit = GeometryService.UNIT_METER;
                lengthParams.calculationType = "preserveShape";
                var p1 = inputPoints[inputPoints.length-2];
                var p2 = inputPoints[inputPoints.length-1];
                if(p1.x ===p2.x &&p1.y===p2.y){
                    return;
                }
                //    z在兩點之間劃線將兩點連結起來
                var polyline = new Polyline(map.spatialReference);
                polyline.addPath([p1,p2]);
                lengthParams.polylines=[polyline];
                // 根據引數，動態的計算長度
                geometryService.lengths(lengthParams,function(distance){
                    var _distance = number.format(distance.lengths[0]/1000);
                    totleDistance+=parseFloat(_distance);//計算總長度
                    var beetwentDistances = _distance+"千米";
                    var tdistance = new TextSymbol(beetwentDistances,startFont,new Color([204,102,51]));
                    tdistance.setOffset(40,-3);
                    map.graphics.add(new Graphic(p2,tdistance));
                    if(totalGraphic){
                        map.graphics.remove(totalGraphic);
                    }
                    var total=number.format(totleDistance,{
                        pattern:"#.000"
                    });
                    //    設定總長度的顯示樣式，並新增到地圖上
                    var totalSymbol=new TextSymbol("總長度："+total+"千米",startFont,new Color([204,102,51]));
                    totalSymbol.setOffset(40,-15);
                    totalGraphic= map.graphics.add(new Graphic(p2,totalSymbol));
                });
            }
        }
    }
    // 新增圖形函式
    function addToMap(evt) {
        if(disFun||areaFun){
            var geometry = evt.geometry;//繪製圖形的geometry
            //將繪製的圖形新增到地圖上去
            var symbol = null;
            switch (geometry.type){
                case "point":
                    symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1),
                        new Color([0,255,0,0.25]));
                    break;
                case "polyline":
                    symbol  = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                        new Color([255,0,0,0.8]),2);
                    break;
                case "polygon":
                    symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),
                        new Color([255,255,0,0.25]));
                    break;
                case "extent":
                    symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),
                        new Color([255,255,0,0.25]));
                    break;
            }
            map.graphics.add(new Graphic(geometry,symbol));
            if(disFun){
                inputPoints.splice(0,inputPoints.length);//刪除陣列中的所有元素
                totleDistance =0.0;
                totalGraphic = null;
            }
            else if(areaFun){
                //設定面積和長度的引數
                var areasAndLengthsParameters =new AreasAndLengthsParameters();
                areasAndLengthsParameters.lengthUnit = GeometryService.UNIT_METER;//設定距離單位
                areasAndLengthsParameters.areaUnit = GeometryService.UNIT_SQUARE_KILOMETERS;//設定面積單位
                geometryService.simplify([geometry],function (simplifiedGeometries) {
                    areasAndLengthsParameters.polygons = simplifiedGeometries;
                    geometryService.areasAndLengths(areasAndLengthsParameters,function (result) {
                        var font =new Font("16px",Font.STYLE_NORMAL,Font.VARIANT_NORMAL,Font.WEIGHT_BOLDER);
                        var areaResult = new TextSymbol(number.format(result.areas[0],{
                            pattern:'#.000'
                        })+"平方公里",font,new Color([204,102,51]));
                        var spoint = new Point(geometry.getExtent().getCenter().x,geometry.getExtent().getCenter().y,map.spatialReference);
                        map.graphics.add(new Graphic(spoint,areaResult));//在地圖上顯示測量的面積
                    });

                });
            }

        }
    }
    //清空函式
    function clearAction() {
        toolbar.deactivate();//撤銷地圖繪製功能
        disFun = false;
        areaFun = false;
        map.enableScrollWheelZoom();
        map.graphics.clear();
        var graphicLayerIds = map.graphicsLayerIds;
        var len = graphicLayerIds.length;
        for(var i=0; i<len;i++){
            var gLayer = map.getLayer(graphicLayerIds[i]);
            gLayer.clear();
        }
    }
});