OpenLayers 3 - MousePosition Hover-Problem

Question

Ich bin dabei, die von Openlayers 3 zur Verfügung gestellte MousePosition zu stylen. Diese Frage hat jedoch mit dem Verhalten dieser MousePosition zu tun.

Was ich will, erreichen ist:

1. Legen Sie die MousePosition in einem container div - ( Fertig)
2. Wenn Sie über die div-Container schweben, sollte die MousePositon "denken" du bist über der Karte schweben.

Ich habe mir Openlayers buttons angesehen. (OpenLayers Buttons machen was ich mit dem div erreichen möchte). Diese Tasten haben die Klasse .ol-unselectable und sind in divs mit der Klasse .ol-overlaycontainer-stopevent gespeichert.

Ich weiß, dass dies nicht funktionieren sollte, weil z-index in der container div vorhanden ist.

Was soll ich tun, damit das funktioniert?

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

nur pointer-events:none; zu Ihrem CSS-Klasse hinzufügen

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