mapboxgl点击高亮显示的实现

mapboxgl点击高亮显示的实现，采用过滤的方式实现。

    //geojson点数据
    var geojsonPoints = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "properties": {
                "id":1,
                "name": "point1",
            },
            "geometry": {
                "type": "Point",
                "coordinates": [113.22332296629585,22.7491244227423]
            }
        },{
            "type": "Feature",
            "properties": {
                "id":2,
                "name": "point2",
            },
            "geometry": {
                "type": "Point",
                "coordinates": [113.22332296629585,22.7391244227423]
            }
        }]
    };

第一步：将数据放入pointlayer图层，用于展示所有数据

    //将数据放于pointlayer显示
    map.addSource('geodataPoint', { type: 'geojson', data: geojsonPoints });
    map.addLayer({
        'id': 'pointlayer',
        'type': 'circle',
        'source': "geodataPoint",
        'paint': {
            'circle-radius':13,
            "circle-color": "#B42222"
        }
    });

第二步：将数据放入pointlayerhighlight图层，用于选中时高亮显示

   map.addLayer({
        'id': 'pointlayerhighlight',
        'type': 'circle',
        'source': "geodataPoint",
        'paint': {
            'circle-radius':13.2,
            "circle-color": "#0000ff"
        },
        "filter": ["in", "id", ""]
    });

第三步：点击pointlayer图层的时候，显示过滤结果

 map.on('click', 'pointlayer', function(e) {
            var feature = e.features[0];
            map.setFilter('pointlayerhighlight', ['in', 'id', feature.properties.id]);
            var popup = new mapboxgl.Popup({
                closeButton: false
            });
            popup.setLngLat(feature.geometry.coordinates)
                .setText(feature.properties.id)
                .addTo(map);
        });

显示效果：