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

在 Vue 项目中使用 ArcGIS API for JavaScript 添加 GeoServer 的 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: "http://localhost:8080/geoserver/gwc/service/wmts",
    id: "geoserver-wmts",
    title: "GeoServer WMTS",
    activeLayer: {
      id: "topp:states"
    }
  });

  map.add(wmtsLayer);

  const geoJsonLayer = new GeoJSONLayer({
    url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&outputFormat=application%2Fjson"
  });

  map.add(geoJsonLayer);

  this.mapView = mapView;
}

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