Arcgis 点击按钮添加FeatureLayer后点击测量时会弹出error?

Question

<template>
  <div class="Map">
    <div class="Map" id="viewMap">
      <span
        id="info"
        style="
          position: absolute;
          left: 15px;
          bottom: 5px;
          color: #000;
          z-index: 50;
        "
      ></span>
    </div>
 
    <div id="infoDiv">
      <button
        class="esri-component"
        type="button"
        id="switch-btn"
        @click="addLayer"
      >
        click
      </button>
      /> -->
      <span id="weizhi"></span>
    </div>
    <div id="toolbarDiv" name="toolbarDiv3D" class="esri-component esri-widget">
      <button
        id="point"
        class="esri-widget--button esri-interactive esri-icon-map-pin"
        title="Point Measurement Tool"
      ></button>
      <button
        id="distance"
        class="esri-widget--button esri-interactive esri-icon-measure-line"
        title="Distance Measurement Tool"
      ></button>
      <button
        id="area"
        class="esri-widget--button esri-interactive esri-icon-measure-area"
        title="Area Measurement Tool"
      ></button>
      <button
        id="clear"
        class="esri-widget--button esri-interactive esri-icon-trash"
        title="Clear Measurements"
      ></button>
    </div>
  </div>
</template>
 
<script>
import Vue from "vue";
import { loadModules } from "esri-loader";
 
export default {
  name: "Map",
  components: { },
  props: {},
  data: function () {
    return {
      options: {
        url: "https://js.arcgis.com/4.24/",
        css: "https://js.arcgis.com/4.24/esri/themes/light/main.css",
      },
      map: null,
      mapView: null,
    };
  },
  created: function () {},
  mounted: async function () {
    const options = {
      url: "https://js.arcgis.com/4.24/",
      css: "https://js.arcgis.com/4.24/esri/themes/light/main.css",
    };
    loadModules(
      [
        "esri/Map",
        "esri/views/MapView",    
        "esri/widgets/Measurement",
        "esri/layers/GeoJSONLayer"
      ],
      options
    ).then(
      ([
        Map,
        MapView,
        Measurement,
        GeoJSONLayer,
      ]) => {
 
        const renderer = {
          type: "simple",
          field: "mag",
          symbol: {
            type: "simple-marker",
            color: "orange",
            outline: {
              color: "white",
            },
          },
          visualVariables: [
            {
              type: "size",
              field: "mag",
              stops: [
                {
                  value: 2.5,
                  size: "4px",
                },
                {
                  value: 8,
                  size: "40px",
                },
              ],
            },
          ],
        };
 
        const geojsonLayer = new GeoJSONLayer({
          url: "https://geodata.gov.hk/gs/api/v1.0.0/geoDataQuery?q=%7Bv%3A%221%2E0%2E0%22%2Cid%3A2c819770-15c0-41c7-bb33-6ef6fe98583d%2Clang%3A%22ALL%22%7D",
          renderer: renderer,
        });
 
        // Create new Map with TileLayer and FeatureLayer
        this.map = new Map({
          basemap: "arcgis-streets",
        });
 
        // Create MapView with defined zoom and center
        const mapView = new MapView({
          zoom: 11,
          center: [114.1694, 22.3193],
          map: this.map,
        });
 
        // Set the activeView to the 2D MapView
        this.mapView = mapView;
 
        // Create new instance of the Measurement widget
        const measurement = new Measurement();
 
        // Set-up event handlers for buttons and click events
        const switchButton = document.getElementById("switch-btn");
        const distanceButton = document.getElementById("distance");
        const areaButton = document.getElementById("area");
        const clearButton = document.getElementById("clear");
 
        distanceButton.addEventListener("click", () => {
          distanceMeasurement(this);
        });
        areaButton.addEventListener("click", () => {
          areaMeasurement(this);
        });
        clearButton.addEventListener("click", () => {
          clearMeasurements(this);
        });
 
        // Call the loadView() function for the initial view
        loadView(this);
 
        // The loadView() function to define the view for the widgets and div
        function loadView(self) {
          self.mapView.set({
            container: "viewMap",
          });
          // Add the appropriate measurement UI to the bottom-right when activated
          self.mapView.ui.add(measurement, "bottom-right");
          // Set the views for the widgets
          measurement.view = self.mapView;
        }
 
        // Call the appropriate DistanceMeasurement2D or DirectLineMeasurement3D
        function distanceMeasurement(self) {
          const type = self.mapView.type;
          measurement.activeTool =
            type.toUpperCase() === "2D" ? "distance" : "direct-line";
          distanceButton.classList.add("active");
          areaButton.classList.remove("active");
        }
 
        // Call the appropriate AreaMeasurement2D or AreaMeasurement3D
        function areaMeasurement(self) {
          measurement.activeTool = "area";
          distanceButton.classList.remove("active");
          areaButton.classList.add("active");
        }
 
        // Clears all measurements
        function clearMeasurements(self) {
          distanceButton.classList.remove("active");
          areaButton.classList.remove("active");
          measurement.clear();
        }
      }
    );
  },
  updated: function () {},
  watch: {},
  computed: {},
  methods: {
    addLayer() {
      const self = this;
      loadModules(["esri/layers/FeatureLayer"], this.options).then(
        ([FeatureLayer]) => {
          const Layer = new FeatureLayer({
            url: "https://services3.arcgis.com/6j1KwZfY2fZrfNMR/arcgis/rest/services/Hong_Kong_Domestic_households_by_monthly_domestic_household_rent_by_Small_TPU_in_2016/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json",
          });
 
          self.map.add(Layer);
        }
      );
    },
 
    refresh() {},
  },
};
</script>
<style lang="scss">
@import "./Map.scss";
</style>
 
 

这是什么问题