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

【问题标题】：Mapbox GL v.0.54: Change icon-image based on clickMapbox GL v.0.54：根据点击更改图标图像
【发布时间】：2019-09-18 23:35:27
【问题描述】：

我正在尝试在 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 格式似乎很难缩放）。

关于如何解决这个问题的任何想法？

【问题讨论】：

你的意思是什么，点击时图标会改变？如果您只是循环浏览几个图标，那么提前将它们全部加载会更简单。甚至使用标记而不是图标层。
我只想在点击图标时显示一个“活动”版本的图标。只需循环浏览一组图标就可以了。我试图让图标图像依赖于功能状态，但布局层似乎不支持这种反应属性？

标签： mapbox-gl-js

【解决方案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)
            }

【讨论】：