Question

我正在开发Google地图和openlayers之间的集成4.我的工作基于this example from documentation for openlayers 3。

我的问题是，change:resolution事件的ol 3和ol 4.4.2行为之间的某处发生了变化。以前这段代码

view.on('change:resolution', () => {
    console.log(view.getZoom())  
})

仅在每次鼠标滚轮旋转时调用一次并记录（例如）：

现在它产生了这样的东西：

4.017277252772164
4.08563754449778
4.152661471658049
4.522609511830051
4.691606503462093
4.793368457643155
4.891103916717288
4.980192777999678
4.999621855713164
5

因此，当我尝试在谷歌地图和openlayers之间同步缩放（如示例中所示）时，它会导致谷歌地图在每次缩放时闪烁。谷歌地图似乎不支持缩放的小数值。

我可以将openlayer zoom值限制为整数还是可以解决一些问题？

我在调用googleMap.setZoom时尝试使用openlayers的ceil / floor值进行缩放，但由于缩放也涉及中心位置的更改，因此会导致生涩，不愉快的行为。

Answer 1

默认行为是在缩放缩放时提供更好的平板电脑和触控板支持。

interactions: ol.interaction.defaults({mouseWheelZoom: false}).extend([
      new ol.interaction.MouseWheelZoom({
        constrainResolution: true // force zooming to a integer zoom
      })
    ])

每 http://openlayers.org/en/latest/examples/mousewheel-zoom.html

Answer 2

对于遇到此问题的任何人，我解决此问题的方法是将默认缩放交互的 zoomDuration 设置为 0，并结合 constrainResolution 属性。

中间缩放级别来自用于从一个级别缩放到另一个级别的动画（动画的默认持续时间为 250 毫秒）。通过使用 constrainResolution，您可以确保您拥有一个可供 Google 地图使用的整数值，并且通过将 zoomDuration 设置为 0，您可以移除导致 change:resolution 处理程序中的小数值的动画.

如果没有动画，结果会有点突然，但这样一来 OpenLayers 和 Google Map 之间就不会再有奇怪的行为了。

我正在使用 OpenLayers 6.5.0，但我想它也适用于早期版本。这是工作代码：

import { defaults } from 'ol/interaction';

// ...

this.view = new View({
    // ...
    constrainResolution: true,
});
    
const olMap = new Map({
    target: 'map',
    controls: [],
    layers: [],
    view: this.view,
    interactions: defaults({ zoomDuration: 0 }),
});

如何将缩放级别限制为openlayers中的整数

2 个答案: