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);
أكثر...
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);
أكثر...