比较具有良好网络界面的两个地图？

在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文件。

我在网上看到的大多数滑动工具/控件都基于简单的CSS剪辑。即使没有外部补丁，将这种控件集成到您的应用程序中也非常简单。

芒果用小叶做它。在此处查看示例。

当然，您可以节省时间自己编写代码，并使用Mango免费创建地图。

这是一个使用两个WMS图层和0.5版传单的有效Leaflet示例。它确实需要一些调整，例如平移时不会剪切图层。但它运作良好。

看到这里：https : //github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

看一看WMS Split for 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 
        );
    }); 

您可能应该研究OpenLayers3。您可以使用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存储库中。