กำลังเปรียบเทียบสองแผนที่กับเว็บอินเตอร์เฟสที่ดี?

เป็นไปได้ใน Leaflet หรือ OpenLayers เพื่อเปรียบเทียบสองแผนที่กับแถบเพื่อเลื่อนระหว่างทั้งสอง?

ตัวอย่างรวมถึง:

• 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/ (ไม่ใช่แผนที่)

ฉันรู้ว่ามันเป็นไปได้ฉันไม่รู้ว่าจะทำอย่างไร ใครมีความคิดเห็นบ้าง ตัวอย่าง?

สิ่งที่คุณต้องการทำมักเรียกว่าเครื่องมือ 'ปัดนิ้ว'

ไม่มีเครื่องมือหรือตัวควบคุม inbuilt สำหรับสิ่งนี้ใน OpenLayers แต่โชคดีที่มีตัวอย่างที่นี่: รูดการควบคุมด้วย Google และ OSM ตามคลาสที่กำหนดเอง

คุณต้องรวมไฟล์ JavaScript นี้ไว้ในแอปพลิเคชันของคุณ

ส่วนใหญ่เครื่องมือรูด / ควบคุมที่ฉันได้เห็นออนไลน์จะขึ้นอยู่กับคลิป CSS ง่าย ๆ มันง่ายมากที่จะรวมการควบคุมประเภทนี้ไว้ในแอปพลิเคชันของคุณแม้ว่าจะไม่มีการแก้ไขภายนอก

มะม่วงทำกับใบปลิว ตรวจสอบการออกตัวอย่างที่นี่

แน่นอนคุณสามารถประหยัดเวลาในการเขียนโค้ดด้วยตัวคุณเองและสร้างแผนที่ได้ฟรีโดยใช้ Mango

นี่เป็นตัวอย่างแผ่นพับที่ใช้งานได้โดยใช้สองชั้น WMS และแผ่นพับ 0.5 มันต้องมีการปรับแต่งเล็กน้อยเช่นเลเยอร์จะไม่ถูกเล็มในขณะแพนกล้อง แต่มันใช้งานได้ดีทีเดียว

ดูที่นี่: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

ดูที่WMS Splitสำหรับ Leaflet

มันเป็นไปได้กับแผ่นพับ นี่คือสิ่งที่ฉันทำแผนที่กวาดด้วยแผ่นพับและ 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 
        );
    }); 

คุณควรดูใน OpenLayers 3 คุณสามารถดูตัวอย่างรหัสโดยใช้ CTRL + U: รหัสดูไม่ซับซ้อนเกินไป:

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

ฉันใช้ส่วนขยาย Openlayers 3 และ 4 ที่ดีโดย viglino คุณสามารถหาตัวอย่างของเครื่องมือการปัดและแผนที่ที่ซิงโครไนซ์ได้ที่นี่

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

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

ที่เก็บ GitHub ของเขาตั้งอยู่ที่นี่: https://github.com/Viglino/ol3-ext

ตัวอย่างเหล่านั้นรวมอยู่ในที่เก็บ GitHub