leaflet 渲染geoJSON数据

最新推荐文章于 2025-07-16 16:50:50 发布

原创最新推荐文章于 2025-07-16 16:50:50 发布 · 1.6w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#地图 #GeoJSON

Leaflet.js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Leaflet地图库渲染GeoJSON数据，并设置了特定的样式参数。通过示例代码展示了如何添加数据到地图上，以及如何为GeoJSON图层添加点击事件来获取特征属性。

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

leaflet 渲染GeoJSON数据

//设置样式
 var myStyle = {
            "color": "#00f",
            "weight": 3,
            "opacity": 0.5,

        };
//geojson数据
var someFeatures = [{
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "show_on_map": true
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
}, {
    "type": "Feature",
    "properties": {
        "name": "Busch Field",
        "show_on_map": false
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.98404, 39.74621]
    }
}];
//渲染方法
var layerGeo = L.geoJSON(someFeatures, {
    style:myStyle
}).addTo(map);
//添加点击事件
layerGeo.on('click',function(e){
    console.log(e.layer.feature.properties.name) //当前点击的物体的名称
})