Comparando dois mapas com uma interface agradável?

16

É possível no Leaflet ou no OpenLayers comparar dois mapas com uma barra para deslizar entre os dois?

Exemplos incluem:

Eu sei que é possível, mas não sei como fazer isso. Alguém tem alguma idéia? Exemplos?

openlayers-2 web-mapping leaflet swipe Alex Leith
fonte
1
o link do furacão Sandy parece estar morto agora. Esse é um link melhor para demonstrar a ideia?
Stephen Lead
Isso funciona, vou substituir o outro link @StephenLead #
Alex Leith

Respostas:

12

O que você quer fazer é geralmente chamado de ferramenta 'Swipe'.

Não existe ferramenta ou controle embutido para isso no OpenLayers, mas felizmente, há um exemplo aqui: Swipe Control com Google e OSM com base em uma classe personalizada.

Você só precisa incluir esse arquivo JavaScript no seu aplicativo.

A maioria das ferramentas / controles de deslize que eu vi on-line são baseados no clipe CSS simples. É muito simples integrar esse tipo de controle em seu aplicativo, mesmo sem patches externos.

Devdatta Tengshe
fonte
Já viu alguém fazer isso com o Leaflet?
Alex Leith
@alexgleith ter um olhar para isto: groups.google.com/forum/#!msg/leaflet-js/vXU_bir6JsA/...
Devdatta Tengshe
8

A manga faz isso com o Leaflet. Confira um exemplo aqui .

Claro que você pode economizar tempo para codificá-lo e criar o mapa gratuitamente usando o Mango.

ChrisInCambo
fonte
Essa é uma interface bonita! Mas não há código reutilizável lá ... Eu quero algo interno à nossa organização e já tenho infraestrutura instalada para estilizar e hospedar dados.
Alex Leith
3

Este é um exemplo de folheto que funciona usando duas camadas WMS e o folheto 0.5. Ele precisa de alguns ajustes, por exemplo, as camadas não são cortadas durante o movimento panorâmico. Mas funciona muito bem.

Veja aqui: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

Alex Leith
fonte
Não sei se você é o autor, mas darei duas sugestões: Primeiro, usando o evento Move, em vez do evento MoveEnd, é possível passar em tempo real e, em segundo lugar, acho que esse é o caminho oposto de como uma ferramenta deve ser usava. Em vez de arrastar o mapa, o controle deslizante deve ser arrastado.
Devdatta Tengshe
Na verdade, eu gosto de mover o controle deslizante na parte inferior e o mouse. Isso significa que, com um mouse, você o faz funcionar o tempo todo e, com o toque, você ainda pode fazê-lo. Acabei de juntar tudo, é apenas uma prova de conceito. Tenho certeza que existem muitas opções.
Alex Leith
2

Dê uma olhada no WMS Split for Leaflet.

Liedman
fonte
1

é possível com o folheto. aqui o que fiz no mapa de furto com folheto 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
Você tem um exemplo completo? Como você configura os dois mapas para deslizar entre eles?
Alex Leith
você não precisa de dois mapas, o que você precisa é de um mapa com duas camadas, $ (". leaflet-layer: nth-child (3)"). css ("clip", "rect (" + coordLeft + ") "); $ (". leaflet-layer: nth-child (2)"). css ("clip", "rect (" + coordRight + ")");
khousuylong
Ok, onde (2) e (3) se referem às camadas 2 e 3 em ordem de adição ao mapa?
Alex Leith
o código acima está em funcionamento, o que você precisa primeiro é criar um mapa e adicionar duas camadas; em seguida, com o jquery, você pode obter o contêiner da camada superior e da segunda camada superior. utilizando "css" grampo de grampear os dois recipientes em conformidade
khousuylong
Ok, então eu tenho uma implementação ingênua aqui: jsfiddle.net/Ah6Bx o que está faltando?
precisa