如何实现点击OpenLayers Overlay时将其置于顶层显示？

当然可以给Overlay设置z-index来控制层级！其实OpenLayers的Overlay本身就支持zIndex属性，操作起来比Layer的setLayerIndex更直接，因为Overlay对应的是页面上的DOM元素，我们可以直接通过修改它的z-index来调整显示层级。

两种实现方式： #

• 初始化时指定基础层级
  创建Overlay的时候，直接在配置项里加入zIndex参数，就能给它设置初始的层级：

  const myOverlay = new ol.Overlay({
    position: [lon, lat],
    element: document.getElementById('my-overlay'),
    zIndex: 10 // 初始层级
  });
  map.addOverlay(myOverlay);
  

• 点击时动态置顶
  要实现点击Overlay时让它跳到最顶层，只需要给Overlay绑定click事件，在回调里把它的zIndex设为一个足够大的值（比如999），甚至可以先把其他所有Overlay的层级调低，确保当前的绝对置顶：

  // 给目标Overlay绑定点击事件
  myOverlay.getElement().addEventListener('click', () => {
    // 先把所有Overlay的zIndex设为默认值（比如10）
    map.getOverlays().forEach(overlay => {
      overlay.setZIndex(10);
    });
    // 把当前点击的Overlay设为最高层级
    myOverlay.setZIndex(999);
  });
  

补充说明： #

Overlay的setZIndex()方法会直接把值应用到它对应的DOM元素的z-index样式上，和你熟悉的map.setLayerIndex逻辑类似，但针对的是单个Overlay元素。这样就能轻松解决重叠Overlay的遮挡问题，点击哪个就让哪个完全显示在最上面啦！

内容的提问来源于stack exchange，提问作者Kvasha