单击它时如何在顶部设置叠加层

Question

我有一个带有很多叠加层（点坐标）的 Openlayers 地图。这些重叠通常彼此非常接近或重叠。

当我点击现有的叠加层时，我希望将叠加层设置在顶部，以便完全可见，而不是在任何其他叠加层之后。

到目前为止我只看到 Layers 可以设置 z-index。是否也可以使用叠加层来做到这一点？

我想做这样的事情：

map.setLayerIndex(markers, 99);

但有覆盖层

Answer 1

Overlays是控件，它们位于一个坐标上，而不是在一个固定的地方。它们基本上只是常规的 html div 元素，它们会随着地图改变位置。

这也意味着，您可以对它们应用正常的 CSS 样式并对其使用 z-index。

var layer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [layer],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

// Vienna marker
var marker1 = new ol.Overlay({
  position: ol.proj.fromLonLat([16.3725, 48.208889]),
  positioning: 'center-center',
  element: document.getElementById('marker1'),
  stopEvent: false,
  className: 'm1 ol ol-overlay-container ol-selectable'
});
map.addOverlay(marker1);

marker2 = new ol.Overlay({
  position: ol.proj.fromLonLat([23.3725, 48.208889]),
  positioning: 'center-center',
  element: document.getElementById('marker2'),
  stopEvent: false,
  className: 'm2 ol ol-overlay-container ol-selectable'
});
map.addOverlay(marker2);



function clicked(selector) {
  console.log('clicked overlay', selector);
  document.querySelectorAll(".ol").forEach(function(el){ 
    el.classList.remove('active');
  });
  document.querySelector(selector).classList.add('active');
}

.marker{
  width: 30px;
  height: 30px;
  border: 1px solid #088;
  border-radius: 15px;
  background-color: #0FF;
}

.m1 .marker{
  background-color: #FF0;
}

.active{
  z-index: 1234782904789;
}
.active .marker{
  background-color: red;
}

<link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
<div id="map" class="map"></div>
<div id="marker1" title="Marker" class="marker" onclick="clicked('.m1')"></div>
<div id="marker2" title="Marker" class="marker" onclick="clicked('.m2')"></div>

单击它时如何在顶部设置叠加层

How can I set an Overlay on top when I click on it

z-index

openlayers