OL5.3 ZoomSlider 和缩放级别之间的步骤 - 怎么样？

Question

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

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

以前的bug，我可以让Sliderbutton向左或向右移动，完美的View站在水平之间的台阶上（但是在这个状态下视图没有刷新，但大多数时候这个视图是对我来说没问题；我打印了这个视图）。

遗憾的是，现在这个 bug 已修复... - 所以我搜索了一种可能性，可以再次到达关卡之间的台阶。

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

我不明白 "pinch" 的意思（通常我说德语；在字典里这个词有很多意思...） - 因为我没有看到任何变化，也没有我将 pinchZoom 设置为 true 也没有设置为 false...

"hold view between the Zoom Level"有解决办法吗？

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 设置按键盘和双击缩放的预期工作，但它对鼠标滚轮缩放没有任何影响（尽管文档描述 "Zoom level delta when using keyboard or mousewheel zoom"），使鼠标滚轮缩放比慢 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;
};

OL5.3 ZoomSlider 和缩放级别之间的步骤 - 怎么样？

OL5.3 ZoomSlider and the steps between the zoom-levels - how?

view

slider

zooming

openlayers