Question

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

我想要实现的目标是：

将鼠标位置插入container div - （完成）
当您将鼠标悬停在容器div上时，MousePositon应该＆＃34;思考＆＃34;你正徘徊在地图上。

我看过Openlayers buttons。（OpenLayers按钮执行我想用div实现的功能）。此按钮具有类.ol-unselectable，并存储在具有类.ol-overlaycontainer-stopevent的div中。

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

我该怎么做才能让它发挥作用？

＆＃13;

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

＆＃13;

html, body, #map {
  width : 100%;
  height : 100%;
}

#coords {
  position : absolute;
  bottom : 0.5em;
  left : 0.5em;
  z-index : 1;
}

＆＃13;

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

＆＃13;

Answer 1

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

即可

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

OpenLayers 3 - MousePosition悬停问题

1 个答案: