多个图标精灵与 Mapbox gl js

Multiple icon sprites with Mapbox gl js

本文关键字：Mapbox gl js 精灵 图标      更新时间：2023-09-26
在Mapbox

中.js您可以为每个标记指定一个图像，有什么方法可以使用Mapbox GL JS执行此操作吗？还是每张地图限制为一个精灵？标记子画面可能会增长到下载缓慢的大小。

是否可以一次使用多个精灵？

还有没有办法在地图加载后切换精灵？我尝试使用 map.setStyle（） 重新加载原始样式，但自定义标记不会重新出现。

首先，让我们确保我们在术语方面保持一致：

    "
  • 符号图层要素"（即标记）可能会在地图上显示"图标"
    • "
  • 精灵"是"图标"的集合
  • 一个"风格"有一个"精灵"
在Mapbox

中.js您可以为每个标记指定一个图像，有没有办法使用Mapbox GL JS执行此操作？

图层中的每个"符号图层要素"都可以使用"令牌"显示不同的"图标"。这在我们的文档中有所提及。

如果"符号图层要素"具有icon属性，则可以使要素使用该图标

"symbol-icon": "{icon}"

是否可以一次使用多个精灵？

不能一次使用多个精灵。您可以在一个图层中使用多个图标。您可以通过创建多个符号图层来为要素使用多个图标。

还有没有办法在地图加载后切换精灵？

不，这在Mapbox GL JS中是不可能的。

根据卢卡斯上面的回答，如果你想在运行时更改一个点的图标，你应该有一个单独的图层使用另一个图标图像，然后简单地从一个层的源数据中删除该点并将其添加到另一个层。

假设您希望在单个图层中显示多个图像，您可能需要检查此示例：https://docs.mapbox.com/mapbox-gl-js/example/add-image-missing-generated/

但是您可能必须添加图像，并且 svg 可能不起作用。


                {
                'type': 'Feature',
                'geometry': {
                    'type': 'Point',
                    'coordinates': [this.long, this.lat]
                },
                'properties': {
                    'icon': 'bus-generic'
                }}

如果您有属性，则可以查询该属性并在图层定义中使用它来显示不同的图标：

   map.addLayer({
       'id': 'bus-layer',
       'type': 'symbol',
       'source': 'bus-source', // reference the data source
       'layout': {
           'icon-image': ['get', 'icon'], // reference the icon in properties
           'icon-size': 0.2,
       }
   });
相关文章：