时间戳

首页 > 解决方案 > 单击时如何在顶部设置叠加层

z-index - 单击时如何在顶部设置叠加层

问题描述

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

当我单击现有叠加层时，我希望将叠加层设置在顶部，以便完全看到它，而不是在任何其他叠加层后面。

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

我想做这样的事情：

map.setLayerIndex(markers, 99);

但有一个覆盖

标签： z-indexopenlayers

解决方案

叠加层是控件，它们位于坐标上而不是固定位置。它们基本上只是普通的 htmldiv元素，它们会随着地图的变化而改变位置。

这也意味着，您可以对它们应用正常的 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>

推荐阅读