ArcGIS JS API 4.x 长度和面积量算

1、主要用到的两个类

  "esri/tasks/GeometryService"                //用于计算面积和长度
  "esri/widgets/Sketch/SketchViewModel"       //地图上鼠标绘制graphic

2、核心代码

注意下面代码第一行，如果未配置本地字体，请把第一行注释了。

GeometryService换成自己可用的GeometryService。

                 esriConfig.fontsUrl = "http://localhost/ArcGIS_Font";   //配置使用本地字体文件,如果为配置，可以把该行注释
                 var geometryUrl = 'http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer'
                 var method;
                 var map = new Map({basemap: "streets"});
                 var view = new MapView({center: [-80, 35], container: "viewDiv", map: map, zoom: 3});
                 var graphicLyr=new GraphicsLayer({id:'lyr1'});
                 map.add(graphicLyr);
                 var sketch=new SketchViewModel({
                     layer:graphicLyr,
                     view:view
                 })
                 var defaultFont=new Font({
                     size:'12px',
                     weight:'bold'
                 });
                 var defaultMarkSymbol=new SimpleMarkerSymbol({
                     style:'circle',
                     color:'red',
                     size:'7px',
                     outline:{
                         color:[255,0,0],
                         width:1
                     }
                 });
                 var totalDis=0;
                 var totalLenGraphic;
                 sketch.on('create',function(evt){
                     if (method=='长度测量'){
                         handleLengthMeasure(evt);
                     } else if(method=='面积测量'){
                         handleAreaMeasure(evt);
                     }
                 });
                 var inputPt=[];
                 function handleLengthMeasure(evt){
                     if(evt.toolEventInfo&&evt.toolEventInfo.type=='vertex-add'){
                         var pt={
                             type:'point',
                             x:evt.toolEventInfo.added[0],
                             y:evt.toolEventInfo.added[1],
                             spatialReference:view.spatialReference
                         }
                         handleLengthPt(pt);
                     }
                 }

                 function handleLengthPt(pt){
                     inputPt.push(pt);
                     var textSymbol;
                     if (inputPt.length==1){
                         textSymbol=new TextSymbol({
                             text:'起点',
                             font:defaultFont,
                             color:[255,0,0],
                             xoffset:0,
                             yoffset:-20
                         })
                         graphicLyr.add(new Graphic({geometry:pt,symbol:textSymbol}));
                     }
                     graphicLyr.add(new Graphic({geometry:pt,symbol:defaultMarkSymbol}));
                     if(inputPt.length>=2){
                         var params=new LengthsParameters();
                         var geoservice=new GeometryService(geometryUrl);
                         params.distanceUnit=GeometryService.UNIT_METER;
                         params.calculationType='preserveShape';
                         var p1=inputPt[inputPt.length-2];
                         var p2=inputPt[inputPt.length-1];
                         var polyline=new Polyline({spatialReference:view.spatialReference});
                         polyline.addPath([[p1.x,p1.y],[p2.x,p2.y]]);
                         params.polylines=[polyline];

                         geoservice.lengths(params).then(function(distance){
                             var dis=parseFloat(number.format(distance.lengths[0],{pattern:'#.000'}));
                             totalDis+=dis;
                             var betweendis = dis+'米';
                             var distext=new TextSymbol({
                                 text:betweendis,
                                 font:defaultFont,
                                 color:[255,0,0],
                                 xoffset:40,
                                 yoffset:-3
                             })
                             graphicLyr.add(new Graphic({geometry:p2,symbol:distext}));
                             if(totalLenGraphic){
                                 graphicLyr.remove(totalLenGraphic);
                             }
                             var total = number.format(totalDis,{pattern:'#.000'});
                             var totalSymbol=new TextSymbol({
                                 text:'总长度：'+total+'米',
                                 font:defaultFont,
                                 color:[255,0,0],
                                 xoffset:40,
                                 yoffset:-20
                             })
                             totalLenGraphic = new Graphic({geometry:p2,symbol:totalSymbol})
                             graphicLyr.add(totalLenGraphic);
                         });

                     }
                 }
                 function handleAreaMeasure(evt){
                     if(evt.state == 'complete'){
                         var geometry=evt.graphic.geometry;
                         var params = new AreasAndLengthsParameters();
                         var geoservice = new GeometryService({url:geometryUrl});
                         params.lengthUnit=GeometryService.UNIT_METER;
                         params.areaUnit = GeometryService.UNIT_SQUARE_METERS;
                         params.calculationType='preserveShape';
                         geoservice.simplify([geometry]).then(function(simplifiedGeo){
                             params.polygons = simplifiedGeo;
                             geoservice.areasAndLengths(params).then(function(result){
                                 var font = new Font({
                                     size:'18px',
                                 })
                                 var areaRes=new TextSymbol({
                                     text:number.format(result.areas[0],{pattern:'#.000'})+"平方米",
                                     font:font,
                                     color:[255,0,0]
                                 });
                                 var pt=new Point({
                                     x:geometry.centroid.x,
                                     y:geometry.centroid.y,
                                     spatialReference:view.spatialReference
                                 });
                                 graphicLyr.add(new Graphic({geometry:pt,symbol:areaRes}));
                                 console.log(result);
                             })
                         })
                     }
                 }
                 document.querySelector("#btn1").addEventListener('click',function(){
                     method='长度测量';
                     sketch.create('polyline',{mode:'click'});
                 })
                 document.querySelector("#btn2").addEventListener('click',function(){
                     method='面积测量';
                     sketch.create('polygon',{mode:'click'});
                 })

3、页面效果 

完整页面案例：https://download.csdn.net/download/shijie_nihao/11549269