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

图标与文字缩放

一个缩放滑块同时控制图标与标注,对比不同比例下的可读性。

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

说明

ol.style.Icon 的 scale 与 ol.style.Text 的 scale 分别控制图标与文字大小。 图标用 Canvas 现场画成图钉,再用 toDataURL() 作为源,避免依赖图片文件。

缩放滑块修改后重建样式对象并调用 layer.changed(), 图标锚点固定在尖端,缩放时不会偏离坐标。

操作结果
拖动「整体缩放」图标与文字同步放大或缩小
取消勾选「显示文字」只保留图标,地图更清爽
放大到最大比例图标尖端仍对准坐标点

图标缩放是像素级缩放,底图放大时不会自动变大;需要「随地图缩放」时应在样式函数里按分辨率动态设置 scale。

`r`n
`r`n