首页 / OpenLayers / 使用示例
缩放滑块控件
连续缩放的场景更适合滑块而不是加减按钮；控件与视图双向同步，滚轮操作也能反映到滑块上。
源码与运行效果
说明
控件内部持有一个 input[type=range]，input 事件把数值交给
view.setZoom()。反向同步监听视图的 change:resolution，
把最新层级写回滑块。范围限制在 3 到 18 之间，步长 0.5，
避免滑块拖到视图允许范围之外。
| 操作 | 结果 |
|---|---|
| 拖动滑块 | 地图层级连续变化 |
| 使用滚轮缩放 | 滑块位置同步移动 |
| 查看顶部读数 | 显示当前层级，保留一位小数 |
滑块输入是高频事件，若联动的是后端瓦片请求，应加节流而不是每次都重建数据源。