mapboxgl点击高亮显示的实现

最新推荐文章于 2025-06-03 09:10:32 发布

原创最新推荐文章于 2025-06-03 09:10:32 发布 · 4.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#mapboxgl #点击高亮显示

mapbox 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用MapboxGL实现地图上点数据的点击高亮功能，通过创建两个图层，一个用于显示所有点数据，另一个用于高亮显示被点击的点。点击事件触发时，更新高亮图层的过滤条件，实现精确的视觉反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

显示效果：