将数据从 geojson 文件加载到 mapbox 地图时出现问题

Question

我使用此代码将数据从 geojson 文件加载到此 mapbox 地图：

var mapTooltips = L.mapbox.map('map-tooltips', 'mapbox.streets')
  .setView([54.00366,-2.547855], 6);

  var featureLayer = L.mapbox.featureLayer()
    .loadURL('https://www.mapbox.com/mapbox.js/assets/data/stations.geojson')
    .addTo(mapTooltips);

问题：

使用来自 mapbox 的 URL 作为测试，标记完美地出现在地图上

https://www.mapbox.com/mapbox.js/assets/data/stations.geojson

但是当我使用来自另一台服务器的同一个文件时，例如：

https://s3.amazonaws.com/web-app-cdata/MapaFel/stations.geojson

标记没有出现，不起作用。

使用地图框link:

使用 S3 link:

我想提一下，S3 link 具有完全访问权限。理论上任何人都可以访问

有什么想法吗？

Answer 1

默认不允许从外域加载资源（如geojson文件）。这被称为制作 cross-origin HTTP request。

因此，当 mapbox-gl 尝试从您的 S3 实例加载 geojson 文件 (jsfiddle) 时，出现错误：

XMLHttpRequest cannot load https://s3.amazonaws.com/web-app-cdata/MapaFel/stations.geojson. No 'Access-Control-Allow-Origin' header is present on the requested resource.

您可以从 mapbox 服务器加载相同的 geojson，因为 Mapbox 通过指定响应 header 明确允许此类 cross-origin 请求：Access-Control-Allow-Origin: *

作为explained here:

"The server responds with a Access-Control-Allow-Origin: * which means that the resource can be accessed by any domain in a cross-site manner. "

将数据从 geojson 文件加载到 mapbox 地图时出现问题

Problems loading data from a geojson file to a mapbox map

mapbox