[GIS] OpenLayers 3 – Multi feature vector layer – how to select all features

openlayersvector-layer

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:

var collection = selectClick.getFeatures();

selectClick.on('select', function(evt){
    var selected = evt.selected;

    if(evt.selected[0] === feature1){
        collection.push(feature2);
    } else if(evt.selected[0] === feature2) {
        collection.push(feature1);
    }

});

http://jsfiddle.net/jonataswalker/fm0ysb21/

Related Question