经纬志
首页 / Leaflet / 使用示例

GeoJSON 图层

一份包含点、线、面的 GeoJSON,按等级上色,可过滤要素、强调重点并随时恢复视野。

Leaflet 1.9.4 · 更新 2026-10-28
源码与运行效果
运行效果

说明

样式由 style 回调按 level 返回,点要素则交给 pointToLayer 转成带 divIcon 的标记, onEachFeature 里统一挂提示与气泡。三者的分工不能混: style 返回的 color 不会影响点的外观。

过滤开关通过 filter 实现,切换后整个图层重建, 被排除的要素连图层都不会创建。setStyle 只作用于线与面, 所以「强调重点」改变线面虚线样式后,点的高亮用 setZIndexOffset 单独处理。

回调只作用于本例用途
style线、面按等级取色、调线宽与填充
pointToLayer点转成 divIcon 圆点,避免默认图钉
onEachFeature全部要素绑 tooltip 与 popup,显示属性
filter全部要素返回 false 即不创建图层
getBounds()整个图层计算并集范围用于 fitBounds

filter 改变后必须重建图层,直接在原图层上删除要素会残留引用。 要素数量上千时,把过滤条件提前放到接口查询里,比加载后丢弃更省流量。