Openlayers 3 使用不同颜色设置多行线的样式

我想3线不同的颜色，并能够决定哪一行应该在顶部。 在使用ol.new.multiLineString时，我不知道如何在多段线上使用不同的颜色。 现在，我为每条多段线使用不同的图层，这样我就可以决定在顶部显示哪个图层，并对它们进行不同的样式设置

这是一个好的解决方案吗？ 有没有更有效的方法

这是我的解决方案

---

})

您可以为特征指定样式

变量特性1=新的ol.特性 新的ol.geom.MultileString[[-1，-1]，[1，-1]，[-1,1]，[1,1]]； 特点1.setStyle 新ol风格{ 笔划：新的ol风格{ 颜色：[0,0,0,255]， 宽度：2 } } ; 变量特性2=新的ol.特性 新的ol.geom.MultileString[[-1，-1]，[1,1]]，[[1，-1]，[1,1]]； 特征2.setStyle 新ol风格{ 笔划：新的ol风格{ 颜色：[255,255,255,255]， 宽度：2 } } ;

---

对于具有样式的特征，向量层中设置的样式将被忽略。

如果我理解正确，您在这里会问两个问题：1。如何控制要素在和2中的渲染顺序。如何单独设置多重导线的构件样式。对吗？对。我一直在试验erilem的一些建议，为每个未来添加样式。要控制功能渲染的顺序，请使用zIndex style属性。看。要在功能中添加样式帮助很大，而且我认为效果很好，我现在不必将所有内容都放在单独的层中。你必须使用“stroke:ol.style.stroke…”而不是ol.style.style。

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