So sánh hai bản đồ với giao diện web đẹp?

Có thể trong Leaflet hoặc OpenLayers để so sánh hai bản đồ với một thanh để trượt giữa hai bản đồ không?

Những ví dụ bao gồm:

• http://www.esri.com/service/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/ (không phải bản đồ)

Tôi biết điều đó là có thể, tôi không biết làm thế nào để làm điều đó. Bất cứ ai có ý tưởng? Ví dụ?

Những gì bạn muốn làm, thường được gọi là công cụ 'Vuốt'.

Không có công cụ hoặc điều khiển sẵn có nào cho điều này trong OpenLayers, nhưng may mắn thay, có một ví dụ ở đây: Swipe Control với Google và OSM dựa trên một lớp tùy chỉnh.

Bạn chỉ cần đưa tệp JavaScript này vào ứng dụng của mình.

Hầu hết các công cụ / điều khiển Swipe mà tôi đã thấy trực tuyến, đều dựa trên clip CSS đơn giản. Rất đơn giản để tích hợp loại Điều khiển này trong ứng dụng của bạn ngay cả khi không có các bản vá bên ngoài.

Mango làm điều đó với tờ rơi. Kiểm tra một ví dụ ở đây .

Tất nhiên bạn chỉ có thể tiết kiệm thời gian để tự viết mã và chỉ cần tạo bản đồ miễn phí bằng Mango.

Đây là một ví dụ về Tờ rơi hoạt động bằng cách sử dụng hai lớp WMS và tờ rơi 0,5. Nó cần một chút tinh chỉnh, ví dụ như các lớp không bị cắt trong khi xoay. Nhưng nó hoạt động khá tốt.

Xem tại đây: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

Có một cái nhìn tại WMS Split cho tờ rơi.

nó có thể với tờ rơi đây là những gì tôi đã thực hiện bản đồ vuốt với tờ rơi và 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 
        );
    }); 

Bạn có thể nên xem xét OpenLayers 3. Bạn có thể xem mã của các ví dụ bằng cách sử dụng CTRL + U: Mã cũng không quá phức tạp:

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

Tôi đang sử dụng một tiện ích mở rộng 3 và 4 Openlayers tuyệt vời của viglino. Bạn có thể tìm thấy các ví dụ về công cụ Swipe và bản đồ được đồng bộ hóa tại đây.

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

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

Kho lưu trữ GitHub của anh được đặt tại đây: https://github.com/Viglino/ol3-ext

Những ví dụ này được bao gồm trong kho GitHub.