`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

自定义样式渲染器

内置图形不够用时,renderer 回调能拿到画布上下文,想画什么就画什么。

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

说明

示例把变电站画成仪表盘:外圈固定圆环表示容量,内部扇形按负荷比例填充,颜色随比例从绿转红。renderer 收到屏幕像素坐标与 state,其中 state.context 就是绘制上下文。滑块改动比例后调用 layer.changed(),扇形随比例重绘。

操作结果
拖动滑块扇形角度变化,颜色按阈值切换
缩放地图符号保持像素尺寸,锚点跟随坐标
查看标注名称位于符号下方

要点

  • 坐标数组与几何类型对应,点时取 coordinates[0] 即屏幕位置。
  • 绘制前后成对调用 save 与 restore,避免状态污染后续要素。

自定义绘制不会自动处理命中检测,需要点击时另外用几何判断。

`r`n
`r`n