特征级别的 Openlayers 6 z-index

Question

在 Openlayers 6 中，是否可以在要素级别而不是图层级别设置 z-index 以获得如下结果：

给定 3 层：

红色三角形层

蓝色矩形层

绿色星星层

我们的想法是能够垂直堆叠来自不同层的混合特征。谢谢

Answer 1

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>

如果你切换特征[0].setStyle(style100); 特征 [1].setStyle(style1); 到特征[1].setStyle(style100); 特征[0].setStyle(style1);

特征的 zIndex 会改变但你不能在层与层之间更改为 zIndex。来自具有较高 zIndex 的层的特征将始终位于来自具有较小 zIndex

的层的特征之上

特征级别的 Openlayers 6 z-index

Openlayers 6 z-index at feature level

openlayers

openlayers-6