Zwei Karten mit schönem Webinterface vergleichen?

16

Ist es in Leaflet oder OpenLayers möglich, zwei Karten mit einem Balken zu vergleichen, um zwischen den beiden zu gleiten?

Beispiele beinhalten:

Ich weiß, dass es möglich ist, aber ich weiß nicht, wie ich es machen soll. Hat jemand irgendwelche Ideen? Beispiele?

openlayers-2 web-mapping leaflet swipe Alex Leith
quelle
1
Die Hurricane Sandy-Verbindung scheint jetzt tot zu sein. Ist dies ein besserer Link, um die Idee zu demonstrieren?
Stephen Lead
Das funktioniert, ich ersetze den anderen Link @StephenLead
Alex Leith

Antworten:

12

Was Sie tun möchten, wird normalerweise als "Swipe" -Tool bezeichnet.

In OpenLayers gibt es hierfür kein integriertes Tool oder Steuerelement. Zum Glück gibt es hier ein Beispiel: Swipe Control mit Google und OSM basierend auf einer benutzerdefinierten Klasse.

Sie müssen nur diese JavaScript-Datei in Ihre Anwendung aufnehmen.

Die meisten Swipe Tools / Steuerelemente, die ich online gesehen habe, basieren auf dem einfachen CSS-Clip. Es ist sehr einfach, diese Art von Control auch ohne externe Patches in Ihre Anwendung zu integrieren.

Devdatta Tengshe
quelle
Gesehen, wie jemand es mit Leaflet gemacht hat?
Alex Leith
@alexgleith Schauen
Sie sich Folgendes
8

Mango macht es mit Leaflet. Schauen Sie sich hier ein Beispiel an .

Sie können sich natürlich auch die Zeit sparen, um es selbst zu codieren und die Karte mit Mango kostenlos zu erstellen.

ChrisInCambo
quelle
Das ist eine gut aussehende Oberfläche! Aber es gibt dort keinen wiederverwendbaren Code ... Ich möchte etwas unternehmensinternes, und ich habe bereits eine Infrastruktur für das Stylen und Hosten von Daten.
Alex Leith
3

Dies ist ein funktionierendes Flugblattbeispiel mit zwei WMS-Ebenen und Flugblatt 0.5. Es muss ein wenig optimiert werden, zum Beispiel, dass die Ebenen beim Schwenken nicht abgeschnitten werden. Aber es funktioniert ziemlich gut.

Siehe hier: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

Alex Leith
quelle
Ich weiß nicht, ob Sie der Autor sind, aber ich gebe Ihnen zwei Vorschläge: Erstens ermöglicht die Verwendung des Move-Ereignisses anstelle des MoveEnd-Ereignisses das Durchwischen in Echtzeit, und zweitens ist dies meines Erachtens der umgekehrte Weg, wie ein Werkzeug sein sollte benutzt. Anstatt die Karte zu ziehen, sollte der Schieberegler gezogen werden.
Devdatta Tengshe
Eigentlich mag ich es, wenn sich sowohl der Schieberegler unten als auch die Maus bewegen. Dies bedeutet, dass Sie mit einer Maus die ganze Zeit arbeiten müssen und mit der Berührung immer noch arbeiten können. Ich habe es gerade erst zusammengebracht, es ist nur ein Proof of Concept. Ich bin sicher, dass es viele Möglichkeiten gibt.
Alex Leith
2

Schauen Sie sich WMS Split for Leaflet an.

Liedman
quelle
1

es ist mit Flugblatt möglich. hier was ich gemacht habe die swipe map mit leaflet und jquery.

$(document).ready(function() {
        var currentX = $("#viewport").width() / 2;
        var resetPosition = function(x){
            var pos = $(".leaflet-map-pane").position(),
            coordLeft = ( - pos.top ) + "px, " + ( x - pos.left + 3 ) + "px, " + ( $("#viewport").height() - pos.top ) + "px, " + -pos.left + "px",
            coordRight = ( - pos.top ) + "px, " + ( $("#viewport").width() - pos.left ) + "px, " + ( $("#viewport").height() - pos.top ) + "px, " + ( x - pos.left + 3 ) + "px";
            $(".leaflet-layer:nth-child(3)").css("clip", "rect(" + coordLeft + ")");
            $(".leaflet-layer:nth-child(2)").css("clip", "rect(" + coordRight + ")");
        };
        resetPosition(currentX);
        map.on("move", function(){
            resetPosition(currentX);
        })
        map.on("zoomend", function(){
            resetPosition(currentX);
        });
        if( $.browser.msie && parseInt($.browser.version) < 9 ){
            $("#vbar-divider").draggable({
                drag: function(e){
                    currentX = $("#vbar-divider").position().left;
                    resetPosition(currentX);
                },
                axis: "x"
            });
        }else{
            $("#vbar-divider").draggable({
                drag: function(e){
                    currentX = $("#vbar-divider").position().left;
                    resetPosition(currentX);
                    $("#vbar-divider div").hide();
                },
                stop: function(){
                    $("#vbar-divider div").show();
                },
                axis: "x",
                containment: "parent"
            });
        }
        $('#vbar-divider').animate({
                left: currentX,
            }, 
            500 
        );
    });
khousuylong
quelle
Haben Sie ein vollständiges Beispiel? Wie richten Sie die beiden Karten ein, zwischen denen Sie wischen möchten?
Alex Leith
Sie benötigen keine zwei Karten. Sie benötigen lediglich eine Karte mit zwei Ebenen ($ (". leaflet-layer: nth-child (3)"). css ("clip", "rect (" + coordLeft + ") "); $ (". leaflet-layer: n-child (2)"). css ("clip", "rect (" + coordRight + ")");
Khousuylong
Ok, wo (2) und (3) beziehen sich auf Layer 2 und 3 in der Reihenfolge des Hinzufügens zur Karte?
Alex Leith
Der obige Code ist in Betrieb. Zuerst müssen Sie eine Karte erstellen und zwei Ebenen hinzufügen. Dann können Sie mit jquery den Container mit der obersten Ebene und der zweiten obersten Ebene abrufen. mit "CSS" clip dementsprechend die beiden Behälter zu befestigen
khousuylong
Ok, also ich habe hier eine naive Implementierung: jsfiddle.net/Ah6Bx was fehlt?
Alex Leith