首页 / OpenLayers / API 文档

ZoomSlider

先看结论

缩放滑块控件。用一条可拖动的竖条在视图的缩放区间内连续调节，松手后平滑过渡到目标层级。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文

new ol.control.ZoomSlider(options)

构造参数

参数	说明
`className`	控件类名，默认 `'ol-zoomslider'`
`duration`	松手后缩放动画时长毫秒，默认 200
`maxResolution`	滑块覆盖的最大分辨率，省略时取视图可用的最大分辨率
`render`	自定义渲染函数，签名 `(evt)`

常用成员

成员	返回	说明
`setMap(map)`	void	挂载后按视图分辨率区间初始化滑块，通常由 `addControl` 调用
`getElement()`	Element	取控件根元素，可自行调整尺寸与位置
`setTarget(target)`	void	更换控件挂载容器

var view = new ol.View({
  center: ol.proj.fromLonLat([116.391263, 39.907359]),
  zoom: 11,
  minZoom: 4,
  maxZoom: 18
});

var map = new ol.Map({
  target: 'map',
  layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
  view: view,
  controls: ol.control.defaults.defaults({ zoom: false }).extend([
    new ol.control.ZoomSlider({ duration: 250 })
  ])
});

注意事项

滑块覆盖的分辨率区间取自视图的 minZoom 与 maxZoom，两者不设时拖动范围会非常大。
默认需要关闭 zoom 控件再添加滑块，同时保留两套缩放按钮会占满角落空间。
控件按竖直方向布局，容器高度由 CSS 决定，高度过小时滑块会溢出到地图之外。
触摸设备上拖动滑块与地图拖拽会争抢手势，必要时给控件容器加独立的事件处理。

引用本文

经纬志（2026）。《ZoomSlider》。https://www.jingweizhi.com/openlayers/api/zoom-slider.html（访问日期 2026-11-03）。