Relative Positionierung von benutzerdefinierten Steuerelementen mit OpenLayers 3

Eine Map, die ich mit OpenLayers 3 erstelle, hat einige Schaltflächen, die abhängig von anderen Dingen möglicherweise nicht verfügbar sind. Daher möchte ich die nicht verfügbaren Schaltflächen ausblenden und andere verwenden ihren Speicherplatz. Die verfügbaren Optionen können sich ändern, sodass manchmal eine Schaltfläche sichtbar wird.Relative Positionierung von benutzerdefinierten Steuerelementen mit OpenLayers 3

Es gibt einige Tutorials zum Erstellen von custom controls with OpenLayers 3. Das Problem ist, dass alle Proben, die ich gesehen habe, absolute Positionierung für die Kontrollen verwenden. Man muss wissen, wie viele Steuerelemente sichtbar sind, und die Koordinaten in CSS fest codieren. Oder ändern Sie die Koordinaten mit Javascript. Das heißt, aus dem obigen Link:

.rotate-north { 
    top: 65px; 
    left: .5em; 
}

Ich habe gerade versucht, das Element mit Positionseinstellung: relativer, aber dann unter der Karte erscheinen sie, wie die Steuerelemente auf der Seite nach der Karte hinzugefügt werden. Man könnte also die relative Positionierung mit negativen Koordinaten verwenden, aber wenn die Karte ihre Größe ändert, müssen die Koordinaten in Javascript neu geschrieben werden.

Gibt es eine Möglichkeit, relativ positionierte benutzerdefinierte Steuerelemente elegant mit OpenLayers 3 zu implementieren, idealerweise nur mit CSS?

Ich denke, ich versuche, eine ähnliche Funktionalität zu erhalten, wie in den Google Maps API:

map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlDiv);

Quelle

2016-06-19 Jose Gómez

Es ist unklar über die Bedingungen, aber vielleicht könnten Sie CSS 'calc' verwenden. –

Danke; das ist eine vernünftige Idee zu überprüfen. Beachten Sie jedoch, dass calc relative Werte nur für das Elternelement und nicht für ein anderes Element verwenden kann. Ich werde später überprüfen, ob dies für OpenLayers 3-Steuerelemente anwendbar wäre. In jedem Fall kann man immer Viewport-bezogene Maße (vw/vh) verwenden. Das andere Problem mit calc und vh ist, dass sie von Android vor Version 4.4 nicht unterstützt werden, was momentan ein Deal-Breaker für mich ist. –

Obwohl it is not a good solution for my use case, da it is not supported by Android 4.3 and earlier könnte man CSS Calc verwenden, wie von @Jonatas vorgeschlagen:

html:

<div class="parent"> 
    <div class="map"></div> 
    <div class="control"><button>CONTROL</button></div> 
</div>

css:

.map { 
    width: 100%; 
    height: calc(100vh - 2em); 
    background-color: green; 
} 

.control { 
    position: relative; 
    left: .5em; 
    top: calc(-100vh + 2em + .5em); 
}

Dies würde wahrscheinlich Viewport-Einheiten (also not supported by Android 4.3 and earlier) benötigen, da calc nur Werte basierend auf dem Elternelement berechnen kann.

jsfiddle: https://jsfiddle.net/adlerhn/zjt53nmf/

Quelle

2016-06-20 11:45:33

Vielleicht markieren Sie Ihre Antwort als richtig und beenden Sie diese. –

Relative Positionierung von benutzerdefinierten Steuerelementen mit OpenLayers 3

Antwort

Verwandte Themen