I have multiple vector layers which is constructed of 3 parts: start point, line, end point. Each of those features has its own style. start point is a green circle, line is grey and end point is a red circle.
I also enabled selection and it is working, but how do I programmatically select the 2 other features when selecting one of the parts?
My code is below:
var featureLine = new ol.Feature({
geometry: new ol.geom.LineString(points),
type: "line",
id: id1,
startdate: startdate1,
starttime: starttime1,
enddate: enddate1,
endtime: endtime1,
soaktime: soaktime1,
haulnumber: haulnumber1,
area: area1,
startlat: startlat1,
startlon: startlon1,
endlat: endlat1,
endlon: endlon1
});
var featureStart = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([startlon1, startlat1], 'EPSG:4326', 'EPSG:3857')),
type: "start",
id: id1,
startdate: startdate1,
starttime: starttime1,
enddate: enddate1,
endtime: endtime1,
soaktime: soaktime1,
haulnumber: haulnumber1,
area: area1,
startlat: startlat1,
startlon: startlon1,
endlat: endlat1,
endlon: endlon1
});
var featureEnd = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([endlon1, endlat1], 'EPSG:4326', 'EPSG:3857')),
type: "end",
id: id1,
startdate: startdate1,
starttime: starttime1,
enddate: enddate1,
endtime: endtime1,
soaktime: soaktime1,
haulnumber: haulnumber1,
area: area1,
startlat: startlat1,
startlon: startlon1,
endlat: endlat1,
endlon: endlon1
});
var vectorSource = new ol.source.Vector({
projection: 'EPSG:4326',
features: [featureStart, featureEnd, featureLine]
});
var styleStart = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#32CD32'
})
})
})
];
var styleLine = [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)',
weight: 4
}),
stroke: new ol.style.Stroke({
color: '#808080',
width: 4
})
})
];
var styleEnd = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#FF4500',
opacity: 0.8
})
})
})
];
var styles = [styleStart, styleLine, styleEnd];
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: function (feature, resolution) {
if (feature.get('type') === "line") {
return styleLine;
}
if (feature.get('type') === "start") {
return styleStart;
}
if (feature.get('type') === "end") {
return styleEnd;
}
return styles;
}
});
map.addLayer(vectorLayer);
And my select event on initialization is as follows:
var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click
});
map.addInteraction(selectClick);
Best Answer
Use a modification of this:
http://jsfiddle.net/jonataswalker/fm0ysb21/