经纬志
首页 / OpenLayers / 使用示例

自定义符号渲染

不用 Circle 样式,改在 postrender 里按要素的像素位置画星形、六边形与齿轮,形状由单选切换。

OpenLayers 10.3.1 · 对应官方 custom-circle-render.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

ol.style.Circle 只能画圆,想要任意符号就得接管绘制。示例监听地图的 postrender 事件,拿到画布上下文,再用 map.getPixelFromCoordinate() 把每个要素换算成屏幕像素,在像素坐标里画路径。

图形按「外接半径与内接半径交替」生成顶点,星形取 10 个点、齿轮取 16 个点; 切换形状只改一个变量并调用 map.render(),要素数据没有变化。

操作结果
切换「星形 / 六边形 / 齿轮」符号形状立即变化
缩放或平移地图符号始终贴在城市位置,大小为屏幕像素
观察颜色每个城市使用各自的填充色

在 postrender 里绘制只对当前这一帧有效,地图每次重绘都会重新触发,所以不需要手动清理画布。