Javascript OpenLayers中的去噪特征选择

我正在使用一个使用大量矢量特征的地图。在某些浏览器中，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);
}

在处理连续输入（例如，处理滚动事件）并需要进行重要处理的其他情况下，我通常会选择事件的处理程序，以便只有在输入暂停时（在本例中，确定相交特征）才能完成重要的工作是否有一种方法可以在浏览器事件调度和OpenLayers检查交叉点之间插入一个去抖动，而不绕过OpenLayers交互处理？

我尝试过直接处理pointermove/mousemove事件，对它们进行去抖动（重新修补手动创建的事件），然后使用交互条件仅处理合成事件。除了OpenLayers没有获取InternetExplorer的合成事件外，这是有效的

---

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

事实上，即使使用标准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);

有关如何编写自定义交互的示例，请参见：

---

以及

的文档事实上，即使使用标准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);

有关如何编写自定义交互的示例，请参见：

---

和

Nice的文档！我没有意识到即使当

条件返回
false
时，
handleEvent
也会触发。是的，检查是在内部完成的。很好！我没有意识到即使
条件
返回
false
时，
handleEvent
也会触发。是的，检查是在内部完成的。