我可以在 Openlayers3 中使用 ctrl 拖动地图吗? [英] Can I drag the map with ctrl in Openlayers3?

问题描述

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

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. Is possibile?

推荐答案

确实有一种方法可以在按住 ctrl 键的同时只允许平移.可以在此小提琴中找到一个完整的示例:https://jsfiddle.net/mnpq3ufe/

There is indeed a way to only allow panning while holding ctrl-key. A fully working example can be found in this fiddle: https://jsfiddle.net/mnpq3ufe/

要使其工作，您必须在地图初始化中禁用现有的 dragPan 交互，以便稍后覆盖/重新添加它:

For it to work, you have to disable the existing dragPan interaction in your map init to override/re-add it later on:

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

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

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:

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

<小时>

这只是一个概念验证，还没有完全起作用，因为它在最初开始拖动时卡入了错误的位置.不幸的是，我目前没有时间弄清楚所有事情，但它可能仍然可以帮助您入门.这是小提琴:https://jsfiddle.net/mnpq3ufe/5/基本上，每次按住 ctrl 键移动光标时，我都会使用 pointermove 事件来重新定位地图:

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:

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

这篇关于我可以在 Openlayers3 中使用 ctrl 拖动地图吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！