OL5.3 ZoomSlider 和缩放级别之间的步骤 - 如何实现？

Question

我在旧版 OL5 中使用了一个有用的错误，现在它已修复，几周以来我再次寻找解决方案......

我对 ZoomSlider 的愿望是保持在整数缩放级别之间的步长。当我单击滑块时，它会移动，例如从 16 到 17。视图中的多边形可能比我需要的大一点。然后我稍微移动滑块按钮，视图就很完美 - 但当我离开鼠标按钮时，滑块按钮会跳转到最近的级别...

过去的bug，我可以将滑块按钮向左或向右移动，完美的视图位于级别之间的台阶上（但视图在这种状态下不会刷新，但大多数时候这个视图对我来说没问题；我打印了这个视图）。

现在遗憾的是这个错误已被修复...... - 所以我寻找再次到达关卡之间步骤的可能性。

我尝试了

constrainResolution

false/true、pinchZoom false/true、zoomDelta 或 delta 值在 0.5 到 2 之间的组合（肯定是错误的）...没有任何帮助，在 API、google 中搜索后，.. 并尝试了很多，我现在很困惑。

我不明白“捏”的含义（通常我说德语；在字典中这个词有很多含义......） - 因为我没有看到任何变化，我也没有将捏缩放设置为

true 

也不设置为

false

...

“在缩放级别之间保持视图”有什么解决方案吗？

Answer 1

我找不到任何早期版本的 OpenLayers，其中 ZoomSlider 按照您的描述工作。

一种解决方法是将视图缩放系数设置得非常小，以创建更多缩放级别，并将缩放按钮控件和交互上的增量选项设置得相应大，以便它们继续在正常缩放级别下工作。

例如将每个正常缩放级别分为 100 个缩放级别：

var zoomFactorDelta = 100;
var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    controls: ol.control.defaults({
        zoomOptions: { delta: zoomFactorDelta }
    }).extend([
        new ol.control.ZoomSlider()
    ]),
    interactions: ol.interaction.defaults({
        zoomDelta: zoomFactorDelta
    }),
    keyboardEventTarget: document,
    view: new ol.View({
        center: ol.proj.fromLonLat( [8, 50] ),
        zoomFactor: Math.pow(2,1/zoomFactorDelta),
        zoom: 10 * zoomFactorDelta,
        maxZoom: 20 * zoomFactorDelta
    })
});

但是，虽然 ZoomDelta 设置按键盘和双击缩放的预期工作，但它对鼠标滚轮缩放没有任何影响（尽管文档描述“使用键盘或鼠标滚轮缩放时的缩放级别增量”），使鼠标滚轮缩放 100 倍比以前慢。保持鼠标滚轮缩放以正常速度工作的另一种方法是重新定义视图的 constrainResolution 函数以乘以默认的 delta 参数：

var zoomFactorDelta = 100;
var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    controls: ol.control.defaults().extend([
        new ol.control.ZoomSlider()
    ]),
    keyboardEventTarget: document,
    view: new ol.View({
        center: ol.proj.fromLonLat( [8, 50] ),
        zoomFactor: Math.pow(2,1/zoomFactorDelta),
        zoom: 10 * zoomFactorDelta,
        maxZoom: 20 * zoomFactorDelta
    })
});
var view = map.getView();
var defaultConstrainResolution = view.constrainResolution.bind(view);
view.constrainResolution = function(resolution, delta, direction) {
    return defaultConstrainResolution(resolution, delta*zoomFactorDelta, direction)
};

仅使用 constrainResolution 函数的重写的解决方法也有效，但它可能在其他地方产生副作用：

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    controls: ol.control.defaults().extend([
        new ol.control.ZoomSlider()
    ]),
    keyboardEventTarget: document,
    view: new ol.View({
        center: ol.proj.fromLonLat( [8, 50] ),
        zoom: 10
    })
});
var view = map.getView();
var defaultConstrainResolution = view.constrainResolution.bind(view);
view.constrainResolution = function(resolution, delta, direction) {
    return Math.abs(delta) > 0 ? defaultConstrainResolution(resolution, delta, direction)
                               : resolution;
};