leaflet选中要素，设置矢量样式，点击要素获取其属性

最新推荐文章于 2025-05-20 13:02:05 发布

原创最新推荐文章于 2025-05-20 13:02:05 发布 · 7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#leaflet #点击获取属性

leaflet 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Leaflet地图库通过featureLayer的onclick事件实现地图要素的点击高亮显示及获取要素属性信息。通过设置要素样式并遍历其属性，展示了一种实用的地图交互方式。

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

leaflet自身没有选择的控制，需要自己写代码实现

主要是通过featurelayer的onclick事件来设置点击要素的style，并获取对应feature的属性信息

let featureLayer = L.esri.featureLayer({
    url:'http://mgr.easylinking.net:6080/arcgis/rest/services/TDZT/TDCBTB/FeatureServer/2'
});
map.addLayer(featureLayer);
featureLayer.on('click',function (evt) {
    // console.log(evt.layer.feature.properties.party)
    let fea=evt.layer.feature

    target=evt.target
    evt.sourceTarget.setStyle({
        fillColor: '#53e033',//填充颜
        color: "#ff0000"
    })
    let shuxing=evt.layer.feature.properties
    for(var p in shuxing){//遍历json数组时，这么写p为索引，0,1
        console.log(p);
        console.log(shuxing[p]);

    }
    // fea.geometry.setStyle({
    //     fillColor: '#53e033',//填充颜
    //     color: "#ff0000"
    // })
})