Comparando dois mapas com uma interface agradável?

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

Exemplos incluem:

• http://www.esri.com/services/disaster-response/hurricanes/hurricane-sandy-the-aftermap
• http://www.arcgis.com/apps/StorytellingSwipe/index.html?appid=c62112f6ba834227978d8f1cf2b6f5af
• http://www.abc.net.au/news/specials/qld-floods/ (não um mapa)

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

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.

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.

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

Dê uma olhada no WMS Split for Leaflet.

é 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 
        );
    }); 

Você provavelmente deve examinar o OpenLayers 3. Você pode ver o código dos exemplos usando CTRL + U: O código também não parece muito complexo:

http://openlayers.org/en/v3.1.1/examples/layer-swipe.html

Eu estou usando um bom Openlayers 3 e 4 extensões por viglino. Você pode encontrar os exemplos da ferramenta Swipe e mapas sincronizados aqui.

http://viglino.github.io/ol3-ext/examples/map.control.swipe.html

http://viglino.github.io/ol3-ext/examples/map.interaction.synchronize.html

Seu repositório GitHub está localizado aqui: https://github.com/Viglino/ol3-ext

Esses exemplos estão incluídos no repositório GitHub.