在 OpenLayers 中捕获鼠标滚轮缩放

Capturing mousewheel zoom in OpenLayers

本文关键字：缩放 鼠标 OpenLayers      更新时间：2023-09-26

我在OpenLayers中有一张地图，其中有许多带有标记的图层。每次用户缩放地图时，我都会调用一个对重叠标记进行分组的函数。这在使用普通缩放按钮进行缩放时工作得很好，但当用户使用鼠标滚轮缩放时，我也想调用此函数。

我想我必须使用OpenLayers.Handler.MouseWheel来捕捉这个事件，但我不知道如何。有人有这方面的例子吗？

您应该使用map的zoomend事件，无论用户如何放大或缩小（按钮，双击或鼠标滚动），每次用户放大或缩小时都会触发该事件。

代码应如下所示：

map.events.on({ "zoomend": function(){
    //Do whatever you need to do here
}});

使用最新版本的 Openlayers v6.5.0。我得到了它的工作

this.map = new Map({
            controls: [],
            interactions: defaultInteractions({
                shiftDragZoom: false,
                doubleClickZoom: false,
                pinchRotate: false,
                mouseWheelZoom: false,
            }).extend([
                new MouseWheelZoom({
                    condition: platformModifierKeyOnly,
                    handleEvent: (event) => {
                        if (event.type !== "wheel") return;
                        if (event.originalEvent.deltaY <= -3) {
                            //mouse wheel up
                        } else {
                            //mouse wheel down
                        }
                    },
                }),
            ]),
            target: "map",
            layers,
        });
相关文章：