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

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

官方demo

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

<!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%;
        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>
 
    <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%;
  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>

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() {
        
    }
}