OpenLayers 3 - MousePosition 悬停问题

Question

我正在设计 Openlayers 3 提供的 MousePosition 的样式。但是，这个问题与此 MousePosition 的行为有关。

我要实现的是：

在 container div 中插入 MousePosition -- (完成)
当您将鼠标悬停在容器 div 上时，MousePositon 应该 "think" 您正悬停在地图上。

我看过 Openlayers buttons。（OpenLayers 按钮做我想用 div 实现的）。此按钮具有 class .ol-unselectable 并与 class .ol-overlaycontainer-stopevent.

一起存储在 div 中

我知道这应该行不通，因为 container div 中存在 z-index。

我应该怎么做才能让它正常工作？

var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat : ol.coordinate.toStringXY(),
  target : $('#coords').get(0),
  className : 'whatever-custom'
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: false
  }).extend([mousePositionControl]),
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

html, body, #map {
  width : 100%;
  height : 100%;
}

#coords {
  position : absolute;
  bottom : 0.5em;
  left : 0.5em;
  z-index : 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol-debug.js"></script>
<div id="map">
  <div class="ol-overlaycontainer"></div>
  <div class="ol-overlaycontainer-stopevent">
    <div id="coords"></div>
  </div>
</div>

Answer 1

只需将 pointer-events:none; 添加到您的 css class

#coords {
  position : absolute;
  bottom : 0.5em;
  left : 0.5em;
  z-index : 1;
  pointer-events:none;
}

OpenLayers 3 - MousePosition 悬停问题

OpenLayers 3 - MousePosition hover issue

html

css

openlayers-3