Confrontando due mappe con una bella interfaccia web?

16

In Leaflet o OpenLayers è possibile confrontare due mappe con una barra per scorrere tra le due?

Esempi inclusi:

So che è possibile, non so come farlo però. Qualcuno ha qualche idea? Esempi?

openlayers-2  web-mapping  leaflet  swipe 
— Alex Leith
fonte
1
l'uragano Sandy link sembra essere morto ora. È questo un link migliore per dimostrare l'idea?
— Stephen Lead,
Funziona, sostituirò l'altro link @StephenLead
— Alex Leith,

Risposte:

12

Quello che vuoi fare, di solito è chiamato uno strumento 'Swipe'.

In OpenLayers non esiste uno strumento o controllo integrato per questo, ma per fortuna, qui c'è un esempio: Swipe Control con Google e OSM basato su una classe personalizzata.

Devi solo includere questo file JavaScript nella tua applicazione.

La maggior parte degli strumenti / controlli Swipe che ho visto online si basano sulla semplice clip CSS. È molto semplice integrare questo tipo di controllo nell'applicazione anche senza patch esterne.

— Devdatta Tengshe
fonte
Hai visto qualcuno farlo con Leaflet?
— Alex Leith,
@alexgleith Dai un'occhiata a questo: groups.google.com/forum/#!msg/leaflet-js/vXU_bir6JsA/…
— Devdatta Tengshe
8

Mango lo fa con Leaflet. Guarda un esempio qui .

Ovviamente potresti semplicemente risparmiare tempo per codificarlo da solo e creare la mappa gratuitamente usando Mango.

— ChrisInCambo
fonte
È un'interfaccia gradevole! Ma non esiste un codice riutilizzabile lì ... Voglio qualcosa di interno alla nostra organizzazione e ho già un'infrastruttura predisposta per lo styling e l'hosting dei dati.
— Alex Leith,
3

Questo è un esempio di opuscolo di lavoro che utilizza due strati WMS e un foglio illustrativo 0.5. Richiede un po 'di modifiche, ad esempio i livelli non vengono tagliati durante il panning. Ma funziona abbastanza bene.

Vedi qui: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

— Alex Leith
fonte
Non so se sei l'autore, ma ti darò due suggerimenti: in primo luogo l'utilizzo dell'evento Move piuttosto che l'evento MoveEnd consente di scorrere in tempo reale e, in secondo luogo, ritengo che questo sia il modo opposto di come dovrebbe essere uno strumento Usato. Invece di trascinare la mappa, è necessario trascinare il dispositivo di scorrimento.
— Devdatta Tengshe
In realtà mi piace avere sia il cursore in basso che lo spostamento del mouse. Significa che con un mouse lo fai funzionare tutto il tempo e con il tocco puoi ancora farlo. L'ho appena messo insieme, è solo una prova del concetto. Sono sicuro che ci sono molte opzioni.
— Alex Leith,
2

Dai un'occhiata a WMS Split for Leaflet.

— Liedman
fonte
1

è possibile con volantino. ecco cosa ho fatto la mappa di scorrimento con volantino e 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
fonte
Hai un esempio completo? Come si impostano le due mappe tra cui scorrere?
— Alex Leith,
non hai bisogno di due mappe, quello di cui hai bisogno è una mappa con due livelli, $ (". leaflet-layer: nth-child (3)"). css ("clip", "rect (" + coordLeft + ") "); $ (". leaflet-layer: nth-child (2)"). css ("clip", "rect (" + coordRight + ")");
— khousuylong,
Ok, dove (2) e (3) si riferiscono ai livelli 2 e 3 in ordine di aggiunta alla mappa?
— Alex Leith,
il codice sopra è attivo e funzionante, quello che ti serve prima è creare una mappa e aggiungere due livelli, quindi con jquery puoi ottenere il contenitore del livello superiore e del secondo livello superiore. usando la clip "css" per agganciare i due contenitori di conseguenza
— khousuylong,
Ok, quindi ho un'implementazione ingenua qui: jsfiddle.net/Ah6Bx cosa manca?
— Alex Leith,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.