Question

我有一张OpenLayers 3.9.0地图。我还有一对LonLat坐标，我从外部源跟踪并更新到地图上。我不断在这些坐标上重新定位地图：

function gets_called_when_I_have_updated_coords() {
    map.getView.setCenter(coords);
}

我想要的是每当用户与地图交互时禁用此自动居中。换句话说，我想要这个：

var auto_center = true;

function gets_called_when_I_have_updated_coords() {
    if (auto_center) {
        map.getView.setCenter(coords);
    }
}

function user_started_interacting() {
    auto_center = false;
}
// But where should this function be attached to?
// where.on('what?', user_started_interacting);

我不知道如何检测用户互动。

我预计the default interactions会发生某种事件，因此当用户开始拖动/旋转/缩放地图时，会触发一个事件并运行我的代码。我找不到这样的事件。

Answer 1

此处，用户正在拖动：

map.on('pointermove', function(evt){
    if(evt.dragging){
        //user interacting
        console.info('dragging');
    }
});

此处，用户正在更改分辨率：

map.getView().on('change:resolution', function(evt){
    console.info(evt);
});

<强>更新

检测键盘交互的一些选项：

//unofficial && undocumented
map.on('key', function(evt){
    console.info(evt);
    console.info(evt.originalEvent.keyIdentifier);
});
//DOM listener
map.getTargetElement().addEventListener('keydown', function(evt){
    console.info(evt);
    console.info(evt.keyIdentifier);
});

A fiddle to test

Answer 2

作为一种解决方法，我可以将事件附加到视图中的更改：

map.getView().on('change:center', function(ev){…});

但我必须采取额外措施来区分代码启动的更改和用户启动的更改。完整的代码看起来像这样：

var auto_center = true;
var ignore_change_events = false;

function gets_called_when_I_have_updated_coords() {
    if (auto_center) {
        ignore_change_events = true;
        map.getView.setCenter(coords);
        ignore_change_events = false;
    }
}

map.getView().on('change:center', function() {
    if (ignore_change_events) {
        return;
    }
    auto_center = false;
});

请注意，如果使用any animation，此方法会中断（并且动画结束时没有回调或事件）。

根据您的项目，您可能需要尝试此解决方案或Jonatas Walker's solution。

Answer 3

另一种方法可能是收听地图上发生的pointerdown和pointerup事件，并在停止运行时停用自动中心功能。

map.on('pointerdown', function() {
  auto_center = false;
}, this);

map.on('pointerup', function() {
  auto_center = true;
}, this);

这种方法可能需要更多工作，但这将是一个开始。想法？

如何在用户与地图交互时执行某些代码？

3 个答案: