/////////.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%;
  width: 100%;
}

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

.action-button {
  font-size: 16px;
  background-color: transparent;
  border: 1px solid #d3d3d3;
  color: #6e6e6e;
  height: 32px;
  width: 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>

/////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: {

  }
})

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

    },
    MapView() {

    },
    WebTileLayer() {

    },
    DistanceMeasurement2D() {

    },
    AreaMeasurement2D() {
        
    }
}