如何在OpenLayers 3中更改一个矢量图层中的每个特征样式

时间:2015-05-26 12:15:36

标签: openlayers-3

我正在尝试将具有不同样式的要素添加到矢量图层。我有一个多行,我希望每个都有不同的样式,但看起来我为每个功能设置的样式不受影响。在其他示例中,我看到他们必须为每个样式都有一个独特的层。

是否可以为每个功能添加独特的样式?

2 个答案:

答案 0 :(得分:2)

是的,你可以使用类似的东西:

feature.setStyle(style1);
sourceFeatures.addFeature(feature);

这是an example

答案 1 :(得分:0)

好的,我找到了一种方法来做这件事并且做了一个小提琴以防其他人想要这样做:

Multiple path vector layer

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