Openlayers 让Feature的zIndex脱离所属Layer的zIndex的限制

背景

在项目中遇到这样一个需求：点击一个要素，并将它置于地图顶层，但不能改变该要素所属图层的zIndex。

解决方案：调高选中要素的zIndex

但Openlayers中只有Layer与Style类存在zIndex属性。如果设置选中要素所属图层的zIndex属性，就不满足需求。

设置Style的zIndex（不起作用）

如果设置要素Style的zIndex属性，即使Style的zIndex足够高，只要选中要素所属图层的zIndex不是地图中最高的，该要素都不会被置于地图顶层，例如这个问题：Style zIndex not working。链接中对Style的zIndex 没有生效的问题做出了解答：

That is correct. Features are rendered by zIndex within their individual layer canvases then the canvases (including raster layers) are arranged by the layer zIndex (or layer order if zIndex is not specified).

这是正确的。Openlayers中要素会先被渲染到各自所属图层的canvas画布中，然后这些canvas画布（包括栅格图层）将通过图层的zIndex大小或者初始化顺序来安排渲染层级，zIndex大的或者后初始化的图层将会渲染到高的渲染层级。

从上述描述可知不能通过选中要素Style的zIndex来实现置顶的效果。

向顶层图层添加选中要素（起作用）

另一个改变选中要素的zIndex值的办法是：初始化一个zIndex值全地图最大的图层——顶层图层。当要素被选中时，将选中要素添加到顶层图层中，这个时候的选中要素的zIndex值等于顶层图层的zIndex值。
代码如下：

// 点样式
var pointStyle = new Style({
  image: new Circle({
    radius: 40,
    fill: new Fill({
      color: "rgb(0, 0, 255)" // 蓝色
    })
  }),
  zIndex: 30
});
// 多边形样式
var polygonStyle = new Style({
  fill: new Fill({
    color: "rgba(0, 0, 0, 0.7)"
  })
});
// 选中点样式
var selectPointStyle = new Style({
  image: new Circle({
    radius: 40,
    fill: new Fill({
      color: "rgb(255, 0, 0)" // 红色
    })
  }),
  zIndex: 1
});
// 点图层
var layer1 = new VectorLayer({
  source: new VectorSource({
    features: [new Feature(new Point([0, 0])), new Feature(new Point([0, 1]))]
  }),
  style: [pointStyle],
  zIndex: 1
});
// 多边形图层
var layer2 = new VectorLayer({
  source: new VectorSource({
    features: [
      new Feature(
        new Polygon([
          [[0, 0], [1, 0], [1, 1], [0, 1], [0, 0]]
        ])
      )
    ]
  }),
  style: polygonStyle,
  zIndex: 2
});
// 顶层图层
var topLayer = new VectorLayer({
  source: new VectorSource(),
  style: [pointStyle],
  zIndex: 100 // zIndex全地图最大
});
// 选择Interaction
var select = new Select({
  layers: [layer1, topLayer],
  style: [selectPointStyle],
  hitTolerance: 10
});
// 选中要素时将所选中的要素加入到顶层图层中
select.on("select", (event) => {
  // 清除顶层图层可以使选中要素的zIndex恢复
  topLayer.getSource().clear();
  if (event.selected.length > 0) {
  	// 将选中要素加入到顶层图层中
    topLayer.getSource().addFeature(event.selected[0]);
  }
});
// 地图对象
var map = new Map({
  layers: [layer1, layer2, topLayer],
  target: "map",
  view: new View({
    center: [0, 0],
    zoom: 8
  }),
  interactions: [select]
});

地图初始化结果如下：

点击一个点位后：

点击空白处或者正方形后：

注释掉将选中要素添加到顶层图层的代码：

// // 选中要素时将所选中的要素加入到顶层图层中
// select.on("select", (event) => {
//   // 清除顶层图层可以使选中要素的zIndex恢复
//   topLayer.getSource().clear();
//   if (event.selected.length > 0) {
//     // 将选中要素加入到顶层图层中
//     topLayer.getSource().addFeature(event.selected[0]);
//   }
// });

此时再次点击一个点位后：

由上述结果可以看出通过向顶层图层添加选中要素，可以改变选中要素的zIndex值，从而达到置顶选中要素，但不用改变选中要素所属图层的zIndex值。

总结

一个Feature可以存在于多个同类型图层中，并且该Feature的zIndex等于最后添加它的图层zIndex。