How to change selected feature
mrAbra opened this issue · comments
thats my map
<ol-map style="height: 400px">
<ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection"
@change:center="centerChanged" @change:resolution="resolutionChanged" @change:rotation="rotationChanged" />
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
<ol-interaction-select @select="featureSelected" :pointRadius="20">
</ol-interaction-select>
<ol-animated-clusterlayer :animationDuration="500" :distance="40" ref="customInteraction">
<ol-source-vector :features="geoJsonFeatures" :format="geoJson">
</ol-source-vector>
</ol-animated-clusterlayer >
</ol-map>
thats my table for showing features.
<el-table :data="geoJsonFeatures" highlight-current-row
@current-change="handleCurrentChange" style="width: 100%" :row-class-name="setDeviceStatusInTable">
<el-table-column type="expand">
....
async function handleCurrentChange(val) {
if (val == null) {
return;
}
selectedFeature.value = val;
}
I dont understand how to change selected feature from handleCurrentChange.
I will be glad to any advice
selectedFeature.value im using this for another element but wiil be realy cool if i can do smth like this mapreference.interactionSelect.removeSelectedFeature():
mapreference.interactionSelect.addSelectedFeature(selectedFeature.value );
Please take the time and provide a formatted code example which makes it easy to follow and investigate.
<ol-interaction-select @select="featureSelected" :pointRadius="20" ref="customInteraction">
<!-- style of the marked selected from the cluster items after first click on the cluster itself -->
<ol-style>
<ol-style-circle :radius="20">
<ol-style-fill color="#ff0000"></ol-style-fill>
</ol-style-circle>
</ol-style>
</ol-interaction-select>
<ol-animated-clusterlayer :animationDuration="500" :distance="40" ref="clusterLayer">
<ol-source-vector :features="geoJsonFeatures" :format="geoJson" ref="vectorLayer">
</ol-source-vector>
</ol-animated-clusterlayer>
....
<el-table ref="tableRef" :data="geoJsonFeatures" highlight-current-row @current-change="handleCurrentChange" style="width: 100%"
:row-class-name="setDeviceStatusInTable">
....
const providerFeatureCollection = {
type: "FeatureCollection",
features: newFeatures,
};
geoJsonFeatures.value = geoJson.readFeatures(providerFeatureCollection);
...
async function handleCurrentChange(val) {
if (val == null) {
return;
}
selectedFeature.value = val;
const selectedStyle = new Style({
image: new Icon({
src: workerIcon,
anchor: [0.5, 1],
width: 30,
height: 30
})
});
customInteraction.value.select.getFeatures().clear()
customInteraction.value.select.getFeatures().push(vectorLayer.value.layer.features.find((f) => {
return f.getProperties().features[0].values_.devaddr === val.values_.devaddr;
}));
customInteraction.value.select.getFeatures().forEach(function (feature) {
feature.setStyle(selectedStyle);
})
}
working for me, May be someone can find better solution with easier properties access. For me was not obvious that geoJsonFeatures not equal select event collection elements