own style for each WKT

Question

I have this code and it works fine:

<script>
  var raster = new ol.layer.Tile({source: new ol.source.OSM()});

  var wkt = 'LINESTRING (30 10, 10 30, 40 40)';
  var wkt2 = 'LINESTRING (0 0, 5 5, 10 10, 8.646 50.4654)';

  var format = new ol.format.WKT();

  var feature = format.readFeature(wkt, {dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'});
  var feature2 = format.readFeature(wkt2, {dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'});

  var vector = new ol.layer.Vector({source: new ol.source.Vector({features: [feature]})});
  var vector2 = new ol.layer.Vector({source: new ol.source.Vector({features: [feature2]})});

  var map = new ol.Map({
    layers: [raster, vector, vector2],
    target: 'map',
    view: new ol.View({
      center: [2952104.0199, -3277504.823],
      zoom: 4
    })
  });
</script>

Is there a simple way to define an own style (e.g. color, thickness) for each wtk (in code wkt and wkt2)?

Answer 1

I add a new Style:

var myStyle = new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(0, 255, 100, 0.3)'}),stroke: new ol.style.Stroke({color: 'rgba(255, 80, 80, 0.9)' ,width: 2})});

And add this in die Vector:

var vector = new ol.layer.Vector({style: myStyle, source: new ol.source.Vector({features: [feature]})});

Answer 2

You have a couple options. You can call setStyle on each feature or you can create a style function for each layer. This is the gist of it but probably will not work as-is:

let style = new ol.style.Style({stroke: new ol.style.Stroke({color: "#fff"})});

feature.setStyle(style);

or

layer = new ol.layer.Vector({style: (feature, resolution) => style, ...});