Search code examples
openlayersopenlayers-6

Openlayers 6 z-index at feature level

In Openlayers 6, is it possible to set z-index at the feature level instead of the layer level to get a result like this:

Given 3 layers:

  1. Layer of red triangles
  2. Layer of blue rectangles
  3. Layer of green stars

enter image description here

The idea is to be able to stack vertically a mixed of features coming from different layers. Thanks

Solution 

  • function styleFunction(featuretype){
     var style;
     style= new ol.style.Style({
         stroke: new ol.style.Stroke({
             color: "rgba(255,255,0,1)",
             width: 8,
         }),
         fill : new ol.style.Fill({
             color: "rgba(255,0,0,1)",
         })
     });
     return style;
 }

var style100 = new ol.style.Style({
         stroke: new ol.style.Stroke({
             color: "rgba(255,255,0,1)",
             width: 8,
         }),
         fill : new ol.style.Fill({
             color: "rgba(255,0,0,1)",
         }),
         zIndex:100
     });

var style1 = new ol.style.Style({
         stroke: new ol.style.Stroke({
             color: "rgba(255,255,0,1)",
             width: 8,
         }),
         fill : new ol.style.Fill({
             color: "rgba(255,0,0,1)",
         }),
         zIndex:1
     });

var vectorS = new ol.source.Vector({});

var thing = new ol.geom.Polygon( [[
    ol.proj.transform([-16,-22], 'EPSG:4326', 'EPSG:3857'),
    ol.proj.transform([-44,-55], 'EPSG:4326', 'EPSG:3857'),
    ol.proj.transform([-88,75], 'EPSG:4326', 'EPSG:3857')
]]);
var featurething = new ol.Feature({
    name: "Thing",
    geometry: thing
});


var thing2 = new ol.geom.Polygon( [[
    ol.proj.transform([-10,-15], 'EPSG:4326', 'EPSG:3857'),
    ol.proj.transform([-60,-70], 'EPSG:4326', 'EPSG:3857'),
    ol.proj.transform([-87,74], 'EPSG:4326', 'EPSG:3857')
]]);
var featurething2 = new ol.Feature({
    name: "Thing2",
    geometry: thing2
});

vectorS.addFeature( featurething );
vectorS.addFeature( featurething2 );

var vectorL = new ol.layer.Vector({
  source: vectorS,
  style : styleFunction("test")
});

var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          vectorL
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([-16, -22]),
          zoom: 2
        })
      });
 var source = vectorL.getSource();
 var features = source.getFeatures();
 
features[0].setStyle(style100);
features[1].setStyle(style1);
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
  </body>
</html>

    if you switch features[0].setStyle(style100); features[1].setStyle(style1); to features[1].setStyle(style100); features[0].setStyle(style1);

    the zIndex of the features will change but you can not change to zIndex between layers. features from a layer with a higher zIndex will always on top of features from a layer with a smaller zIndex