vue3+高德地图从后端一次请求多个geojson文件

vue3+高德地图从后端一次请求多个geojson文件
并且后端返回来的是一个链接，通过这个链接下载geojson

引用chatgpt部分指引作答：
要使用 Vue3 和 AMap 加载多个 GeoJSON 文件，您可以使用 fetch 函数向您的后端 API 发出请求，该 API 将返回用于下载 GeoJSON 数据的 URL。 然后，您可以使用高德地图对象的addGeoJSON 方法将GeoJSON 数据添加到地图中。

以下是如何使用 Vue3 和 AMap 加载多个 GeoJSON 文件的示例：

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

<script>
import { onMounted } from 'vue';
import { Map } from 'vue-amap';

export default {
  components: { Map },
  setup() {
    const mapOptions = {
      zoom: 10,
      center: [116.397428, 39.90923],
    };

    const addGeoJSONToMap = (url) => {
      fetch(url)
        .then((response) => response.json())
        .then((data) => {
          const { features } = data;
          if (features && features.length > 0) {
            // Add GeoJSON data to map
            window.AMap.Map.addGeoJSON(features);
          }
        });
    };

    onMounted(() => {
      // Load multiple GeoJSON files
      const urls = [
        'http://example.com/geojson1',
        'http://example.com/geojson2',
        'http://example.com/geojson3',
      ];

      urls.forEach((url) => addGeoJSONToMap(url));
    });

    return { mapOptions };
  },
};
</script>

在上面的示例中，我们使用 onMounted 钩子在挂载组件时加载 GeoJSON 文件。 我们使用指定的选项创建一个地图组件，并定义一个 addGeoJSONToMap 函数来加载 GeoJSON 数据并使用 addGeoJSON 方法将其添加到地图中。

请注意，您需要将 http://example.com/geojson1
http://example.com/geojson2
和 http://example.com/geojson3
替换为后端 API 返回的实际 URL。