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

悬停高亮

指针移入圆点时半径变大、颜色变橙,移出恢复。状态写在 feature-state 里,不重建数据源。

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

说明

源的 promoteId 把属性 id 提为要素 id,setFeatureState 才能定位到具体要素。绘制表达式用 feature-state 读取 hover。

记录上一个悬停 id,进入新要素前先清旧状态,否则会留下一串高亮。

配置取值说明
promoteId'id'用属性当要素 id
feature-statehover布尔状态
case 表达式读状态决定半径与颜色

feature-state 只对同一 source 生效,换源要重新 setFeatureState;源被 setData 整体替换后状态会被清空。