¿Comparando dos mapas con una interfaz web agradable?

15

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

Los ejemplos incluyen:

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

    
pregunta Alex Leith 17.04.2013 - 07:54

7 respuestas

12

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

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

Solo debe 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.

    
respondido por el Devdatta Tengshe 17.04.2013 - 08:32
8

Mango lo hace con Leaflet. Vea un ejemplo de aquí .

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

    
respondido por el ChrisInCambo 17.04.2013 - 15:22
3

Este es un ejemplo de folleto de trabajo que utiliza dos capas WMS y un folleto 0.5. Necesita un poco de ajuste, por ejemplo, las capas no se recortan mientras se desplaza. Pero funciona bastante bien.

Consulte aquí: enlace

    
respondido por el Alex Leith 24.04.2013 - 04:29
2

Eche un vistazo a División WMS para el folleto.

    
respondido por el Liedman 14.04.2014 - 11:07
1

es posible con un folleto. Aquí lo que hice el mapa de deslizamiento 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 
        );
    }); 
    
respondido por el khousuylong 18.04.2013 - 03:40
0

Probablemente debería mirar en OpenLayers 3. Puede mirar el código de ejemplos usando CTRL + U: El código tampoco parece demasiado complejo:

enlace

    
respondido por el BritishSteel 23.01.2015 - 11:13
0

Estoy usando una buena Openlayers 3 y 4 extensiones de viglino. Puede encontrar los ejemplos de la herramienta Swipe y los mapas sincronizados aquí.

enlace

enlace

Su repositorio de GitHub se encuentra aquí: enlace

Esos ejemplos se incluyen en el repositorio de GitHub.

    
respondido por el wondie 28.09.2017 - 04:33

Lea otras preguntas en las etiquetas