首页 / OpenLayers / 使用示例
自定义符号渲染
不用 Circle 样式,改在 postrender 里按要素的像素位置画星形、六边形与齿轮,形状由单选切换。
源码与运行效果
说明
ol.style.Circle 只能画圆,想要任意符号就得接管绘制。示例监听地图的
postrender 事件,拿到画布上下文,再用
map.getPixelFromCoordinate() 把每个要素换算成屏幕像素,在像素坐标里画路径。
图形按「外接半径与内接半径交替」生成顶点,星形取 10 个点、齿轮取 16 个点;
切换形状只改一个变量并调用 map.render(),要素数据没有变化。
| 操作 | 结果 |
|---|---|
| 切换「星形 / 六边形 / 齿轮」 | 符号形状立即变化 |
| 缩放或平移地图 | 符号始终贴在城市位置,大小为屏幕像素 |
| 观察颜色 | 每个城市使用各自的填充色 |
在 postrender 里绘制只对当前这一帧有效,地图每次重绘都会重新触发,所以不需要手动清理画布。