带有 Mapbox gl js 的多个图标精灵答案

【问题标题】：Multiple icon sprites with Mapbox gl js带有 Mapbox gl js 的多个图标精灵
【发布时间】：2016-04-26 14:04:46
【问题描述】：

在 Mapbox.js 中，您可以为每个标记指定一个图像，有什么方法可以使用 Mapbox GL JS 做到这一点？还是仅限于每张地图一个精灵？标记精灵可能会增长到下载速度很慢的大小。

是否可以同时使用多个精灵？

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

【问题讨论】：

标签： javascript mapbox mapbox-gl mapbox-gl-js

【解决方案1】：

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

“符号层特征”（即标记）可能会在地图上显示“图标”
“精灵”是“图标”的集合
“样式”有一个“精灵”

在 Mapbox.js 中，您可以为每个标记指定一个图像，有什么方法可以使用 Mapbox GL JS 做到这一点？

图层中的每个“符号图层功能”可以使用“令牌”显示不同的“图标”。这是mentioned in our documentation。

如果您的“符号层功能”具有icon 属性，您可以使功能使用该图标

"symbol-icon": "{icon}"

是否可以同时使用多个精灵？

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

假设您希望在一个图层中有多个图像，您可能需要检查以下示例： 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,
       }
   });

【讨论】：