GeoJSON 已加载但未在 MapBox GL JS 中显示

Question

我有一个来自婚礼的 GeoJSON 文件，我想通过 MapBoxGL JS 加载到我的地图上。起初我在加载它时遇到了困难，但是按照此链接上的说明进行操作，我能够加载它。

我知道文件已加载，因为我查看调试器，看到 GeoJSON 数据作为源对象中加载的 JS 对象，但地图本身上没有显示任何内容。我根本没有收到任何错误消息。

这是代码：有人知道问题可能是什么吗？谢谢！！

// Source properties
const s: any = {
    id: 's',
    type: 'geojson',
    data: await fetch('data/url', {
        headers: {
           'Accept': 'application/geo+json'
        }
        }).then(response => response.json()),
    };

// Layer
const fills_layer: FillLayer = {
    'id': 'fills_layer',
    'type': 'fill',
    'source': 's',
    'layout': {},
    'paint': {
        'fill-outline-color': '#484896',
        'fill-color': '#fff',
        'fill-opacity': 0.4
        },
 };

Answer 1

我可以建议你修改代码如下：

'layout': {'visibility': 'visible'},

或者使用此加载表格：

   map.addSource('s', {
      'type': 'geojson',
      'data': './s.geojson'
   });

   map.addLayer({
      'id': 's',
      'type': 'fill',
      'source': 's',
      'layout': {'visibility': 'visible'},
   });

希望对你有帮助！