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

16

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

Przykłady zawierają:

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

openlayers-2 web-mapping leaflet swipe Alex Leith
źródło
1
Łącznik Huragan Sandy wydaje się teraz martwy. Czy to lepszy link do zademonstrowania pomysłu?
Stephen Lead
To działa, zastąpię inny link @StephenLead
Alex Leith

Odpowiedzi:

12

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.

Devdatta Tengshe
źródło
Widziałeś kogoś, kto robi to z Ulotką?
Alex Leith,
@alexgleith Spójrz na to: groups.google.com/forum
#!msg/leaflet-js/vXU_bir6JsA/...
8

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.

ChrisInCambo
źródło
To ładnie wyglądający interfejs! Ale nie ma tam kodu wielokrotnego użytku ... Chcę czegoś, co jest wewnętrzne dla naszej organizacji, i mam już infrastrukturę do stylizacji i hostowania danych.
Alex Leith,
3

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

Alex Leith
źródło
Nie wiem, czy jesteś autorem, ale dam ci dwie sugestie: po pierwsze użycie zdarzenia Move, a następnie zdarzenie MoveEnd umożliwia przesuwanie w czasie rzeczywistym, a po drugie, uważam, że jest to przeciwny sposób, w jaki narzędzie powinno być używany. Zamiast przeciągać mapę, należy przeciągnąć suwak.
Devdatta Tengshe
Naprawdę lubię mieć suwak na dole i ruch myszy. Oznacza to, że za pomocą myszy cały czas działa, a za pomocą dotyku nadal możesz to zrobić. Właśnie go zebrałem, to tylko dowód koncepcji. Jestem pewien, że jest wiele opcji.
Alex Leith,
2

Zobacz WMS Split na ulotkę.

Liedman
źródło
1

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 
        );
    });
Khousuylong
źródło
Czy masz pełny przykład? Jak skonfigurować dwie mapy do przesuwania między nimi?
Alex Leith,
nie potrzebujesz dwóch map, potrzebujesz jednej mapy z dwiema warstwami, $ (". leaflet-layer: nth-child (3)"). css ("clip", "rect (" + coordinLeft + ") „); $ (". leaflet-layer: nth-child (2)"). css ("clip", "rect (" + coordinRight + ")");
khousuylong,
Ok, gdzie (2) i (3) odnoszą się do warstw 2 i 3 w kolejności dodawania do mapy?
Alex Leith,
powyższy kod jest gotowy do działania, najpierw musisz utworzyć mapę i dodać dwie warstwy, a następnie za pomocą jquery możesz uzyskać pojemnik górnej i drugiej górnej warstwy. używając klipsa „css”, aby odpowiednio
przyciąć
Ok, więc mam tutaj naiwną implementację: jsfiddle.net/Ah6Bx czego brakuje?
Alex Leith,