我可以在Openlayers3中使用ctrl拖动地图吗?

时间:2016-09-30 21:34:00

标签: javascript openlayers-3

按住Ctrl(控制)键时,是否存在拖动地图的方法?

通常拖动地图是必要的,只需按住鼠标左键并在地图上移动,但我需要拖动地图而不按住鼠标左键但使用ctrl按钮。可能吗?

1 个答案:

答案 0 :(得分:2)

确实有一种方法只允许在按住ctrl键的情况下进行平移。在这个小提琴中可以找到一个完整的例子:https://jsfiddle.net/mnpq3ufe/

要使其正常工作,您必须在地图init中禁用现有的dragPan交互,以便稍后覆盖/重新添加:

interactions: ol.interaction.defaults({
    dragPan: false
})

之后,您可以创建新的自定义交互,只需在按下ctrl键时触发,为此我们使用condition,有关条件及其可能性的更多信息,您可以转到{{3} }:

map.addInteraction(new ol.interaction.DragPan({
  condition: function(event) {
    return event.originalEvent.ctrlKey
  }
}));

修改

这只是一个概念验证,并没有完全奏效,因为它在最初开始拖动时会卡入错误的位置。不幸的是,我现在没有时间去解决所有问题,但它可能仍然可以帮助你开始。这是小提琴:OpenLayers APIdocs 基本上我每次移动光标时使用pointermove事件来重新定位地图,同时按住ctrl键:

map.on('pointermove', function(event){
    if(event.originalEvent.ctrlKey){
    var pixelCenter = [map.coordinateToPixelTransform_[4], 
        map.coordinateToPixelTransform_[5]];
    var movedPixels = [pixelCenter[0]-event.pixel[0],
        pixelCenter[1]-event.pixel[1]];
    map.getView().setCenter(map.getCoordinateFromPixel(movedPixels));
  }
});