Membandingkan dua peta dengan antarmuka web yang bagus?

16

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

Contohnya termasuk:

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

openlayers-2 web-mapping leaflet swipe Alex Leith
sumber
1
tautan Hurricane Sandy tampaknya sudah mati sekarang. Apakah ini tautan yang lebih baik untuk menunjukkan ide itu?
Stephen Lead
Itu berhasil, saya akan mengganti tautan lain @StephenLead
Alex Leith

Jawaban:

12

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.

Devdatta Tengshe
sumber
Terlihat ada yang melakukannya dengan Leaflet?
Alex Leith
@alexgleith Lihatlah ini: groups.google.com/forum/#!msg/leaflet-js/vXU_bir6JsA/…
Devdatta Tengshe
8

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.

ChrisInCambo
sumber
Itu antarmuka yang terlihat bagus! Tapi tidak ada kode yang dapat digunakan kembali di sana ... Saya ingin sesuatu yang internal untuk organisasi kami, dan saya sudah punya infrastruktur untuk menata dan meng-hosting data.
Alex Leith
3

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

Alex Leith
sumber
Saya tidak tahu apakah Anda penulisnya, tetapi saya akan memberikan dua saran kepada Anda: Pertama menggunakan acara Pindah daripada acara MoveEnd memberi waktu nyata menggesek & kedua, saya merasa ini adalah cara yang berlawanan dari bagaimana alat seharusnya bekas. Alih-alih menyeret peta, slider harus diseret.
Devdatta Tengshe
Saya benar-benar suka memiliki slider di bagian bawah dan di mouse. Ini berarti bahwa dengan mouse Anda membuatnya berfungsi sepanjang waktu, dan dengan sentuhan, Anda masih bisa melakukannya. Saya baru saja bersama-sama, itu adalah bukti konsep saja. Saya yakin ada banyak pilihan.
Alex Leith
2

Lihatlah WMS Split for Leaflet.

Liedman
sumber
1

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 
        );
    });
khousuylong
sumber
Apakah Anda punya contoh lengkap? Bagaimana Anda mengatur dua peta untuk menggesek di antara?
Alex Leith
Anda tidak memerlukan dua peta, yang Anda butuhkan adalah satu peta dengan dua lapisan, $ (". leaflet-layer: nth-child (3)"). css ("clip", "rect (" + coordLeft + ") "); $ (". leaflet-layer: nth-child (2)"). css ("clip", "rect (" + coordRight + ")");
khousuylong
Ok, di mana (2) dan (3) merujuk ke lapisan 2 dan 3 untuk menambahkan peta?
Alex Leith
kode di atas sudah aktif, yang Anda butuhkan pertama adalah membuat peta dan menambahkan dua lapisan, kemudian dengan jquery Anda bisa mendapatkan wadah lapisan atas dan lapisan atas kedua. menggunakan "css" klip untuk klip dua wadah yang sesuai
khousuylong
Ok, jadi saya memiliki implementasi yang naif di sini: jsfiddle.net/Ah6Bx apa yang hilang?
Alex Leith