Openlays6z-特性级别的索引

Question

在Open层6中，是否可以将z-索引设置在特性级别而不是层级别，以获得如下结果：

给定三层：

绿色恒星的蓝色triangles

• Layer的

1. 层

​

​

其想法是能够垂直叠加来自不同层的混合功能。谢谢

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>

​

如果您切换features.setStyle(style100)；features1.setStyle(style1)；改为Feureres1.setStyle(Style100)；features.setStyle(style1)；

特性的zIndex将发生变化，但不能在层间更改为zIndex。来自具有较高zIndex的层的特性总是在zIndex较小的层的特性之上。