如何将 SVG 图标添加到我的 Mapbox Studio 样式

Question

我有一个自定义 SVG 图标，我想在 Mapbox 地图中使用。我已成功将图标添加到 Mapbox Studio 中的样式中，并且它出现在可用图像列表中。

但是当我尝试在地图中使用它时，它没有显示。

{
    'id': 'hubs',
    'type': 'symbol',
    'paint': {
        'icon-color': "red",
        'icon-opacity': 0.8,
    },
    'layout': {
        'icon-image': 'warehouse'
    }
}

我在地图中使用Studio风格：

<Map
    initialViewState={{
        longitude: -0.114835,
        latitude: 51.545553,
        zoom: 11.5
    }}
    style={{ width: "100%", height: 400 }}
    mapStyle="mapbox://styles/MY_MAPBOX_USER/MY_STYLE_ID"
    styleDiffing
    mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
    onMouseMove={onHover}
    interactiveLayerIds={interactiveLayerIds}
>
// etc.

但是，当我使用内置图标时，它工作得很好：

'layout': {
    'icon-image': 'airport-15'
}

我已经浏览了 Mapbox Studio 中的 SVG 图像错误故障排除页面，但这并没有帮助。

我做错了什么？

Answer 1

我已经遇到过两次这个问题了。在每种情况下，解决方案就是等待。我的猜测是，图标需要一段时间才能通过 Mapbox 的 CDN 传播。大约15分钟后，图标就会开始出现，就可以正常使用了。