vue项目arcgis使用wmts服务添加geojson格式图层

在 Vue 项目中使用 ArcGIS API for JavaScript 添加 WMTS 服务和 GeoJSON 格式图层的步骤如下：

1. 安装 ArcGIS API for JavaScript：

npm install --save @arcgis/core

2. 在 Vue 组件中引入 ArcGIS API for JavaScript：

import * as ArcGIS from "@arcgis/core";

3. 在 Vue 组件中创建地图和视图：

<template>
  <div ref="mapViewNode" style="height: 100vh;"></div>
</template>

<script>
export default {
  name: "MapView",
  data() {
    return {
      mapView: null
    }
  },
  mounted() {
    this.initializeMap();
  },
  methods: {
    async initializeMap() {
      const [Map, MapView] = await ArcGIS.loadModules(["esri/Map", "esri/views/MapView"]);

      const map = new Map({
        basemap: "streets-navigation-vector"
      });

      const mapView = new MapView({
        container: this.$refs.mapViewNode,
        map: map,
        zoom: 12,
        center: [-118.805, 34.027]
      });

      this.mapView = mapView;
    }
  }
};
</script>

4. 在 `initializeMap` 方法中添加 WMTS 服务和 GeoJSON 格式图层：

async initializeMap() {
  const [Map, MapView, WMTSLayer, GeoJSONLayer] = await ArcGIS.loadModules(["esri/Map", "esri/views/MapView", "esri/layers/WMTSLayer", "esri/layers/GeoJSONLayer"]);

  const map = new Map({
    basemap: "streets-navigation-vector"
  });

  const mapView = new MapView({
    container: this.$refs.mapViewNode,
    map: map,
    zoom: 12,
    center: [-118.805, 34.027]
  });

  const wmtsLayer = new WMTSLayer({
    url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/WMTS",
    id: "WorldTimeZones",
    title: "World Time Zones",
    activeLayer: { 
      id: "WorldTimeZones"
    }
  });

  map.add(wmtsLayer);

  const geoJsonLayer = new GeoJSONLayer({
    url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson"
  });

  map.add(geoJsonLayer);

  this.mapView = mapView;
}

注意：在添加 WMTS 服务和 GeoJSON 格式图层时需要确保服务和数据源的坐标系信息一致，否则可能会导致图层位置不正确。