vuecli 加载arcgis api for js 2D测量部件

//记录//记录//记录//记录//记录//记录//记录//记录//记录//记录//

官方demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Measurement in 2D - 4.15</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
         100%;
      }

      #topbar {
        background: #fff;
        padding: 10px;
      }

      .action-button {
        font-size: 16px;
        background-color: transparent;
        border: 1px solid #d3d3d3;
        color: #6e6e6e;
        height: 32px;
         32px;
        text-align: center;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
      }

      .action-button:hover,
      .action-button:focus {
        background: #0079c1;
        color: #e4e4e4;
      }

      .active {
        background: #0079c1;
        color: #e4e4e4;
      }
    </style>

    <link
      rel="stylesheet"
      href="http:///localhost/arcgis/API/4.15/esri/themes/light/main.css"
    />
    <script src="http:///localhost/arcgis/API/4.15/dojo/dojo.js"></script>

    <script>
      require([
        "esri/views/MapView",
        "esri/WebMap",
        "esri/widgets/DistanceMeasurement2D",
        "esri/widgets/AreaMeasurement2D"
      ], function(MapView, WebMap, DistanceMeasurement2D, AreaMeasurement2D) {
        var activeWidget = null;

        // load a webmap
        const webmap = new WebMap({
          portalItem: {
            id: "990d0191f2574db495c4304a01c3e65b"
          }
        });

        // create the map view
        const view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        // add the toolbar for the measurement widgets
        view.ui.add("topbar", "top-right");

        document
          .getElementById("distanceButton")
          .addEventListener("click", function() {
            setActiveWidget(null);
            if (!this.classList.contains("active")) {
              setActiveWidget("distance");
            } else {
              setActiveButton(null);
            }
          });

        document
          .getElementById("areaButton")
          .addEventListener("click", function() {
            setActiveWidget(null);
            if (!this.classList.contains("active")) {
              setActiveWidget("area");
            } else {
              setActiveButton(null);
            }
          });

        function setActiveWidget(type) {
          switch (type) {
            case "distance":
              activeWidget = new DistanceMeasurement2D({
                view: view
              });

              // skip the initial 'new measurement' button
              activeWidget.viewModel.newMeasurement();

              view.ui.add(activeWidget, "top-right");
              setActiveButton(document.getElementById("distanceButton"));
              break;
            case "area":
              activeWidget = new AreaMeasurement2D({
                view: view
              });

              // skip the initial 'new measurement' button
              activeWidget.viewModel.newMeasurement();

              view.ui.add(activeWidget, "top-right");
              setActiveButton(document.getElementById("areaButton"));
              break;
            case null:
              if (activeWidget) {
                view.ui.remove(activeWidget);
                activeWidget.destroy();
                activeWidget = null;
              }
              break;
          }
        }

        function setActiveButton(selectedButton) {
          // focus the view to activate keyboard shortcuts for sketching
          view.focus();
          var elements = document.getElementsByClassName("active");
          for (var i = 0; i < elements.length; i++) {
            elements[i].classList.remove("active");
          }
          if (selectedButton) {
            selectedButton.classList.add("active");
          }
        }
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="topbar">
      <button
        class="action-button esri-icon-measure-line"
        id="distanceButton"
        type="button"
        title="Measure distance between two or more points"
      ></button>
      <button
        class="action-button esri-icon-measure-area"
        id="areaButton"
        type="button"
        title="Measure area"
      ></button>
    </div>
  </body>
</html>

　　主要通过vuex解决

组件

/////////.components/test.vue
<template>
  <div>
    <div id="viewDiv"></div>
    <div id="topbar">
      <button
        class="action-button esri-icon-measure-line"
        @click="distanceLine"
        id="distanceButton"
        type="button"
        title="测量两个或多个点之间的距离"
      ></button>
      <!-- @click="distanceMBtn" -->
      <!-- @click="areaMBtn" -->
      <button
        class="action-button esri-icon-measure-area"
        @click="areaM"
        id="areaButton"
        type="button"
        title="测量面积"
      ></button>
    </div>
  </div>
</template>

<script>
import { loadModules } from "esri-loader";
import global from "../../utils/global.js";

export default {
  name: "Distance",
  data() {
    return { activeWidget: null };
  },
  mounted() {
    const options = {
      url: " http://localhost:80/arcgis/API/4.15/init.js",
      css: "http://localhost:80/arcgis/API/4.15/esri/themes/light/main.css",
    };
    loadModules(
      [
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/WebTileLayer",
        "esri/widgets/DistanceMeasurement2D",
        "esri/widgets/AreaMeasurement2D",
      ],
      options
    ).then(this.init);
  },
  methods: {
    //创建地图
    init([
      ArcGISMap,
      MapView,
      WebTileLayer,
      DistanceMeasurement2D,
      AreaMeasurement2D,
    ]) {
      // var activeWidget = null;
      var tiledLayer = new WebTileLayer({
        urlTemplate:
          "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=aeae35f8750027dc9790a7437c5ec3c0",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
      });

      var tiledLayer_poi = new WebTileLayer({
        urlTemplate:
          "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=aeae35f8750027dc9790a7437c5ec3c0",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
      });

      var map = new ArcGISMap({
        basemap: {
          baseLayers: [tiledLayer, tiledLayer_poi],
        },
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 12,
        center: [116.402544, 39.915599],
      });
      //清除掉地图左上角默认的缩放图标
      view.ui.components = [];
      //将小部件添加至右上角
      view.ui.add("topbar", "top-right");

      // zhuce
      this.register(
        ArcGISMap,
        MapView,
        WebTileLayer,
        DistanceMeasurement2D,
        AreaMeasurement2D
      );

      this.$store.state.map = map;
      this.$store.state.view = view;
      // this.$store.state.activeWidget = activeWidget;
      // .catch((err) => {
      //   this.$message("地图创建失败，" + err);
      // });
    },
    register() {
      global.ArcGISMap = arguments[0];
      global.MapView = arguments[1];
      global.FeatureLayer = arguments[2];
      global.DistanceMeasurement2D = arguments[3];
      global.AreaMeasurement2D = arguments[4];
    },

    distanceLine() {
      console.log("直线测量");
      this.setActiveWidget(null);
      if (
        !document.getElementById("distanceButton").classList.contains("active")
      ) {
        this.setActiveWidget("distance");
      } else {
        this.setActiveButton(null);
      }
    },
    areaM() {
      this.setActiveWidget(null);
      if (
        !document.getElementById("distanceButton").classList.contains("active")
      ) {
        this.setActiveWidget("area");
      } else {
        this.setActiveButton(null);
      }
    },
    setActiveWidget(type) {
      switch (type) {
        case "distance":
          this.activeWidget = new global.DistanceMeasurement2D({
            view: this.$store.state.view,
          });
          // skip the initial 'new measurement' button
          this.activeWidget.viewModel.newMeasurement();

          this.$store.state.view.ui.add(this.activeWidget, "top-right");
          this.setActiveButton(document.getElementById("distanceButton"));
          break;
        case "area":
          this.activeWidget = new global.AreaMeasurement2D({
            view: this.$store.state.view,
          });

          // skip the initial 'new measurement' button
          this.activeWidget.viewModel.newMeasurement();

          this.$store.state.view.ui.add(this.activeWidget, "top-right");
          this.setActiveButton(document.getElementById("areaButton"));
          break;
        case null:
          if (this.activeWidget) {
            view.ui.remove(this.activeWidget);
            this.activeWidget.destroy();
            this.activeWidget = null;
          }
          break;
      }
    },
    setActiveButton(selectedButton) {
      // focus the view to activate keyboard shortcuts for sketching
      this.$store.state.view.focus();
      var elements = document.getElementsByClassName("active");
      for (var i = 0; i < elements.length; i++) {
        elements[i].classList.remove("active");
      }
      if (selectedButton) {
        selectedButton.classList.add("active");
      }
    },
  },
};
</script>
 
<style  scoped>
html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
   100%;
}

#topbar {
  background: #fff;
  padding: 10px;
}

.action-button {
  font-size: 16px;
  background-color: transparent;
  border: 1px solid #d3d3d3;
  color: #6e6e6e;
  height: 32px;
   32px;
  text-align: center;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.action-button:hover,
.action-button:focus {
  background: #0079c1;
  color: #e4e4e4;
}

.active {
  background: #0079c1;
  color: #e4e4e4;
}
</style>

vuex state储存全局数据,通过this.$store.state.view访问

/////store.index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    map: '',
    view: '',
  },
  mutations: {

  },
  actions: {

  },
  getters: {

  }
})

global.js存放注册的全局变量，在组件中先导入global.js，通过global. 

.utils/global.js
export default {
    ArcGISMap() {

    },
    MapView() {

    },
    WebTileLayer() {

    },
    DistanceMeasurement2D() {

    },
    AreaMeasurement2D() {
        
    }
}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jiang2020/p/13640276.html