如何在openlayers中将缩放级别限制为整数答案

【问题标题】：How to restrict zoom levels to integers in openlayers如何在openlayers中将缩放级别限制为整数
【发布时间】：2017-10-20 08:05:57
【问题描述】：

我正在开发 google maps 和 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

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

我可以将 openlayer 缩放值限制为整数还是做一些变通？

我在调用 googleMap.setZoom 时尝试使用 openlayers 缩放的 ceil/floor 值，但因为缩放还涉及中心位置的变化，它会导致生涩、不愉快的行为。

【问题讨论】：

标签： openlayers openlayers-3

【解决方案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

【讨论】：

它似乎无法解决我的问题。是的，zoom 的最终值是一个整数，但我仍然得到那些介于分数之间的值。
使用map.on('moveend', () => { console.log(map.getView().getZoom()) }) 您希望在缩放结束后不改变分辨率，因为它在缩放级别之间进行动画处理。
openlayers动画结束后无法启动google map zoom动画，比现在的更奇怪

【解决方案2】：

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

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

在没有动画的情况下，结果会更加突然，但这样一来，OpenLayers 和 Google 地图之间就不会再出现奇怪的行为了。

我正在使用 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 }),
});

【讨论】：