Mapbox GL v.0.54：根据点击更改图标图像

Question

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

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

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

各种版本的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（mapbox gl change icon color） - 但这对我的图标来说不起作用，这些图标是多色的（由于SDF格式似乎很难扩展，因此它们变得非常丑陋）。

关于如何处理这个的任何想法？

Answer 1

好吧，经过一些额外的摆弄，我发现了一个有效的解决方案。把它留在这里，等待以后找到它的人。

如果我们事先将图像加载为活动和非活动字符串：

            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)
            }