简体   繁体   English

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

[英]Can I drag the map with ctrl in Openlayers3?

Exist a way to drag the map when I hold down the Ctrl (control) key? 当我按住Ctrl(控制键)时,是否存在一种拖动地图的方法?

Normally to drag the map is necessary just hold the left mouse button and move on the map, but I need to drag the map without hold the left mouse button but with the ctrl button. 通常,只需按住鼠标左键并在地图上移动即可拖动地图,但是我需要不按住鼠标左键但使用ctrl按钮来拖动地图。 Is possibile? 有可能吗?

There is indeed a way to only allow panning while holding ctrl-key. 实际上,有一种方法仅在按住ctrl键的同时允许平移。 A fully working example can be found in this fiddle: https://jsfiddle.net/mnpq3ufe/ 可以在此小提琴中找到一个完整的示例: https : //jsfiddle.net/mnpq3ufe/

For it to work, you have to disable the existing dragPan interaction in your map init to override/re-add it later on: 为了使其正常工作,您必须在地图初始化中禁用现有的dragPan交互,以便稍后覆盖/重新添加它:

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

After that you can create your new customised interaction, which just triggers while ctrl key is pressed, for this we use condition , for more information about conditions and its possibilities you can head over to the OpenLayers APIdocs : 之后,您可以创建新的自定义交互,该交互仅在按下ctrl键时触发,为此,我们使用condition ,有关条件及其可能性的更多信息,您可以转到OpenLayers APIdocs

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

EDIT: 编辑:

This is just a proof of concept yet and is not fully working, since it snaps into the wrong place when initially starting the drag. 这只是一个概念证明,还不能完全发挥作用,因为它在最初开始拖动时会卡在错误的位置。 Unfortunately I have no time currently to figure everything out right now, but it could probably still help you to get started. 不幸的是,我目前没有时间解决所有问题,但是它可能仍然可以帮助您入门。 Here is the fiddle: https://jsfiddle.net/mnpq3ufe/5/ Basically I am using the pointermove event to recenter the map each time the cursor is moved while holding the ctrl-key: 这是小提琴: https : pointermove基本上,每次按住ctrl键移动光标时,我都会使用pointermove事件来重新映射地图:

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));
  }
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM