【OpenLayers】Select Interaction 手动添加选择的要素

 

追踪选中要素时的调用堆栈可知

./node_modules/_ol@6.3.1@ol/interaction/Select.js.Select.applySelectedStyle_	@	Select.js:353
./node_modules/_ol@6.3.1@ol/interaction/Select.js.Select.addFeature_	@	Select.js:329
./node_modules/_ol@6.3.1@ol/events/Target.js.Target.dispatchEvent	@	Target.js:115
./node_modules/_ol@6.3.1@ol/Collection.js.Collection.insertAt	@	Collection.js:180
./node_modules/_ol@6.3.1@ol/Collection.js.Collection.push	@	Collection.js:202
./node_modules/_ol@6.3.1@ol/Collection.js.Collection.extend	@	Collection.js:122
handleEvent	@	Select.js:438
./node_modules/_ol@6.3.1@ol/PluggableMap.js.PluggableMap.handleMapBrowserEvent	@	PluggableMap.js:846
./node_modules/_ol@6.3.1@ol/events/Target.js.Target.dispatchEvent	@	Target.js:115
(anonymous)	@	MapBrowserEventHandler.js:121
setTimeout (async)
./node_modules/_ol@6.3.1@ol/MapBrowserEventHandler.js.MapBrowserEventHandler.emulateClick_	@	MapBrowserEventHandler.js:118
./node_modules/_ol@6.3.1@ol/MapBrowserEventHandler.js.MapBrowserEventHandler.handlePointerUp_	@	MapBrowserEventHandler.js:159

Select.js:438行 handleEvent 方法源码如下:

function handleEvent(mapBrowserEvent) {
  if (!this.condition_(mapBrowserEvent)) {
    return true;
  }
  const add = this.addCondition_(mapBrowserEvent);
  const remove = this.removeCondition_(mapBrowserEvent);
  const toggle = this.toggleCondition_(mapBrowserEvent);
  const set = !add && !remove && !toggle;
  const map = mapBrowserEvent.map;
  const features = this.getFeatures();
  const deselected = [];
  const selected = [];
  if (set) {
    // Replace the currently selected feature(s) with the feature(s) at the
    // pixel, or clear the selected feature(s) if there is no feature at
    // the pixel.
    clear(this.featureLayerAssociation_);
    map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
      (
        /**
         * @param {import("../Feature.js").FeatureLike} feature Feature.
         * @param {import("../layer/Layer.js").default} layer Layer.
         * @return {boolean|undefined} Continue to iterate over the features.
         */
        function(feature, layer) {
          if (this.filter_(feature, layer)) {
            selected.push(feature);
            this.addFeatureLayerAssociation_(feature, layer);
            return !this.multi_;
          }
        }).bind(this), {
        layerFilter: this.layerFilter_,
        hitTolerance: this.hitTolerance_
      });
    for (let i = features.getLength() - 1; i >= 0; --i) {
      const feature = features.item(i);
      const index = selected.indexOf(feature);
      if (index > -1) {
        // feature is already selected
        selected.splice(index, 1);
      } else {
        features.remove(feature);
        deselected.push(feature);
      }
    }
    if (selected.length !== 0) {
      features.extend(selected);
    }
  } else {
    // Modify the currently selected feature(s).
    map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
      (
        /**
         * @param {import("../Feature.js").FeatureLike} feature Feature.
         * @param {import("../layer/Layer.js").default} layer Layer.
         * @return {boolean|undefined} Continue to iterate over the features.
         */
        function(feature, layer) {
          if (this.filter_(feature, layer)) {
            if ((add || toggle) && !includes(features.getArray(), feature)) {
              selected.push(feature);
              this.addFeatureLayerAssociation_(feature, layer);
            } else if ((remove || toggle) && includes(features.getArray(), feature)) {
              deselected.push(feature);
              this.removeFeatureLayerAssociation_(feature);
            }
            return !this.multi_;
          }
        }).bind(this), {
        layerFilter: this.layerFilter_,
        hitTolerance: this.hitTolerance_
      });
    for (let j = deselected.length - 1; j >= 0; --j) {
      features.remove(deselected[j]);
    }
    features.extend(selected);
  }
  if (selected.length > 0 || deselected.length > 0) {
    this.dispatchEvent(
      new SelectEvent(SelectEventType.SELECT,
        selected, deselected, mapBrowserEvent));
  }
  return true;
}

阅读源码可知

select.getFeatures() 是一个 ol/Collection

拥有会触发事件绑定的以下方法:

1: "clear"

2: "extend"

3: "forEach"

4: "getArray"

5: "item"

6: "getLength"

7: "insertAt"

8: "pop"

9: "push"

10: "remove"

11: "removeAt"

12: "setAt"

13: "updateLength_"

14: "assertUnique_"

手动添加:

 所以,OpenLayers如何实现手动添加选择的要素:

var select = new Select({layers: [layer]});
select.getFeatures().clear(); //因为我的需求是单选,所以先清除所有选择
select.getFeatures().push(fea);//将要选择的要素push进去

select.dispatchEvent({type: "select",selected: [fea]})//以上并不会触发'select'事件,所以需要手动触发一下