arcgis草图模块不会装入DOM

Question

我正在尝试在我的vue应用程序中包括arcgis草图模块。由于某种原因，在追加草图模块时，我的浏览器控制台日志输出了第一个参数不是节点类型的错误，那么它无法在浏览器中加载小部件？

我不知道为什么会发生这种情况，但我试图遵循下面的示例代码：https://developers.arcgis.com/javascript/latest/sample-code/sketch-geometries/index.html

<template>
  <div></div>
</template>

<script>
import { loadModules } from "esri-loader";
let E = {}; // placeholder for Esri modules

export default {
  name: "web-map",
  props: {
    coords: {
      type: Object,
      required: true
    },
  },
  data: function() {
    return {
      view: null,
      nodes: []
    };
  },
  mounted() {
    // lazy load the required ArcGIS API for JavaScript modules and CSS
    loadModules([
        "esri/Map", 
        "esri/views/MapView", 
        "esri/geometry/Point", 
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch"], {
      css: true
    }).then(([ArcGISMap, MapView, Point, GraphicsLayer, Sketch]) => {
      E.ArcGISMap = ArcGISMap;
      E.MapView = MapView;
      E.Point = Point;
      var graphicsLayer = new GraphicsLayer();

      const map = new E.ArcGISMap({
        basemap: "topo-vector"
      });

      this.view = new E.MapView({
        container: this.$el,
        map: map,
        center: [this.coords.latitude, this.coords.longitude],
        zoom: 9
      });

        // create a new sketch widget
        const sketch = new Sketch({
          view:this.view,
          layer: graphicsLayer
        });


       this.view.ui.add(sketch, "top-right");
       map.add(graphicsLayer);


    });

  },
  watch: {
    coords() {
      this.showPos();
    }
  },
  beforeDestroy() {
    if (this.view) {
      this.view.container = null;
    }
  },
  methods: {
    showPos() {
      if (E.Point) {
        const point = new E.Point(this.coords.longitude, this.coords.latitude);
        this.view.goTo({ center: point });
      } else {
        console.log("Map modules are still loading...");
      }
    },

    calcAvg(param){
      console.log('calc average',param)

      switch(param) {
          case 'wind':
            console.log('wind nodes',this.nodes)
            break;
          case 'rain':
            console.log('rain nodes',this.nodes)
            break;
          case 'elevation':
            console.log('elevation nodes',this.nodes)
            break;
          default:
            // code block
        }
    },
  }
};
</script>

Answer 1

您的进口没有对齐。你有：

loadModules([
        "esri/Map", 
        "esri/views/MapView", 
        "esri/geometry/Point", 
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch"], {
      css: true
    }).then(([ArcGISMap, MapView, Point, GraphicsLayer, Sketch])

这意味着：

esri/Map -> ArcGISMap

esr/views/MapView -> MapView

esri/geometry/Point -> Point

esri/Graphic -> GraphicsLayer

esri/layers/GraphicsLayer -> Sketch

esri/widgets/Sketch ->未分配

您需要确保您的loadModules([])数组与.then([])数组的顺序相同。使用此方法确保组件对齐：

loadModules([
        "esri/Map", 
        "esri/views/MapView", 
        "esri/geometry/Point", 
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch"], {
      css: true
    }).then(([ArcGISMap, MapView, Point, Graphic, GraphicsLayer, Sketch])