멋진 웹 인터페이스로 두 개의 맵을 비교하십니까?

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이에 대한 붙박이 도구 또는 컨트롤이 없다,하지만 다행히도, 여기 예를 들어이 : 구글과 출근 제어 및 OSM 사용자 정의 클래스에 기반.

이 JavaScript 파일을 응용 프로그램에 포함 하면 됩니다.

온라인에서 본 대부분의 스 와이프 도구 / 컨트롤은 간단한 CSS 클립을 기반으로합니다. 외부 패치 없이도 이러한 종류의 Control을 응용 프로그램에 통합하는 것은 매우 간단합니다.

망고 는 리플릿과 함께합니다. 예를 확인 하십시오 .

물론 직접 코딩하는 시간을 절약하고 망고를 사용하여 무료로지도를 만들 수 있습니다.

이것은 두 개의 WMS 레이어와 전단지 0.5를 사용하는 작동하는 전단지 예제입니다. 패닝하는 동안 레이어가 잘리지 않는 등 약간의 조정이 필요합니다. 그러나 그것은 꽤 잘 작동합니다.

여기를 참조하십시오 : https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

전단지 용 WMS 분할 을 살펴보십시오 .

전단지로 가능합니다. 여기 전단지 및 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

viglino의 멋진 Openlayers 3 및 4 확장을 사용하고 있습니다. 스 와이프 도구 및 동기화 된 맵의 예는 여기에서 찾을 수 있습니다.

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 리포지토리에 포함되어 있습니다.