La comparación de los dos mapas con la agradable interfaz web?

Question

Es posible que en el Prospecto o OpenLayers para comparar dos mapas con una barra de deslizamiento entre los dos?

Los ejemplos incluyen:

• http://www.esri.com/services/disaster-response/hurricanes/hurricane-sandy-the-aftermap
• http://www.abc.net.au/news/specials/qld-floods/ (no mapa)

Sé que es posible, no sé cómo, a pesar de todo. Alguien tiene alguna idea? Ejemplos?

Answer 1

Lo que quieres hacer, es generalmente llamado un 'Pase' de la herramienta.

No hay ninguna herramienta incorporada o el control de esta en OpenLayers, pero, afortunadamente, hay un ejemplo aquí: Desliza el dedo de Control con Google y la OSM basado en una clase personalizada.

Usted sólo necesita incluir este archivo JavaScript en su aplicación.

La mayoría de Pase Herramientas/controles que he visto en internet, se basa en el CSS simple clip. Es muy sencillo de integrar este tipo de Control en su aplicación, incluso en la ausencia de otros parches.

Answer 2

Mango hace con el Prospecto. Echa un vistazo a un ejemplo aquí.

Por supuesto, usted puede simplemente guardar el tiempo para escribir el código a sí mismo y acaba de crear el mapa para uso libre de Mango.

Answer 3

Este es un trabajo Prospecto ejemplo el uso de dos capas WMS y folleto de 0.5. Se necesita un poco de ajuste, por ejemplo, las capas no son recortados mientras que la panorámica. Pero funciona bastante bien.

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

Answer 4

Eche un vistazo a WMS Split para el Prospecto.

Answer 5

es posible que con el prospecto. aquí lo que hace el barrido del mapa con el prospecto 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 
        );
    });