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

框选要素

按住 Shift 拖出一个框,松手后框内要素全部选中并标红,数量实时统计。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

框选由内置的 boxZoom 负责,结束时触发 boxzoomend 并带回 bounds。用 bounds 查询要素比在拖拽过程中反复查询省事得多。

选中状态写在 feature-state 里,清空时逐个复位。

配置取值说明
boxzoomend事件框选结束触发一次
e.boxZoomBoundsLngLatBounds直接作为查询范围
setFeatureStateselected标记选中

框选默认会放大到框的范围,如果只想选择不想改视角,需要在 boxzoomend 里把视图恢复。