Openlayers 3:如何使用 ol.interaction.Select 以编程方式 select 功能?
Openlayers 3: how to select a feature programmatically using ol.interaction.Select?
我正在使用 OpenLayers v3.6(这很重要,因为我找到的大多数解决方案都可能适用于 OpenLayers 2)。
我有一个 table,当我 select 中的一行 table 时,我想 highlight/select OpenLayers 地图上的相应功能。所有特征都是简单的多边形(ol.geom.Polygon)在同一个向量层(ol.layer.Vector)。
我这样设置 select 互动:
// there is a lot of other code here
...
addSelectListener: function() {
this.SelectInteraction = new ol.interaction.Select({
condition: ol.events.condition.singleClick,
layers: function (layer) {
// defines layer from which features are selectable
return layer.get('id') == 'polygons_layer';
},
style: this.Style.Selected
});
// Map = ol.Map
Map.addInteraction(this.SelectInteraction);
this.SelectInteraction.on('select', this.selectPolygon, this);
}
...
selectPolygon: function(event) {
var selectSrc = this.getSelectInfo(event);
// some code that relies on selectSrc data
}
...
getSelectInfo: function (event) {
var selectSrc = {
deselected: null,
selected: null,
type: null
};
if (event.selected.length == 0 && event.deselected.length == 1) {
// click outside of polygon with previously selected
selectSrc.type = 'deselect';
selectSrc.deselected = {
feature: event.deselected[0],
id: event.deselected[0].getId()
};
} else if (event.deselected.length == 0 && event.selected.length == 1) {
// click on polygon without previously selected
selectSrc.type = 'select';
selectSrc.selected = {
feature: event.selected[0],
id: event.selected[0].getId()
}
} else if (event.deselected.length == 0 && event.selected.length == 1) {
// click on polygon with previously selected
selectSrc.type = 'switch';
selectSrc.deselected = {
feature: event.deselected[0],
id: event.deselected[0].getId()
};
selectSrc.selected = {
feature: event.selected[0],
id: event.selected[0].getId()
}
} else {
selectSrc.type = 'out';
}
return selectSrc;
}
当我想通过在地图上单击多边形 select 时,这个功能很好。但我想要的是实现相同的目标,不是通过单击地图而是单击地图外的某个元素(在我的示例中为 table 行,但它实际上可以是任何东西)。
我想使用 select 交互,因为发出的事件以及它应用于 selected 功能的样式。但是,如果有任何机会我可以在 select 交互中操纵 selected 功能而不需要相同的事件,那就没问题了。
我知道这个问题和答案 - Openlayers 3: Select a feature programmatically - 但问题是我不能在评论中要求澄清(例如,mySelectControl), 因为我没有任何声望:)
方法在linked题中。因此,将 ol.Feature
推入所选集合:
var select = new ol.interaction.Select({
//some options
});
map.addInteraction(select);
var selected_collection = select.getFeatures();
selected_collection.push(featurePoint);
如果要触发select
事件:
select.dispatchEvent('select');
// OR
select.dispatchEvent({
type: 'select',
selected: [featurePoly],
deselected: []
});
我正在使用 OpenLayers v3.6(这很重要,因为我找到的大多数解决方案都可能适用于 OpenLayers 2)。
我有一个 table,当我 select 中的一行 table 时,我想 highlight/select OpenLayers 地图上的相应功能。所有特征都是简单的多边形(ol.geom.Polygon)在同一个向量层(ol.layer.Vector)。
我这样设置 select 互动:
// there is a lot of other code here
...
addSelectListener: function() {
this.SelectInteraction = new ol.interaction.Select({
condition: ol.events.condition.singleClick,
layers: function (layer) {
// defines layer from which features are selectable
return layer.get('id') == 'polygons_layer';
},
style: this.Style.Selected
});
// Map = ol.Map
Map.addInteraction(this.SelectInteraction);
this.SelectInteraction.on('select', this.selectPolygon, this);
}
...
selectPolygon: function(event) {
var selectSrc = this.getSelectInfo(event);
// some code that relies on selectSrc data
}
...
getSelectInfo: function (event) {
var selectSrc = {
deselected: null,
selected: null,
type: null
};
if (event.selected.length == 0 && event.deselected.length == 1) {
// click outside of polygon with previously selected
selectSrc.type = 'deselect';
selectSrc.deselected = {
feature: event.deselected[0],
id: event.deselected[0].getId()
};
} else if (event.deselected.length == 0 && event.selected.length == 1) {
// click on polygon without previously selected
selectSrc.type = 'select';
selectSrc.selected = {
feature: event.selected[0],
id: event.selected[0].getId()
}
} else if (event.deselected.length == 0 && event.selected.length == 1) {
// click on polygon with previously selected
selectSrc.type = 'switch';
selectSrc.deselected = {
feature: event.deselected[0],
id: event.deselected[0].getId()
};
selectSrc.selected = {
feature: event.selected[0],
id: event.selected[0].getId()
}
} else {
selectSrc.type = 'out';
}
return selectSrc;
}
当我想通过在地图上单击多边形 select 时,这个功能很好。但我想要的是实现相同的目标,不是通过单击地图而是单击地图外的某个元素(在我的示例中为 table 行,但它实际上可以是任何东西)。
我想使用 select 交互,因为发出的事件以及它应用于 selected 功能的样式。但是,如果有任何机会我可以在 select 交互中操纵 selected 功能而不需要相同的事件,那就没问题了。
我知道这个问题和答案 - Openlayers 3: Select a feature programmatically - 但问题是我不能在评论中要求澄清(例如,mySelectControl), 因为我没有任何声望:)
方法在linked题中。因此,将 ol.Feature
推入所选集合:
var select = new ol.interaction.Select({
//some options
});
map.addInteraction(select);
var selected_collection = select.getFeatures();
selected_collection.push(featurePoint);
如果要触发select
事件:
select.dispatchEvent('select');
// OR
select.dispatchEvent({
type: 'select',
selected: [featurePoly],
deselected: []
});