Question

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

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

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

我想做那样的事情：

map.setLayerIndex(markers, 99);

但有叠加

Answer 1

叠加层是控件，它们位于坐标上而不是位于固定位置。它们基本上只是常规的html div元素，它们会改变地图的位置。

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

＆＃13;

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');
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: