首页 / OpenLayers / 使用示例
WebGL 矢量图层
六个区域用 WebGL 矢量图层绘制，悬停时通过变量切换描边颜色与宽度。
源码与运行效果
说明
ol.layer.WebGLVector 的样式是字面量对象，stroke-color 和 stroke-width 可以用 case 表达式按 ['var', 'highlightedId'] 与要素 ['id'] 的比较结果切换。指针移动时只更新 highlightedId 变量，要素几何不重建。要素颜色存在 COLOR 属性中，以 RGB 数组参与表达式。
| 操作 | 结果 |
|---|---|
| 悬停到区域上 | 该区域描边变白加粗，顶部显示名称 |
| 移到空白处 | 高亮清除，所有区域恢复默认描边 |
| 缩放地图 | WebGL 批量绘制要素，交互保持流畅 |
WebGL 矢量图层的样式表达式在图层级别编译，频繁变化的属性应写成样式变量，不要每帧重建样式对象。