首页 / OpenLayers / 使用示例
WebGL 点图层
两百多个带人口属性的点用 WebGL 绘制，半径和颜色由表达式按属性插值。
源码与运行效果
说明
ol.layer.WebGLPoints 接受字面量样式：circle-radius 用 interpolate 按人口映射，circle-fill-color 用 match 在悬停时变红。指针移动时通过 forEachFeatureAtPixel() 找到要素并写入 hover 属性，渲染循环每帧重绘。下拉框可切换圆点、三角与按纬度着色三种样式。
| 操作 | 结果 |
|---|---|
| 悬停到点上 | 点变为红色，顶部显示城市与人口 |
| 切换样式为「三角」 | 符号改为三角，半径仍按人口变化 |
| 切换为「按纬度着色」 | 颜色随纬度在四个色标之间插值 |
WebGL 图层的样式只接受字面量表达式，不能用 ol.style.Style；表达式里的 get 读取要素属性。