首页 / OpenLayers / 使用示例
`r`n 图标与文字缩放
一个缩放滑块同时控制图标与标注,对比不同比例下的可读性。
`r`n
源码与运行效果
说明
ol.style.Icon 的 scale 与
ol.style.Text 的 scale 分别控制图标与文字大小。
图标用 Canvas 现场画成图钉,再用 toDataURL() 作为源,避免依赖图片文件。
缩放滑块修改后重建样式对象并调用 layer.changed(),
图标锚点固定在尖端,缩放时不会偏离坐标。
| 操作 | 结果 |
|---|---|
| 拖动「整体缩放」 | 图标与文字同步放大或缩小 |
| 取消勾选「显示文字」 | 只保留图标,地图更清爽 |
| 放大到最大比例 | 图标尖端仍对准坐标点 |
图标缩放是像素级缩放,底图放大时不会自动变大;需要「随地图缩放」时应在样式函数里按分辨率动态设置 scale。