Question

我想要3条不同颜色的线条，并且能够决定哪条线应该在顶部。使用ol.new.multiLineString时，我无法弄清楚如何在折线上使用不同的颜色。现在我为每条折线使用不同的图层，以便我可以决定在顶部显示哪一个并以不同方式设置它们。

这是一个很好的解决方案吗？有没有更有效的方法来做到这一点？

这是我的解决方案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);

}）（）;

Answer 1

您可以为功能添加样式。

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

对于具有样式的要素，将忽略向量图层中设置的样式。

使用不同颜色设置multiLineString的样式

1 个答案: