Porównywanie dwóch map z ładnym interfejsem sieciowym?

Czy w Ulotce lub OpenLayers jest możliwe porównanie dwóch map z paskiem do przesuwania się między nimi?

Przykłady zawierają:

• 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/ (nie mapa)

Wiem, że to możliwe, ale nie wiem jak to zrobić. Czy ktoś ma jakieś pomysły? Przykłady?

To, co chcesz zrobić, jest zwykle nazywane narzędziem „machnięcia”.

W OpenLayers nie ma wbudowanego narzędzia ani kontroli, ale na szczęście istnieje przykład: Swipe Control z Google i OSM na podstawie niestandardowej klasy.

Musisz tylko dołączyć ten plik JavaScript do swojej aplikacji.

Większość narzędzi / kontrolek Swipe, które widziałem online, opiera się na prostym klipie CSS. Bardzo łatwo jest zintegrować ten rodzaj Kontroli z aplikacją, nawet bez zewnętrznych łatek.

Mango robi to za pomocą Ulotki. Sprawdź przykład tutaj .

Oczywiście możesz po prostu zaoszczędzić czas na samodzielne kodowanie i po prostu stworzyć mapę za darmo za pomocą Mango.

To jest działający przykład Ulotki wykorzystujący dwie warstwy WMS i Ulotkę 0,5. To wymaga drobnych poprawek, na przykład warstwy nie są przycinane podczas panoramowania. Ale działa całkiem dobrze.

Zobacz tutaj: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

Zobacz WMS Split na ulotkę.

jest to możliwe dzięki ulotce. tutaj zrobiłem mapę machnięcia z ulotką i 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 
        );
    }); 

Prawdopodobnie powinieneś zajrzeć do OpenLayers 3. Możesz spojrzeć na kod przykładów za pomocą CTRL + U: Kod nie wygląda zbyt skomplikowany:

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

Używam ładnych rozszerzeń Openlayers 3 i 4 firmy Viglino. Przykłady narzędzia Swipe i zsynchronizowanych map można znaleźć tutaj.

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

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

Jego repozytorium GitHub znajduje się tutaj: https://github.com/Viglino/ol3-ext

Te przykłady są zawarte w repozytorium GitHub.