基于arcgis js实现长度、面积量算（重写方法）

先看下效果图，不是直接调用arcgis js 中的measure控件，是自己重写的方法：

我们要用到Draw、GeometryService、还有几个符号类SimpleMarkerSymbol、SimpleLineSymbol、SimpleFillSymbol，

这都是毋庸置疑的，其次，核心类是

//测量 "esri/tasks/GeometryService", "esri/geometry/Geometry", "esri/tasks/LengthsParameters", "dojo/number", "esri/tasks/AreasAndLengthsParameters", "esri/tasks/ProjectParameters",

先简单说下长度测量的方法吧：

我们定义了测量点的集合inputPoints[ ]，长度 dis、总长度totleDistance 等一些变量，

inputPoints 主要用来测两个点之间单条线段的长度，和标注一些文字的（项目上的需求）

上核心代码：

 //如果是要长度测量
            if(disFun){
                inputPoints.push(evt.mapPoint);
                var textSymbol;
                //起点
                //添加字
                if(inputPoints.length ===1){
                    textSymbol =new TextSymbol("起点",startFont,new Color([228,171,74]));//字体样式
                    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;
                    }
                    //将两点之间用线连接
                    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([228,171,74]));
                        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([228,171,74]));
                        totalSymbol.setOffset(40,-15);
                        totalGraphic=map.graphics.add(new Graphic(p2,totalSymbol));
                    });
                }
            }

上面的disFun是一个true/false。判断是否是长度测量的，无关紧要

下面是面积测量，直接上核心代码：

//设置面积和长度的参数
                    var areasAndLengthsParameters = new AreasAndLengthsParameters();
                    areasAndLengthsParameters.lengthUnit=GeometryService.UNIT_METER;//设置距离单位
                    areasAndLengthsParameters.areaUnit =GeometryService.UNIT_SQUARE_KILOMETERS;//设置面积单位
                    this.outSR =new SpatialReference({wkid:102113});
                    geometryService.project([geometry],this.outSR,function (geometry) {
                        /*console.log(geometry[0]);
                           console.log(geometry.getCentroid());*/
                        geometryService.simplify(geometry,function (simplifiedGeometries) {
                            areasAndLengthsParameters.polygons =simplifiedGeometries;
                            // areasAndLengthsParameters.polygons[0].spatialReference = new esri.SpatialReference(4490);
                            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,{
                                    pattern:'#.000'
                                })+"平方公里",font,new Color([228,171,74]));
                                var spoint =new Point(areasAndLengthsParameters.polygons[0].getExtent().getCenter().x,areasAndLengthsParameters.polygons[0].getExtent().getCenter().y,new SpatialReference({wkid:102113}));
                                var point_center;
                                var prjParams =new ProjectParameters();
                                prjParams.geometries =[spoint];
                                prjParams.outSR=new SpatialReference({wkid:4490});
                                geometryService.project(prjParams,function (outputpoints) {
                                    point_center=new Point(outputpoints[0].x,outputpoints[0].y,new SpatialReference({ wkid:4326 }));
                                    //alert("经度："+outputpoints[0].x+",纬度："+ outputpoints[0].y);
                                    map.graphics.add(new Graphic(point_center,areaResult));//在地图上显示测量的面积
                                })
                            })
                        })
                    })

其中面积测量要注意空间参考系，当初我也是在这上面踩了点坑

 上面两段代码是不是看的不够爽，想要一个完整的demo，好了，下面放完整资源的链接：

（其中js需要自己改一下本地的，就只有arcgis 的js）

https://download.csdn.net/download/kk_bluebule/10941798