OpenLayers 4.6.5 z-index异常求助：zIndex16被-1层级覆盖

你遇到的这个问题，核心在于OpenLayers的图层绘制优先级高于单个要素的zIndex：

• 要素的zIndex只在同一个图层内部的要素之间生效，用来控制同图层内要素的叠加顺序；
• 跨图层的情况下，图层在地图图层栈中的顺序（或图层自身的zIndex）才是决定叠加顺序的关键——后添加的图层会绘制在先添加的图层之上，或者图层zIndex值更高的会在上面，完全忽略不同图层内要素的zIndex设置。

看你的代码，你先把panoramasTracksLayer添加到了地图，之后才将点要素添加到某个source中。如果这个source对应的图层是在panoramasTracksLayer之前添加的，那么panoramasTracksLayer作为后加入的图层，自然会覆盖在点图层之上，哪怕你给点要素设了15、16的高zIndex也没用。

针对这个问题，有几种可行的解决办法，你可以根据自己的业务场景选择：

1. 调整图层添加顺序 #

把点要素所在的图层晚于panoramasTracksLayer添加到地图中：

// 先添加轨迹图层
map.addLayer(this.panoramasTracksLayer);
// 再添加点要素所在的图层（假设你的点图层是pointLayer）
map.addLayer(pointLayer);

这样点图层会默认绘制在轨迹图层之上，无需额外设置图层zIndex，要素的zIndex也能在自身图层内正常生效。

2. 给图层设置zIndex属性 #

如果没办法调整添加顺序，可以直接给图层设置zIndex，强制指定图层的叠加顺序：

// 给轨迹图层设置较低的zIndex
this.panoramasTracksLayer = new ol.layer.Vector({
  source: geoVector,
  style: tilesStyle,
  zIndex: 5 // 设为较低值
});

// 给点要素所在的图层设置较高的zIndex
const pointLayer = new ol.layer.Vector({
  source: source,
  zIndex: 10 // 设为较高值
});

OpenLayers会优先根据图层的zIndex来排序，值越大的图层越靠上，这样不管添加顺序如何，点图层都会在轨迹图层上面。

3. 将要素合并到同一个图层 #

如果业务允许，可以把轨迹要素和点要素放到同一个矢量图层中，这样要素的zIndex就能直接控制它们的叠加顺序：

// 创建一个统一的矢量图层
const combinedLayer = new ol.layer.Vector({
  source: new ol.source.Vector()
});
map.addLayer(combinedLayer);

// 添加轨迹要素到统一图层
const geoVector = new ol.source.Vector({ features: new ol.format.GeoJSON().readFeatures(geoJSON) });
combinedLayer.getSource().addFeatures(geoVector.getFeatures());

// 给轨迹要素设置样式（zIndex: -1）
combinedLayer.getSource().getFeatures().forEach(feature => {
  feature.setStyle(tilesStyle);
});

// 添加点要素到统一图层（zIndex:15、16）
feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(point as any)));
feature.setStyle([
  new ol.style.Style({ zIndex: 15, image: new ol.style.Circle({ radius: 20, stroke: new ol.style.Stroke({ color: "#fff", width: 2 }), fill: new ol.style.Fill({ color: "rgb(53,198,234)" }) }) }),
  new ol.style.Style({ zIndex: 16, text: new ol.style.Text({ text: "\u27A4", textAlign: "center", textBaseline: "middle", font: "bold 24px", scale: 2.7, rotateWithView: true, rotation: -1.6 + pRotation, fill: new ol.style.Fill({ color: "#111" }) }) })
]);
combinedLayer.getSource().addFeature(feature);

这种情况下，同一个图层内，zIndex值更高的要素会绘制在上面，轨迹的zIndex:-1自然会被点的zIndex:15/16覆盖。

内容的提问来源于stack exchange，提问作者Alex.K