gpt4 book ai didi

javascript - OpenLayers 中的 Debounce 特征选择

转载 作者:行者123 更新时间:2023-11-30 09:52:50 26 4
gpt4 key购买 nike

我正在处理一张使用大量矢量特征的 map 。在某些浏览器中,当 OpenLayers 处理 pointermove 事件交互时会有明显的滞后。例如:

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

在处理连续输入(例如处理滚动事件)并需要大量处理的其他情况下,我通常会 debounce事件的处理程序——这样重要的工作只在输入暂停时完成(在这种情况下,确定相交的特征)。 有没有办法在不绕过 OpenLayers 交互处理的情况下,在浏览器事件调度和 OpenLayers 检查交叉点之间插入去抖?

我试过直接处理 pointermove/mousemove 事件,消除它们的抖动(重新分配手动创建的 synthetic 事件),然后使用交互条件仅处理合成事件。除了 Internet Explorer 的合成事件未被 OpenLayers 拾取外,这行得通。

我正在考虑规避 OpenLayers 交互 - 例如通过使用 forEachFeatureAtPixel并手动更新样式。

最佳答案

事实上,即使使用标准 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://openlayers.org/en/master/examples/custom-interactions.html

以及 ol.interaction.Select.handleEvent 的文档

关于javascript - OpenLayers 中的 Debounce 特征选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35488145/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com