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

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

Mapbox GL v.0.54: Change icon-image based on click

mapbox-gl-js