arcgis 绘制测量功能实现

不知道为什么只要是地图就一定会有工具箱工具箱就一定要有测距侧面积撒的。。。

还好arcgis原本就支持很多形式的工具

目前就一一实现一下吧

1. 测距侧面

　　测量距离和测量面积都差不多，大概思路就是创建一个几何然后交给arcgis 本身的api来处理，绘制方面就使用draw类来实现，很简单的过程开始....

首先第一步先创建一个可以绘制几何的draw实力对象用来完成第一步

      const sketchViewModel = new this.esri.SketchViewModel({
        layer: this.getLayer("系统绘制",view),
        view: view,
        polygonSymbol: {
          type: "polygon-3d", // autocasts as new PolygonSymbol3D()
          symbolLayers: [
            {
              type: "fill", // autocasts as new FillSymbol3DLayer()
              material: {
                color: [255, 255, 255, 0.8]
              },
              outline: {
                size: "3px",
                color: [82, 82, 122, 1]
              }
            }
          ]
        },
        updateOnGraphicClick: false
      })
      
      sketchViewModel.on("create",(e)=>{
        if( e.state === \'complete\' )
          sketchViewModel.update(e.graphic,{
            util: "reshape"
          })
      })

      sketchViewModel.create(type)

　　这里就实现绘制和编辑的功能

2. 然后就是处理geometry的测量问题了

　　需要用到的就是我们的老朋友了，geometryEnglish

geodesic ( geometry , unit ){
    if( geometry.type === \'polyline\' ){
      return esri.geometryEngine.geodesicLength(geometry, unit || 9001 ); 
    }else if( geometry.type === \'polygon\' ){ 
　　   return esri.geometryEngine.geodesicArea(geometry, unit || 109404); 
　　 } 
}

　后面的单位编码具体的官方api有详细的列表

OK 功能结束

2020 - 10 - 09 打脸来的如此之快

关于测量实际上官方例子中已经有成熟的demo可以直接拿来使用了

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Measurement.html

总之已经不需要自己去辛辛苦苦处理各种单位呀变化呀 symbol这些东西，照搬demo就行了过于简单

 measure: function(div,view = window.view){
    if( !div ){
      div = document.createElement("div");
    }

    return new Promise(function(a,b){
      // 给容器内部创建 
      esriRequire([
        "esri/widgets/DirectLineMeasurement3D",
        "esri/widgets/AreaMeasurement3D"
      ]).then((argu)=>{
        var DirectLineMeasurement3D = argu[0],
            AreaMeasurement3D = argu[1];
        var activeWidget = null;
        var ret = { 
          remove: function(){
            if( activeWidget ){
              view.ui.remove(activeWidget);
              activeWidget.destroy();
              activeWidget = null;
            }
          },
          activeLine: function(){
            ret.remove();
            var activeLine = new DirectLineMeasurement3D({
              view: view
            });
            activeWidget = activeLine;
            activeLine.viewModel.newMeasurement();
            view.ui.add(activeWidget, "top-right");
          },
          activeArea: function(){
            ret.remove();
            var activeArea = new AreaMeasurement3D({
              view: view
            });
            activeWidget = activeArea;
            activeArea.viewModel.newMeasurement();
            view.ui.add(activeWidget, "top-right");
          }
        }
        a(ret)

      });
    })
  }

　　以上完结！！！