2つのマップを素敵なWebインターフェイスと比較しますか？

LeafletまたはOpenLayersでは、2つのマップをバーで比較して、2つのマップをスライドさせることはできますか？

例は次のとおりです。

• 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ファイルをアプリケーションに含めるだけです。

私がオンラインで見たほとんどのスワイプツール/コントロールは、単純なCSSクリップに基づいています。外部パッチがなくても、この種のコントロールをアプリケーションに統合するのは非常に簡単です。

マンゴーはリーフレットでそれを行います。こちらの例をご覧ください。

もちろん、自分でコーディングする時間を節約し、Mangoを使用して無料でマップを作成することもできます。

これは、2つの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リポジトリに含まれています。