第一次点击时突出显示功能，然后在第二次点击时“取消突出显示”

Question

使用我的样式化的Mapbox GL JS地图，以及来自geoj​​son文件的多字符串行，当用户单击其中我需要突出显示的行之一时，这部分我正在使用：

map.on('click', 'route', function(e) {

var features = map.queryRenderedFeatures(e.point, { layers: ['route'] });
if (!features.length) {
    return;
}

if (typeof map.getLayer('selectedRoad') !== "undefined" ){
    map.removeLayer('selectedRoad')
    map.removeSource('selectedRoad');   
}


    var feature = features[0];
    console.log(feature.toJSON());
map.addSource('selectedRoad', {
    "type":"geojson",
    "data": feature.toJSON()
});

    map.addLayer({
    "id": "selectedRoad",
    "type": "line",
    "source": "selectedRoad",
    "layout": {
        "line-join": "round",
        "line-cap": "round"
    },
    "paint": {
        "line-color": "yellow",
        "line-width": 8
    }
});

我的geojson条目示例：

{"type": "FeatureCollection", "features": [{"type":"Feature","geometry": 
{"type":"MultiLineString","coordinates":[[[-117.252069,32.748772],[-117.25169,32.749212], 
[-117.25135,32.749608]]]},"properties":{"displaylabel":"1950-1999 GRAND 
ST","sidedaytime1":"West Side Fri 7 am-10 am","sidedaytime2":"7am"}},                                                                                                                                                                                                                                       
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates": 
[[[-117.25135,32.749608],[-117.250981,32.750037],[-117.250621,32.750452]]]},"properties": 
{"displaylabel":"2000-2049 GRAND ST","sidedaytime1":"West Side Fri 7 am-10 
am","sidedaytime2":"East Side Wed 7 am-10 am"}}                                                                                                                                                                                                                                    

我需要用户能够单击并突出显示1到4行，而所有1到4保持突出显示。另外，当用户2nd单击突出显示的行时，我需要“未突出显示。在任何地方都找不到任何示例。非常感谢帮助！”>

使用样式化的Mapbox GL JS地图，并从我的geojson文件中使用多字符串行，当用户单击我需要突出显示的行之一时，这部分我正在使用：map.on（'click'，'route'， ...

Answer 1

最简单的方法是将事件处理程序附加到包含这些行的图层，然后在单击要素时编辑要素状态。将图层加载到地图上时，可以use an expression to style each feature based on its feature state。这是我之前处理这种情况的方式：