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

图标着色

同一套几何用色相滑块重新生成彩色图标,不依赖多张图片。

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

说明

图标用 Canvas 画好后转成 data URL,色相滑块改变填充色并重新调用 toDataURL(),再把新地址交给 ol.style.Icon。 整个流程只在页面内完成,不需要准备彩色图片素材。

按类别分配色相时,可以把类别值映射到 0 至 360 的色相区间, 用一张基础图形生成任意颜色的图标。

操作结果
拖动色相滑块三个图标同时换色,位置不变
观察图标尖端锚点保持不变,坐标仍对准图钉尖
切换底图明暗图标颜色依旧清晰可辨

每次拖动都重新生成 data URL 会产生大量临时字符串,频繁操作时按色相分桶缓存图标地址更划算。

`r`n
`r`n