ArcGIS API for JavaScript实现地图常用工具条距离测量，面积测量

系统管理员 2021-09-14 04:04 911阅读 0赞

距离测量，面积测量等工具条是常用的工具。也是GIS系统的基础功能

## 效果图 ##

#### 工具条样式： ####

![这里写图片描述][SouthEast]

#### 距离测量： ####

![这里写图片描述][SouthEast 1]

#### 面积测量： ####

![这里写图片描述][SouthEast 2]

#### 代码： ####

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",
        "dojo/number",
        "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,number,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();
            }
        }
    });

[SouthEast]: /images/20210726/ec527365426d42e68a31392014d59b57.png
[SouthEast 1]: /images/20210726/0fc05afbcf314a2e9157884c878e922a.png
[SouthEast 2]: /images/20210726/c3bc28f40c164f6984cf0fc8d88e0b35.png