vue3 arcgis js 加载geojson

要在 Vue 3 中使用 ArcGIS API for JavaScript 加载 GeoJSON 数据，您可以使用 `esri-loader` 库来加载 API，并使用 `FeatureLayer` 类来加载 GeoJSON 数据。

以下是一个基本的示例代码：

<template>
  <div id="map"></div>
</template>

<script>
import { loadModules } from "esri-loader";

export default {
  mounted() {
    // 加载 ArcGIS API for JavaScript
    loadModules(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"]).then(
      ([Map, MapView, FeatureLayer]) => {
        // 创建地图和视图
        const map = new Map({
          basemap: "streets-vector",
        });

        const view = new MapView({
          container: "map",
          map: map,
          center: [-118.244, 34.052],
          zoom: 12,
        });

        // 加载 GeoJSON 数据
        const geojsonUrl = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";

        const featureLayer = new FeatureLayer({
          url: geojsonUrl,
        });

        // 添加图层到地图
        map.add(featureLayer);
      }
    );
  },
};
</script>

<style>
#map {
  height: 400px;
  width: 100%;
}
</style>

在这个示例中，我们首先使用 `loadModules` 方法加载 `Map`，`MapView` 和 `FeatureLayer` 类。然后，在回调函数中创建一个 `Map` 和 `MapView` 实例，将它们绑定在 `div` 元素上，并设置一些基本属性。

接下来，我们使用 `FeatureLayer` 类加载一个远程 GeoJSON 数据文件的 URL。最后，我们将图层添加到地图中，完成加载和显示 GeoJSON 数据。

请注意，这个示例中加载的 GeoJSON 数据来自 USGS 的地震数据源。您可以使用任何其他包含有效 GeoJSON 数据的 URL 来代替它。