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

矢量图层交互高亮

鼠标划过区域,要素被复制到高亮图层描白边,顶部同时显示区域名称。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

高亮效果不修改原图层样式,而是把命中的要素加入另一个只负责描边的矢量图层 featureOverlay。指针移动时先比较当前高亮要素,只有变化才增删要素,避免每帧重复操作。属性面板读取要素的 ECO_NAME 字段。

操作结果
鼠标划过区域被划过的要素出现白色描边,顶部显示名称
移到另一区域旧描边移除,新区域描边
点击地图属性面板保持最近一次命中的结果

同一个要素可以同时属于多个矢量源;高亮层只放命中要素,样式简单,不会改动业务图层的符号体系。