3

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);
2

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.