OpenLayers 7中配置mouseWheelZoom交互及解决升级报错

报错原因 #

OpenLayers 7 重构了默认交互的导出逻辑，原 OL6 中的 ol.interaction.defaults 函数不再直接作为全局方法存在，改为 ol.interaction.defaults.defaults() 调用，这就是你遇到 ol.interaction.defaults is not a function 报错的核心原因。

修改后的代码 #

const map = new ol.Map({
    layers: [clusterHulls, clusters, clusterCircles],
    target: 'map',
    view: view,
    interactions: ol.interaction.defaults.defaults({
        dragPan: false,
        mouseWheelZoom: false
    }).extend([
        new ol.interaction.DragPan({
            condition: function (event) {
                return this.getPointerCount() === 2 || ol.events.condition.platformModifierKeyOnly(event);
            },
        }),
        new ol.interaction.MouseWheelZoom({
            condition: ol.events.condition.platformModifierKeyOnly,
        }),
    ]),
});

代码说明 #

• 禁用默认冲突交互：通过 ol.interaction.defaults.defaults({dragPan: false, mouseWheelZoom: false}) 关闭默认的拖拽平移和鼠标滚轮缩放交互，避免和自定义逻辑冲突。
• 自定义拖拽平移规则：重新添加 DragPan 交互，设置触发条件为双指触摸拖拽，或按住系统修饰键（Windows 为 Ctrl，Mac 为 Command）时单指拖拽。
• 自定义滚轮缩放规则：添加 MouseWheelZoom 交互，仅当按住系统修饰键时才触发地图缩放，平时滚轮操作会正常作用于页面滚动。

内容的提问来源于stack exchange，提问作者obs