首页 / OpenLayers / 使用示例
`r`n 图标着色
同一套几何用色相滑块重新生成彩色图标,不依赖多张图片。
`r`n
源码与运行效果
说明
图标用 Canvas 画好后转成 data URL,色相滑块改变填充色并重新调用
toDataURL(),再把新地址交给 ol.style.Icon。
整个流程只在页面内完成,不需要准备彩色图片素材。
按类别分配色相时,可以把类别值映射到 0 至 360 的色相区间, 用一张基础图形生成任意颜色的图标。
| 操作 | 结果 |
|---|---|
| 拖动色相滑块 | 三个图标同时换色,位置不变 |
| 观察图标尖端 | 锚点保持不变,坐标仍对准图钉尖 |
| 切换底图明暗 | 图标颜色依旧清晰可辨 |
每次拖动都重新生成 data URL 会产生大量临时字符串,频繁操作时按色相分桶缓存图标地址更划算。