Comparer deux cartes avec une belle interface Web?

16

Est-il possible dans Leaflet ou OpenLayers de comparer deux cartes avec une barre pour glisser entre les deux?

Les exemples comprennent:

Je sais que c'est possible, je ne sais pas comment faire. Quelqu'un a une idée? Exemples?

openlayers-2 web-mapping leaflet swipe Alex Leith
la source
1
le lien Hurricane Sandy semble être mort maintenant. Est- ce un meilleur lien pour démontrer l'idée?
Stephen Lead
Cela fonctionne, je remplacerai l'autre lien @StephenLead
Alex Leith

Réponses:

12

Ce que vous voulez faire est généralement appelé un outil de «balayage».

Il n'y a pas d'outil ou de contrôle intégré pour cela dans OpenLayers, mais heureusement, il y a un exemple ici: Swipe Control avec Google et OSM basé sur une classe personnalisée.

Il vous suffit d'inclure ce fichier JavaScript dans votre application.

La plupart des outils / contrôles Swipe que j'ai vus en ligne sont basés sur le simple clip CSS. Il est très simple d'intégrer ce type de contrôle dans votre application même sans correctifs externes.

Devdatta Tengshe
la source
Vous avez vu quelqu'un le faire avec Leaflet?
Alex Leith
@alexgleith Jetez un œil à ceci: groups.google.com/forum/#!msg/leaflet-js/vXU_bir6JsA/…
Devdatta Tengshe
8

La mangue le fait avec Leaflet. Découvrez un exemple ici .

Bien sûr, vous pouvez simplement gagner du temps pour le coder vous-même et simplement créer la carte gratuitement en utilisant Mango.

ChrisInCambo
la source
C'est une belle interface! Mais il n'y a pas de code réutilisable ici ... Je veux quelque chose qui est interne à notre organisation, et j'ai déjà une infrastructure en place pour le style et l'hébergement des données.
Alex Leith
3

Ceci est un exemple de brochure qui utilise deux couches WMS et la brochure 0.5. Il a besoin d'un peu de peaufinage, par exemple, les calques ne sont pas écrêtés lors du panoramique. Mais cela fonctionne plutôt bien.

Voir ici: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

Alex Leith
la source
Je ne sais pas si vous êtes l'auteur, mais je vais vous donner deux suggestions: premièrement, utiliser l'événement Move plutôt que l'événement MoveEnd donne un balayage en temps réel et deuxièmement, je pense que c'est la façon opposée de savoir comment un outil devrait être utilisé. Au lieu de faire glisser la carte, le curseur doit être déplacé.
Devdatta Tengshe
J'aime vraiment avoir à la fois le curseur en bas et le déplacement de la souris. Cela signifie qu'avec une souris, vous la faites fonctionner tout le temps, et avec le toucher, vous pouvez toujours le faire. Je viens de le rassembler, c'est une preuve de concept seulement. Je suis sûr qu'il y a beaucoup d'options.
Alex Leith
2

Jetez un œil à WMS Split for Leaflet.

Liedman
la source
1

c'est possible avec le dépliant. voici ce que j'ai fait la carte glissante avec dépliant et 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
la source
Avez-vous un exemple complet? Comment configurez-vous les deux cartes pour passer de l'une à l'autre?
Alex Leith
vous n'avez pas besoin de deux cartes, ce dont vous avez besoin est d'une carte à deux couches, $ (". leaflet-layer: nth-child (3)"). css ("clip", "rect (" + coordLeft + ") "); $ (". leaflet-layer: nth-child (2)"). css ("clip", "rect (" + coordRight + ")");
khousuylong
Ok, où (2) et (3) font référence aux couches 2 et 3 par ordre d'ajout à la carte?
Alex Leith
le code ci-dessus est opérationnel, ce dont vous avez d'abord besoin est de créer une carte et d'ajouter deux couches, puis avec jquery vous pouvez obtenir le conteneur de la couche supérieure et de la deuxième couche supérieure. utiliser le clip "css" pour
couper
Ok, j'ai donc une implémentation naïve ici: jsfiddle.net/Ah6Bx qu'est-ce qui manque?
Alex Leith