Mapbox gl js - 如何在单个图层上添加多个照片源答案

【问题标题】：Mapbox gl js - How to add multiple photo sources on a single layerMapbox gl js - 如何在单个图层上添加多个照片源
【发布时间】：2021-05-18 11:54:31
【问题描述】：

我每 2 秒创建一个新的图像源并为该源创建一个新层：

map.addSource("source_" + photo_id, {
    "type": "image",
    "url": photo_url,
    "coordinates": [... ]
})


map.addLayer({
    "id": "layer_" + photo_id,
    "source": "source_" + photo_id,
    "type": "raster",
    "paint": {"raster-opacity": 0.6}
})

这意味着每张照片都会创建一个新图层。我想知道，是否可以在同一图层上添加多个照片源以避免创建多个图层？

map.getSource('photoSource').updateImage(...) 不起作用，因为我希望之前的所有照片也保留在地图上

基本上，我的目标是将地图上的照片分成几组，以便以后能够删除某组照片，而这在一个图层中有多个来源是可能的。

【问题讨论】：

如果您每次都有不同的图像，然后在 mapbox 的一层中组合多个源，我的猜测是不可能的。我相信您可以使用标记，就像docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons 结合stackoverflow.com/a/55917076/10102695 并维护不同的数组以在需要时维护分组和删除。希望对你有帮助

标签： mapbox mapbox-gl-js

【解决方案1】：

这在表达式语法中是 100% 可能的。

                {
                '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,
       }
   });

在此处查看此示例！ https://docs.mapbox.com/mapbox-gl-js/example/add-image-missing-generated/

【讨论】：