OpenLayers 中的 Debounce 特征选择

Question

我正在处理一张使用大量矢量特征的地图。在某些浏览器中，当 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 并手动更新样式。

Answer 1

事实上，即使使用标准 API，您也可以将 select 交互包装到自定义交互中，并 debounce 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

的文档

OpenLayers 中的 Debounce 特征选择

Debounce feature selection in OpenLayers

javascript

openlayers-3