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

Canvas 图标符号

没有切图资源时,用 Canvas 画一个标记形状,导出成 data URL 即可作为图标样式使用。

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

说明

ol.style.Icon 接受 src、anchor、scale 等参数。 符号先在离屏 Canvas 上绘制水滴形状,再用 toDataURL() 得到可直接渲染的图片地址。 anchor 设为 [0.5, 1],让尖角对准坐标点而不是图片中心。

操作结果
观察点位五个水滴图标,尖角落在坐标处
拖动缩放地图图标尺寸恒定,位置跟随底图
切换「放大图标」scale 由 1 变为 1.4,图标整体变大

data URL 只适合小图标;图标数量过百时改用 ol.style.Icon 的缓存图集更省内存。