CODEWITHSUNDEEP
openlayers-3
199user911
199user911

Reputation: 425

Styling multiLineString with different color

I want 3 lines with different colors and to be able to decide which line should be on top. I couldn't figure out how to have different colors on the polylines when using ol.new.multiLineString. Right now I use different layers for each polyline so that I can decide which one to show on top and style them differently.

Is this a good solution? Is there a more efficent way to do this?

This is my solution fiddle. 

(function () {

var p1 = [18, 59];
var p2 = [0, -10];
var p3 = [20, 20];
var p4 = [-10, -10];

var p5 = [-10, 0];
var p6 = [10, 0];
var p7 = [20, 0];
var p8 = [30, 0];

var p9 = [0, -10];
var p10 = [0, 40];
var p11 = [0, 45];
var p12 = [0, 50];

var array1 = [p2, p1, p3, p4]; //RED
var array2 = [p5, p6, p7, p8]; //GREEN
var array3 = [p9, p10, p11, p12]; //BLUE
var allarray = [array1, array2, array3];


var temp;
for (var i = 0; i < allarray.length; i++) { //transformation process
    temp = allarray[i];
    for (var x = 0; x < temp.length; x++) {
        temp[x] = ol.proj.transform(temp[x], 'EPSG:4326', 'EPSG:3857');
    }
}

var featureRed = new ol.Feature({
    geometry: new ol.geom.LineString(array1)
});
var featureGreen = new ol.Feature({
    geometry: new ol.geom.LineString(array2)
});
var featureBlue = new ol.Feature({
    geometry: new ol.geom.LineString(array3)
});


var vectorRedLine = new ol.source.Vector({});
var vectorGreenLine = new ol.source.Vector({});
var vectorBlueLine = new ol.source.Vector({});

//vectorSource.addFeature(feature);
vectorRedLine.addFeature(featureRed);
vectorGreenLine.addFeature(featureGreen);
vectorBlueLine.addFeature(featureBlue);

//add the feature vector to the layer vector, and apply a style to whole layer
var vectorRedLayer = new ol.layer.Vector({
    source: vectorRedLine,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#FF0000',
            width: 4
        }),
        fill: new ol.style.Fill({
            color: '#FF0000',
            weight: 1
        })
    })
});

var vectorGreenLayer = new ol.layer.Vector({
    source: vectorGreenLine,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: '#00FF00',
            weight: 10
        }),
        stroke: new ol.style.Stroke({
            color: '#00FF00',
            width: 4
        })
    })
});

var vectorBlueLayer = new ol.layer.Vector({
    source: vectorBlueLine,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: '#0000FF',
            weight: 10
        }),
        stroke: new ol.style.Stroke({
            color: '#0000FF',
            width: 4
        })
    })
});

var map = new ol.Map({
    layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
    target: document.getElementById('map'),
    view: new ol.View({
        center: [0, 0],
        zoom: 6,
        projection: 'EPSG:3857'
    })
});


map.addLayer(vectorRedLayer);
map.addLayer(vectorBlueLayer);
map.addLayer(vectorGreenLayer);

var layers = map.getLayers();
var topLayer = layers.removeAt(3);
layers.insertAt(1, topLayer);

})();

Upvotes: 2

Views: 6494

Answers (1)

erilem
erilem

Reputation: 2664

You can give a style to a feature.

var feature1 = new ol.Feature(
  new ol.geom.MultiLineString([[[-1, -1], [1, -1]], [[-1, 1], [1, 1]]]);
feature1.setStyle(
  new ol.style.Style({
    stroke: new ol.style.Style({
      color: [0, 0, 0, 255],
      width: 2
    })
  })
);

var feature2 = new ol.Feature(
  new ol.geom.MultiLineString([[[-1, -1], [-1, 1]], [[1, -1], [1, 1]]]);
feature2.setStyle(
  new ol.style.Style({
    stroke: new ol.style.Style({
      color: [255, 255, 255, 255],
      width: 2
    })
  })
);

For features that have a style the style set in the vector layer is ignored.

Upvotes: 4

Related Questions