Güzel bir web arayüzü ile iki harita karşılaştırmak?

Leaflet veya OpenLayers'da iki haritayı iki çubuk arasında kaydırmak mümkün mü?

Örnekler:

• http://www.esri.com/services/disaster-response/hurricanes/hurricane-sandy-the-aftermap
• http://www.arcgis.com/apps/StorytellingSwipe/index.html?appid=c62112f6ba834227978d8f1cf2b6f5af
• http://www.abc.net.au/news/specials/qld-floods/ (harita değil)

Bunun mümkün olduğunu biliyorum, nasıl yapacağımı bilmiyorum. Kimsenin fikri yok mu? Örnekler?

Ne yapmak istediğinize genellikle 'Kaydırma' aracı denir.

OpenLayers'da bunun için dahili bir araç veya kontrol yoktur, ancak şükür ki burada bir örnek vardır: Özel bir sınıfa dayalı Google ve OSM ile Kaydırma Kontrolü .

Bu JavaScript dosyasını uygulamanıza eklemeniz yeterlidir .

Çevrimiçi olarak gördüğüm çoğu Kaydırma Aracı / denetimi basit CSS klibine dayanır. Harici yamalar olmadan bile bu tür Kontrolleri uygulamanıza entegre etmek çok basittir.

Mango bunu Leaflet ile yapıyor. Burada bir örnek inceleyin .

Tabii ki kendiniz kodlamak için zamandan tasarruf edebilir ve Mango'yu kullanarak haritayı ücretsiz olarak oluşturabilirsiniz.

Bu, iki WMS katmanı ve 0.5 broşürü kullanan çalışan bir Broşür örneğidir. Biraz ince ayar gerektiriyor, örneğin kaydırma sırasında katmanlar kırpılmıyor. Ama gayet iyi çalışıyor.

Buraya bakın: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

Leaflet için WMS Split'e bir göz atın .

broşür ile mümkündür. Burada broşür ve jquery ile tokatlamak harita yaptığım.

$(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 
        );
    }); 

Muhtemelen OpenLayers 3'e bakmalısınız. CTRL + U kullanarak örnek koduna bakabilirsiniz: Kod da çok karmaşık görünmüyor:

http://openlayers.org/en/v3.1.1/examples/layer-swipe.html

Ben viglino tarafından güzel bir Openlayers 3 ve 4 uzantıları kullanıyorum. Kaydırma aracı ve Senkronize haritalar örneklerini burada bulabilirsiniz.

http://viglino.github.io/ol3-ext/examples/map.control.swipe.html

http://viglino.github.io/ol3-ext/examples/map.interaction.synchronize.html

GitHub deposu burada bulunur: https://github.com/Viglino/ol3-ext

Bu örnekler GitHub deposuna dahil edilmiştir.