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

时间:2018-12-02 20:35:26

标签: view slider zoom openlayers

我在较旧的OL5中使用了一个有用的错误,现已修复,并且从几周后我就一直在寻找解决方案...

我希望ZoomSlider停留在整数缩放级别之间。当我单击滑块时,它会移动从16到17。“视图中的多边形”可能比我需要的大一点。然后,我稍微移动了Sliderbutton,使视图更加完美-但是当我离开鼠标按钮时,Sliderbutton会跳到最近的水平...

过去的错误,在那里我可以向左或向右滑动Sliderbutton,而完美的View处于关卡之间的台阶上(但是在这种状态下视图没有刷新,但是大多数情况下,该视图对于我;我打印了此视图)。

现在可悲的是,此错误已修复...-所以我搜索了再次达到这些级别之间台阶的可能性。

我尝试使用constainResolution假/真,pinchZoom假/真,zoomDelta或delta值在0.5到2之间的组合(肯定是错误的)...没有任何帮助,并且在API,google,..中搜索了很多之后,我现在很困惑。

我不明白“捏”的意思(通常我会说德语;在字典中,这个词的意思太多...)-因为我看不到任何变化,也没有将pinchZoom设置为true或不设置为false ...

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

1 个答案:

答案 0 :(得分:3)

我找不到您所描述的ZoomSlider可以运行的任何早期版本的OpenLayers。

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

例如将每个普通缩放级别分为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;
};