每当用户与地图交互时如何执行一些代码?
How to execute some code whenever the user interacts with the map?
我有一张 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 会发生某种事件,因此当用户启动 dragging/rotating/zooming 地图时,会触发一个事件并且我的代码会 运行。我找不到这样的活动。
作为解决方法,我可以将事件附加到视图中的更改:
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,则此方法会中断(并且动画结束时没有回调或事件)。
根据您的项目,您可能想尝试此解决方案或 。
另一种方法可能是监听地图上发生的 pointerdown
和 pointerup
事件,并在向下运行时禁用自动居中功能。
map.on('pointerdown', function() {
auto_center = false;
}, this);
map.on('pointerup', function() {
auto_center = true;
}, this);
此方法可能需要更多工作,但这将是一个开始。想法?
此处,用户正在拖动:
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);
});
我有一张 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 会发生某种事件,因此当用户启动 dragging/rotating/zooming 地图时,会触发一个事件并且我的代码会 运行。我找不到这样的活动。
作为解决方法,我可以将事件附加到视图中的更改:
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,则此方法会中断(并且动画结束时没有回调或事件)。
根据您的项目,您可能想尝试此解决方案或
另一种方法可能是监听地图上发生的 pointerdown
和 pointerup
事件,并在向下运行时禁用自动居中功能。
map.on('pointerdown', function() {
auto_center = false;
}, this);
map.on('pointerup', function() {
auto_center = true;
}, this);
此方法可能需要更多工作,但这将是一个开始。想法?
此处,用户正在拖动:
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);
});