¿Comparando dos mapas con una bonita interfaz web?

16

¿Es posible en Leaflet o OpenLayers comparar dos mapas con una barra para deslizarse entre los dos?

Ejemplos incluyen:

Sé que es posible, aunque no sé cómo hacerlo. ¿Alguien tiene alguna idea? Ejemplos?

openlayers-2  web-mapping  leaflet  swipe 
— Alex Leith
fuente
1
El enlace del huracán Sandy parece estar muerto ahora. ¿Es este un mejor enlace para demostrar la idea?
— Stephen Lead el
Eso funciona, reemplazaré el otro enlace @StephenLead
— Alex Leith

Respuestas:

12

Lo que quieres hacer, generalmente se llama una herramienta 'Deslizar'.

No hay una herramienta o control incorporado para esto en OpenLayers, pero afortunadamente, hay un ejemplo aquí: Control de deslizamiento con Google y OSM basado en una clase personalizada.

Solo necesita incluir este archivo JavaScript en su aplicación.

La mayoría de las herramientas / controles de deslizamiento que he visto en línea, se basan en el simple clip CSS. Es muy sencillo integrar este tipo de control en su aplicación incluso sin parches externos.

— Devdatta Tengshe
fuente
¿Has visto a alguien hacerlo con Leaflet?
— Alex Leith
@alexgleith Echa un vistazo a esto: groups.google.com/forum/#!msg/leaflet-js/vXU_bir6JsA/…
— Devdatta Tengshe
8

El mango lo hace con el folleto. Mira un ejemplo aquí .

Por supuesto, puede ahorrar tiempo para codificarlo usted mismo y crear el mapa de forma gratuita con Mango.

— ChrisInCambo
fuente
¡Esa es una interfaz bonita! Pero no hay código reutilizable allí ... Quiero algo que sea interno de nuestra organización, y ya tengo una infraestructura para diseñar y alojar datos.
— Alex Leith
3

Este es un ejemplo de folleto funcional que utiliza dos capas WMS y el folleto 0.5. Necesita un poco de ajuste, por ejemplo, las capas no se recortan durante el desplazamiento. Pero funciona bastante bien.

Ver aquí: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

— Alex Leith
fuente
No sé si usted es el autor, pero le daré dos sugerencias: en primer lugar, usar el evento Move en lugar del evento MoveEnd permite deslizar en tiempo real y, en segundo lugar, creo que esta es la forma opuesta de cómo debería ser una herramienta usado. En lugar de arrastrar el mapa, se debe arrastrar el control deslizante.
— Devdatta Tengshe
De hecho, me gusta tener tanto el control deslizante en la parte inferior como el movimiento del mouse. Significa que con un mouse lo haces funcionar todo el tiempo, y con el tacto, aún puedes hacerlo. Lo acabo de juntar, es solo una prueba de concepto. Estoy seguro de que hay muchas opciones.
— Alex Leith
2

Eche un vistazo a WMS Split for Leaflet.

— Liedman
fuente
1

Es posible con el folleto. Aquí lo que hice el mapa de deslizar con folleto y 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
fuente
¿Tienes un ejemplo completo? ¿Cómo se configuran los dos mapas para pasar?
— Alex Leith
no necesita dos mapas, lo que necesita es un mapa con dos capas, $ (". leaflet-layer: nth-child (3)"). css ("clip", "rect (" + coordLeft + ") "); $ (". leaflet-layer: nth-child (2)"). css ("clip", "rect (" + coordRight + ")");
— khousuylong
Ok, ¿dónde (2) y (3) se refieren a las capas 2 y 3 en orden de agregar al mapa?
— Alex Leith
el código anterior está en funcionamiento, lo que necesita primero es crear un mapa y agregar dos capas, luego con jquery puede obtener el contenedor de la capa superior y la segunda capa superior. usando el clip "css" para recortar los dos contenedores en consecuencia
— khousuylong
Ok, tengo una implementación ingenua aquí: jsfiddle.net/Ah6Bx, ¿qué falta?
— Alex Leith
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.