Membandingkan dua peta dengan antarmuka web yang bagus?

Apakah mungkin di Leaflet atau OpenLayers untuk membandingkan dua peta dengan bilah untuk meluncur di antara keduanya?

Contohnya termasuk:

• 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/ (bukan peta)

Saya tahu itu mungkin, saya tidak tahu bagaimana melakukannya. Ada yang punya ide? Contohnya?

Apa yang ingin Anda lakukan, biasanya disebut alat 'Gesek'.

Tidak ada alat bawaan atau kontrol untuk ini di OpenLayers, tapi untungnya, ada contoh di sini: Kontrol Gesek dengan Google dan OSM berdasarkan kelas kustom.

Anda hanya perlu memasukkan file JavaScript ini ke dalam aplikasi Anda.

Sebagian besar Alat Swipe / kontrol yang saya lihat online, didasarkan pada klip CSS sederhana. Sangat mudah untuk mengintegrasikan Kontrol semacam ini di aplikasi Anda bahkan tanpa tambalan eksternal.

Mangga melakukannya dengan Leaflet. Lihat contoh di sini .

Tentu saja Anda bisa menghemat waktu untuk membuat kode sendiri dan cukup membuat peta secara gratis menggunakan Mango.

Ini adalah contoh Leaflet yang berfungsi menggunakan dua layer WMS dan leaflet 0.5. Itu memang perlu sedikit penyesuaian, misalnya lapisan tidak terpotong saat menggeser. Tapi itu bekerja dengan cukup baik.

Lihat di sini: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

Lihatlah WMS Split for Leaflet.

itu mungkin dengan selebaran. di sini yang saya lakukan adalah menggesek peta dengan leaflet dan 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 
        );
    }); 

Anda mungkin harus melihat ke dalam OpenLayers 3. Anda dapat melihat kode contoh dengan menggunakan CTRL + U: Kode juga tidak terlihat terlalu rumit:

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

Saya menggunakan ekstensi Openlayers 3 dan 4 yang bagus oleh viglino. Anda dapat menemukan contoh alat Gesek dan Peta yang disinkronkan di sini.

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

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

Repositori GitHubnya berada di sini: https://github.com/Viglino/ol3-ext

Contoh-contoh itu termasuk dalam repositori GitHub.