Как я могу установить наложение сверху, когда я нажимаю на него

Question

У меня есть карта Openlayers с большим количеством наложений (Point-координаты). Эти наложения часто очень близки друг к другу или перекрываются .

Когда я нажимаю на существующее наложение, я хочу, чтобы наложение было установлено сверху , чтобы оно было полностью видимым , а не за любым другим наложением.

До сих пор я видел только, что Layers можно установить с z-индексом. Можно ли это сделать с помощью оверлеев?

Я бы хотел сделать что-то подобное:

map.setLayerIndex(markers, 99);

но с наложением

Answer 1

Наложения - это элементы управления, которые расположены на координате, а не в фиксированном месте. По сути, это не более чем обычные элементы 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>