Порівнюючи дві карти з приємним веб-інтерфейсом?

Чи можливо в 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/ (не карта)

Я знаю, що це можливо, але я не знаю, як це зробити. Хтось мав якісь ідеї? Приклади?

Те, що ви хочете зробити, зазвичай називають інструментом "Проведення пальцем".

Для цього в OpenLayers не існує вбудованого інструменту чи елемента контролю, але, на щастя, тут є приклад: проведіть пальцем управління за допомогою Google та OSM на основі користувацького класу.

Вам просто потрібно включити цей файл JavaScript у вашу заявку.

Більшість інструментів / елементів управління Swipe, які я бачив в Інтернеті, засновані на простому 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. Ви можете знайти приклади інструмента Swipe та синхронізованих карт тут.

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.