arcgis sketch 模块不会安装到 DOM

Question

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

我不确定为什么会这样，但我正在尝试按照此处的示例代码进行操作： 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])

arcgis sketch 模块不会安装到 DOM

arcgis sketch module won't mount to DOM

arcgis

vue.js