使用Arcgis for API Javascript 自带的sketch“草图”微件更加高效快捷实现地图上面积的计算

AreaUse() {

      try {

        var me = this;

        var view = this.view;

        var map = this.map;

        me.$message({

            message: "开始计算面积计算",

            type: "success",

            customClass: "message",

          });

        let options = {

            url: 'https://js.arcgis.com/4.26/',

            css: 'https://js.arcgis.com/4.26/esri/themes/light/main.css'

        };

        loadModules(["esri/widgets/Sketch","esri/layers/GraphicsLayer", "esri/geometry/geometryEngine"],options)

        .then(([Sketch,GraphicsLayer,geometryEngine]) => {

          let layer_areaUse = new GraphicsLayer();

          map.add(layer_areaUse);

          me.layer_areaUse = layer_areaUse;

            // 添加"草图"微件

          const sketch = new Sketch({

            layer: layer_areaUse,

            view: view,

            availableCreateTools: ["polygon"],

            creationMode: "update",

            updateOnGraphicClick: true,

            visibleElements: {

              createTools: false,

              selectionTools:false,

              settingsMenu: false,

              undoRedoMenu: false

            }

          });

          sketch.create("polygon"); // 绘制形状

          sketch.on("update", (e) => {

          const geometry = e.graphics[0].geometry;

            if (e.state === "start") {

              const dis = geometryEngine.geodesicArea(geometry, "square-meters");

              me.$alert(

                "<div><span>" +

                  "面积计算" +

                  "</span>" +

                  "<i class='iconfont icon-wanjiantou'>" +

                  "</i>" +

                  "<ul>" +

                  "<li>" +

                  dis.toFixed(2) + " m2" +

                  "</li>" +

                  "</ul></div>",

                  "面积",

                {

                  dangerouslyUseHTMLString: true,

                  showConfirmButton: false,

                  customClass: "heightCHA",

                  callback: (action) => {},

                }

              );

            }

            if (e.state === "complete") {

              layer_areaUse.remove(layer_areaUse.graphics.getItemAt(0));

            }

          });

        })

      } catch (error) {

        console.log(error);

      }

    },