admin管理员组文章数量:1589749
追踪选中要素时的调用堆栈可知
./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'事件,所以需要手动触发一下
本文标签: 要素OpenLayersselectInteraction
版权声明:本文标题:【OpenLayers】Select Interaction 手动添加选择的要素 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728076365a1144527.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论