ArcGis 4.x + vue 初始化引用

<template>
  <div>
    <div id="viewDiv">
      
    </div>
  </div>
</template>
 
<script>
// import { loadScript, loadCss, loadModules } from "esri-loader";
import { loadCss, loadModules } from "esri-loader";

export default {
  name: "HelloWorld",
  data() {
    return {
      gisConstructor: {}, //gis 构造函数
      gis: {}, // gis 实例
      gisModules: [
        "esri/Map",
        "esri/Basemap",
        "esri/views/MapView",
        "esri/geometry/Extent",
        "esri/layers/MapImageLayer",
        "esri/layers/TileLayer",
        "esri/views/draw/Draw",
        "esri/Graphic",
        "esri/geometry/Polyline",
        "esri/geometry/Polygon",
        "esri/geometry/Point",
        "esri/geometry/Circle",
        "esri/geometry/geometryEngine",
        "dojo/domReady!",
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      loadCss("4.16");
      // 加载模块
      loadModules(this.gisModules).then(this.TDTinstance).then(this.initMap);
    },
    TDTinstance(args) {
      // 这里处理了一下传参，构造函数全部保存到 gisConstructor 对象中，对应的函数
      // key 值为加载模块的最后一个单词
      for (let k in args) {
        let name = this.gisModules[k].split("/").pop();
        this.gisConstructor[name] = args[k];
      }
    },
    initMap() {
      let map = new this.gisConstructor.Map();
      let view = new this.gisConstructor.MapView({
        map: map,
        zoom: 2,
        container: "viewDiv",
      });
      // 更换底图服务
      let gisLayer = new this.gisConstructor.TileLayer({
        url:
          "http://xxx.xxx.xxx/arcgis/rest/services/guangdong/MapServer",
        id: "one",
      });
    
      map.layers.add(gisLayer);


      // 添加图层
      gisLayer = new this.gisConstructor.MapImageLayer({
        url:
          "http://xxx.xxx.xxx/arcgis/rest/services/gd_B2/hxtt_B2IHeatArea/MapServer",
        id: "two",
      });
      // 图层透明度
      gisLayer.opacity = 0.4;
      map.layers.add(gisLayer);

      this.gis.map = map; // 绑定到组件，方便操作

    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#viewDiv {
  width: 100%;
  height: 100vh;
}

</style>