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

Question

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

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

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

我在 map 中使用 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'
}

我已经浏览了Troubleshooting SVG image errors in Mapbox Studio页面，但这没有帮助。

我做错了什么？

Answer 1

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