GeoJSON 图层不会在 MapBox GL JS 上加载

Question

我想在 MapBox 底图上添加一层 GeoJSON 数据，但它不起作用。我已经尝试了他们的一些教程，例如 this one and this one，但它们不起作用。

这是我的代码：

var map = new mapboxgl.Map({
      container: 'themap',
      center: [-73.9939914, 40.7274072],
      zoom: 17,
      style: 'mapbox://styles/mapbox/streets-v9'
  });

  map.on('load', function () {

    map.addSource('plutodata', {
    type: 'geojson',
    url: 'http://url.geojson'
    });
   map.addLayer({
   id: 'pluto',
   type: 'fill',
   source: 'plutodata',
   'source-layer': 'plutodata',
       layout: {
         visibility: 'visible'
       },
       paint: {
         'fill-color': 'rgba(61,153,80,0.55)'
       }
    });
  });

地图已加载，但未显示 GeoJSON 图层。我哪里出错了？

完整解决方案：

下面

tmcw 的 post 是解决此问题的第一步。我将 COR-enabling headers 添加到我的 .htaccess 文件中。第二步是 map.addSource 下的 "url" 属性应该是 "data." 现在一切正常了。

Answer 1

Mapbox GL JS 要从该服务器加载数据，需要在服务器或文件上使用Cross-origin resource sharing, and this URL doesn't support that. You'll need to enable CORS允许其他服务器请求数据。

Answer 2

您可以将您的 geojson 作为 tileset 上传到 Mapbox，然后以您的一种样式创建一个新图层，并在 'Layer from Data' 选项卡下输入您的 geojson tileset。例如，如果您将新图层命名为 'mygeojson'，那么您可以在 .js 中调用它，例如：

map.on('load', function() {
    map.addLayer({
        'id': 'mygeojson',
        'source': 'composite',
        'source-layer': 'mygeojson',
        'type': 'fill',
        'paint': {
            'fill-color': '#f00'
        }
    });
});

GeoJSON 图层不会在 MapBox GL JS 上加载

GeoJSON layer won't load on MapBox GL JS

mapbox

geojson

mapbox-gl

mapbox-gl-js