Сравнивая две карты с красивым веб-интерфейсом?

16

Возможно ли в Leaflet или OpenLayers сравнить две карты с полосой, чтобы скользить между ними?

Примеры включают в себя:

Я знаю, что это возможно, но я не знаю, как это сделать. У кого-нибудь есть идеи? Примеры?

openlayers-2 web-mapping leaflet swipe Алекс Лейт
источник
1
связь с ураганом «Сэнди», кажется, сейчас мертва. Является ли это лучше ссылку , чтобы продемонстрировать идею?
Стивен Лид,
Это работает, я заменю другую ссылку @StephenLead
Алекс Лейт

Ответы:

12

То, что вы хотите сделать, обычно называется инструментом «Размах».

В OpenLayers нет встроенного инструмента или элемента управления для этого, но, к счастью, здесь есть пример: Swipe Control с Google и OSM на основе пользовательского класса.

Вам просто нужно включить этот файл JavaScript в вашем приложении.

Большинство инструментов / элементов управления Swipe, которые я видел в Интернете, основаны на простом CSS-клипе. Интегрировать этот вид контроля в ваше приложение очень просто, даже без внешних исправлений.

Девдатта Тенгше
источник
Кто-нибудь видел это с Leaflet?
Алекс Лейт
@alexgleith Посмотрите на это: groups.google.com/forum/#!msg/leaflet-js/vXU_bir6JsA/…
Devdatta Tengshe
8

Манго делает это с Leaflet. Проверьте пример здесь .

Конечно, вы можете просто сэкономить время, чтобы написать код самостоятельно и просто бесплатно создать карту с помощью Mango.

ChrisInCambo
источник
Это красивый интерфейс! Но там нет кода для повторного использования ... Я хочу что-то внутреннее для нашей организации, и у меня уже есть инфраструктура для стилизации и размещения данных.
Алекс Лейт
3

Это рабочий пример листовки с использованием двух слоев WMS и листовки 0.5. Это требует небольшой настройки, например, слои не обрезаются во время панорамирования. Но это работает довольно хорошо.

Смотрите здесь: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

Алекс Лейт
источник
Я не знаю, являетесь ли вы автором, но я дам вам два предложения: во-первых, использование события Move, а не событие MoveEnd, позволяет проводить считывание в реальном времени, а во-вторых, я чувствую, что это противоположный способ представления инструмента. используемый. Вместо перетаскивания карты следует перетаскивать ползунок.
Девдатта Тенгше
Мне на самом деле нравится, когда ползунок внизу и ход мыши. Это означает, что с помощью мыши вы все время работаете, а с помощью прикосновений вы все равно можете это сделать. Я только собрал это, это только подтверждение концепции. Я уверен, что есть много вариантов.
Алекс Лейт
2

Взгляните на WMS Split для Leaflet.

Liedman
источник
1

это возможно с листовкой. Вот что я сделал, проведя пальцем по карте с листовкой и 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
источник
У вас есть полный пример? Как настроить две карты для пролистывания?
Алекс Лейт,
вам не нужны две карты, вам нужна одна карта с двумя слоями, $ (". leaflet-layer: nth-child (3)"). css ("clip", "rect (" +ordinLeft + ") «); $ (". leaflet-layer: nth-child (2)"). css ("clip", "rect (" +ordinRight + ")");
khousuylong
Хорошо, где (2) и (3) ссылаются на слои 2 и 3 в порядке добавления к карте?
Алекс Лейт,
вышеприведенный код работает и работает, сначала нужно создать карту и добавить два слоя, затем с помощью jquery вы можете получить контейнер верхнего слоя и второго верхнего слоя. используя клип "css", чтобы соответствующим образом обрезать два контейнера
khousuylong
Итак, у меня есть наивная реализация здесь: jsfiddle.net/Ah6Bx чего не хватает?
Алекс Лейт
0

Я использую приятные 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.

wondim
источник