首页 / OpenLayers / 使用示例
Canvas 图标符号
没有切图资源时,用 Canvas 画一个标记形状,导出成 data URL 即可作为图标样式使用。
源码与运行效果
说明
ol.style.Icon 接受 src、anchor、scale 等参数。
符号先在离屏 Canvas 上绘制水滴形状,再用 toDataURL() 得到可直接渲染的图片地址。
anchor 设为 [0.5, 1],让尖角对准坐标点而不是图片中心。
| 操作 | 结果 |
|---|---|
| 观察点位 | 五个水滴图标,尖角落在坐标处 |
| 拖动缩放地图 | 图标尺寸恒定,位置跟随底图 |
| 切换「放大图标」 | scale 由 1 变为 1.4,图标整体变大 |
data URL 只适合小图标;图标数量过百时改用 ol.style.Icon 的缓存图集更省内存。