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

vue3+高德地图从后端一次请求多个geojson文件
vue.js
javascript
前端框架
vue3+高德地图从后端一次请求多个geojson文件
并且后端返回来的是一个链接，通过这个链接下载geojson
希望远程协助一下，下载文件会报跨域

  const urls = [
        'https://sthzxgq.oss-cn-hangzhou.aliyuncs.com/liykj2023/05/1683602920175.geojson',
  ];
   urls.forEach((url) => addGeoJSONToMap(url));

const addGeoJSONToMap = (url) => {
  console.log(url);
      fetch(url, {
        mode:"no-cors",      //允许跨域  no-cors不允许跨域
        credentials:"include",
        headers: {//配置请求头
          "Content-Type": "application/json"
        },
      })
        .then((response) => response.json())
        .then((data) => {
          console.log(data);
          const { features } = data;
          console.log(features);
          if (features && features.length > 0) {
            // Add GeoJSON data to map
            window.AMap.Map.addGeoJSON(features);
          }
        });
};

img

        mode:"no-cors",      //允许跨域  no-cors不允许跨域

应该是

        mode:"cors",      //允许跨域  no-cors不允许跨域

这样才可以跨域访问吧！

该回答引用ChatGPT
根据描述，您想要从后端一次请求多个geojson文件，而后端返回的是一个链接，下载链接会报跨域问题。可以在请求中添加 `mode: "no-cors"`配置允许跨域，但需要注意的是，这将导致无法访问响应中的数据，只能使用一些简单的请求，如GET，同时Content-Type只能是下列之一："application/x-www-form-urlencoded", "multipart/form-data", "text/plain"。此外，在请求中使用headers配置请求头可以避免未来部分浏览器中的警告。代码作答如下：


const urls = [
  'https://sthzxgq.oss-cn-hangzhou.aliyuncs.com/liykj2023/05/1683602920175.geojson',
  //添加其他链接
];
urls.forEach((url) => addGeoJSONToMap(url));

const addGeoJSONToMap = (url) => {
  console.log(url);
  fetch(url, {
    mode: "no-cors", // 允许跨域
    headers: {
      "Content-Type": "application/json", // 配置请求头
    },
  })
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      const { features } = data;
      console.log(features);
      if (features && features.length > 0) {
        window.AMap.Map.addGeoJSON(features); // 添加GeoJSON数据到地图中
      }
    });
};

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
首先，请求多个geojson文件可以使用Promise.all()来实现。我们将每个fetch请求放入一个Promise对象中，并使用Promise.all()将它们组合在一起。这样可以并行地发起请求，提高请求效率。

其次，下载geojson文件涉及到跨域问题。这个问题可以通过在服务器端允许跨域请求来解决。如果无法修改服务器端的代码，则可以尝试在fetch请求中添加"mode":"cors"，这会启用跨域请求。但是这种方式存在一定的安全风险，所以应该谨慎使用。

最后，将下载得到的geojson数据添加到地图中，可以使用高德地图提供的window.AMap.addGeoJSON()方法。

以下是示例代码：

const urls = [
  'https://sthzxgq.oss-cn-hangzhou.aliyuncs.com/liykj2023/05/1683602920175.geojson',
  // 添加更多的geojson链接
];
Promise.all(
  urls.map(url =>
    fetch(url).then(response => {
      if (response.ok) {
        return response.json()
      }
      throw new Error(`Failed to load geojson file ${url}`)
    })
  )
).then(geojsons => {
  const features = geojsons.flatMap(geojson => geojson.features)
  window.AMap.addGeoJSON(features)
}).catch(error => {
  console.error(error)
})

注意：代码中没有指定"mode"属性，因此默认情况下会使用"cors"模式，因此在服务器端必须允许跨域请求。如果服务器端不允许跨域请求，则应该使用"no-cors"模式，并注意在这种情况下，response.json()方法将抛出异常。
如果我的回答解决了您的问题，请采纳！