Openlayers 5 - 动态变化的交互

Question

有没有办法动态改变 Openlayers 中的交互？我设置交互

import {defaults as defaultInteractions} from 'ol/interaction.js';

var interactions = defaultInteractions({
       constrainResolution: true, 
       onFocusOnly: true, 
       doubleClickZoom: false, 
       altShiftDragRotate:false, 
       pinchRotate:false
    });

但是假设我想要一个用户按钮，他们可以在其中打开（或切换）pinchRotate？我已经尝试用一千种不同的方式搜索这个问题，但似乎无法找到如何在渲染地图后修改交互。

Answer 1

需要将交互分配给变量名并添加到默认集合中，而不是包含在默认值中。如果您不需要立即使用它们，请将它们设置为非活动状态。然后，您的按钮可以切换交互活动设置。

var dragRotate = new DragRotate();
var pinchRotate = new PinchRotate();

var interactions = defaultInteractions({
       constrainResolution: true, 
       onFocusOnly: true, 
       doubleClickZoom: false, 
       altShiftDragRotate:false, 
       pinchRotate:false
    }).extend([dragRotate, pinchRotate]);

dragRotate.setActive(false);
pinchRotate.setActive(false);

myRotateButton.addEventListener('click', function() {
    // turn rotation on/off
    dragRotate.setActive(!dragRotate.getActive());
    pinchRotate.setActive(!pinchRotate.getActive());
}, false);

Openlayers 5 - 动态变化的交互

Openlayers 5 - Dynamically changing interactions

openlayers-5