首页 / OpenLayers / 使用示例
`r`n 自定义样式渲染器
内置图形不够用时,renderer 回调能拿到画布上下文,想画什么就画什么。
源码与运行效果
说明
示例把变电站画成仪表盘:外圈固定圆环表示容量,内部扇形按负荷比例填充,颜色随比例从绿转红。renderer 收到屏幕像素坐标与 state,其中 state.context 就是绘制上下文。滑块改动比例后调用 layer.changed(),扇形随比例重绘。
| 操作 | 结果 |
|---|---|
| 拖动滑块 | 扇形角度变化,颜色按阈值切换 |
| 缩放地图 | 符号保持像素尺寸,锚点跟随坐标 |
| 查看标注 | 名称位于符号下方 |
要点
- 坐标数组与几何类型对应,点时取
coordinates[0]即屏幕位置。 - 绘制前后成对调用
save与restore,避免状态污染后续要素。
自定义绘制不会自动处理命中检测,需要点击时另外用几何判断。