[英]Debounce feature selection in OpenLayers
I am working with a map that uses a large set of vector features. 我正在使用使用大量矢量特征的地图。 In some browsers, there is significant lag when the OpenLayers is handling
pointermove
events interactions. 在某些浏览器中,OpenLayers处理
pointermove
事件交互时会存在很大的滞后。 For example: 例如:
function selectOnHover(map, handler, styleFn) {
var selectMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove,
style: styleFn
});
map.addInteraction(selectMove);
selectMove.on('select', handler);
}
In other situations that handle continuous input (eg handling scroll events) and require significant processing, I would normally debounce the handler for the event - so that significant work is only done when the input has paused (in this case, determining the intersecting features). 在处理连续输入(例如,处理滚动事件)并需要大量处理的其他情况下,我通常会对事件的处理程序进行反跳处理,以便仅在输入暂停时才进行大量工作(在这种情况下,确定相交特征) 。 Is there a way to insert a debounce between browser event dispatch and OpenLayers checking intersections without circumventing OpenLayers interaction handling?
有没有一种方法可以在浏览器事件分发和OpenLayers检查交叉点之间插入反跳,而又不会避开OpenLayers交互处理?
I've tried handling the pointermove/mousemove events directly, debouncing them (redispatching manually created synthetic events) and then using the interaction's condition to handle only the synthetic ones. 我试过直接处理pointermove / mousemove事件,将它们反跳(重新调度手动创建的合成事件),然后使用交互条件仅处理合成事件。 This worked except that Internet Explorer's synthetic events weren't picked up by OpenLayers.
除OpenLayers不会接收Internet Explorer的综合事件外,此方法行之有效。
I'm considering circumventing OpenLayers interaction - for example by using forEachFeatureAtPixel and manually updating the style. 我正在考虑规避OpenLayers交互-例如通过使用forEachFeatureAtPixel并手动更新样式。
In fact, even using the standard API you can wrap a select interaction into a custom interaction and debounce the handleEvent
function: 实际上,即使使用标准API,您也可以将选择交互包装到自定义交互中,然后对
handleEvent
函数进行反抖动处理:
var app = {};
app.DebounceSelect = function() {
this.selectInteraction = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
var handleEventDebounce = debounce(function(evt) {
return ol.interaction.Select.handleEvent.call(this.selectInteraction, evt);
}.bind(this), 100);
ol.interaction.Interaction.call(this, {
handleEvent: function(evt) {
handleEventDebounce(evt);
// always return true so that other interactions can
// also process the event
return true;
}
});
};
ol.inherits(app.DebounceSelect, ol.interaction.Interaction);
app.DebounceSelect.prototype.setMap = function(map) {
this.selectInteraction.setMap(map);
};
var select = new app.DebounceSelect();
map.addInteraction(select);
http://jsfiddle.net/n9nbrye8/3/ http://jsfiddle.net/n9nbrye8/3/
For reference an example on how to write custom interactions: http://openlayers.org/en/master/examples/custom-interactions.html 作为参考,有关如何编写自定义交互的示例: http : //openlayers.org/en/master/examples/custom-interactions.html
And the documentation for ol.interaction.Select.handleEvent 以及ol.interaction.Select.handleEvent的文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.