Mapbox gl js Mapbox GL v.0.54：基于单击更改图标图像

我试图在mapbox GL中实现一个单层，显示单击时更改的图标。到目前为止，我尝试了以下几点：

            let data = {} // object that stores the geojson data
            let points = map.queryRenderedFeatures(e.point, {
                layers: ['projects-point']
            })
            if (points.length) {
                data.map(function(item, index) {
                if (item.id === points[0].id) {
                    data[index].properties.image = 'active'
                }
                else
                    data[index].properties.image = 'inactive'
            })
            map.getSource('projects').setData(this.dataObj.data)
            }

使用属性（将图像预加载为活动和非活动后）：

以及各种版本的map.updateImage（）动态更改为每个点显示的图像：

map.updateImage(`point1`, map.loadImage('/img/pin_active.png'))
map.updateImage(`point1`, 'active')) //with the image being loaded beforehand as 'active'
map.updateImage(`point1`, map.loadImage('/img/pin_active.png', function(error, image) {
                        if (error) throw error;
                        map.addImage(point1, image);
                    }))

唯一可行的解决方案是使用SDF（）——但这不适用于我的多色图标（因为SDF格式的伸缩性很差，所以它们变得非常难看）

---

有什么办法吗？

好的，在做了一些额外的工作后，我找到了一个有效的解决方案。把这个留给以后找到它的人

如果我们预先将图像作为字符串active和inactive加载：

'icon-image': ["case",["boolean", ["feature-state", "clicked"], false],
                                "inactive",
                                "active"
                            ],

            map.loadImage('/img/pin_blue.png', function(error, image) {
                if (error) throw error;
                map.addImage('inactive', image);
            })
            map.loadImage('/img/pin_red.png', function(error, image) {
                if (error) throw error;
                map.addImage('active', image);
            })

我们可以做到以下几点：

            let data = {} // object that stores the geojson data
            let points = map.queryRenderedFeatures(e.point, {
                layers: ['projects-point']
            })
            if (points.length) {
                data.map(function(item, index) {
                if (item.id === points[0].id) {
                    data[index].properties.image = 'active'
                }
                else
                    data[index].properties.image = 'inactive'
            })
            map.getSource('projects').setData(this.dataObj.data)
            }

---

你到底是什么意思，点击时会改变的图标？如果您只是在几个图标之间循环，那么只需提前加载它们就会简单得多。或者甚至使用标记而不是图标层。我只想在单击图标时显示图标的“活动”版本。只需在一组图标之间循环即可。我试图使图标图像依赖于功能状态，但布局层似乎不支持这种被动属性？