我正在尝试将具有不同样式的要素添加到矢量图层。我有一个多行,我希望每个都有不同的样式,但看起来我为每个功能设置的样式不受影响。在其他示例中,我看到他们必须为每个样式都有一个独特的层。
是否可以为每个功能添加独特的样式?
答案 0 :(得分:2)
答案 1 :(得分:0)
好的,我找到了一种方法来做这件事并且做了一个小提琴以防其他人想要这样做:
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
style: 'Road',
source: new ol.source.MapQuest({layer: 'osm'})
})
],
view: new ol.View({
projection: 'EPSG:3857',
center: [-8908887.277395891, 5381918.072437216],
maxZoom: 19,
zoom: 2,
}),
});
var colorArr = ['blue','green','orange']
var featureCount = 100;
var features=[];
var feature, geometry;
var e = 25000000;
var points = [];
for (i = 0; i < featureCount; ++i) {
colorindex = Math.abs(parseInt((Math.random()*3).toFixed())-1);
if(i%10){
points.push([2 * e * Math.random() - e, 2 * e * Math.random() - e]);
continue;
}
feature = new ol.Feature({
geometry: new ol.geom.LineString(points, 'XY')
});
feature.setStyle(
new ol.style.Style({
fill: new ol.style.Fill({color: colorArr[colorindex],opacity: 0.7}),
stroke: new ol.style.Stroke({color: colorArr[colorindex], width: 4,opacity: 0.7
})
})
);
features.push(feature);
points = [];
}
var vectorSource = new ol.source.Vector({
features: features
});
var vector = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vector);