带有两个可切换地图的传单答案

【问题标题】：Leaflet with two switchable maps带有两个可切换地图的传单
【发布时间】：2016-02-09 19:52:53
【问题描述】：

我有两种类型的地图图块，我希望能够使用带有自定义 html 控件的图层在它们之间切换。两者都将具有相同的tilesize 和我设置的其他选项。唯一的区别是一个位于 normal map 文件夹中，另一个位于 gridmap 文件夹中。

这是我用来显示一张地图的代码：

var map = L.map('map', {
                maxZoom: mapMaxZoom,
                minZoom: mapMinZoom,
                zoomControl: false,
                crs: L.CRS.MySimple
            }).setView([0, 0], 2);

            L.tileLayer('normalmap/{z}/{x}/{y}.jpg', {
                minZoom: mapMinZoom,
                maxZoom: mapMaxZoom,
                tileSize: 268,
                noWrap: true,
                tms: false,
                continuousWorld: true
            }).addTo(map);

我尝试按照传单示例：http://leafletjs.com/examples/layers-control.html 但没有运气。

有人可以向我解释如何使用自定义控件添加 2 个地图吗？

【问题讨论】：

标签： maps leaflet layer

【解决方案1】：

保留对两个切片图层的引用并根据需要添加/删除它们：

var map = L.map(...);

var tilelayer1 = L.tileLayer('map1/{z}/{x}/{y}.jpg', { ... });
var tilelayer2 = L.tileLayer('map2/{z}/{x}/{y}.jpg', { ... });

tilelayer1.addTo(map);

document.getElementById('switch-layers').addEventHandler('click', function(ev){
    if (map.hasLayer(tilelayer1)) {
        map.addLayer(tilelayer2);
        map.removeLayer(tilelayer1);
    } else {
        map.addLayer(tilelayer1);
        map.removeLayer(tilelayer2);
    }
})

请记住，您可以创建图层而不是立即将它们添加到地图中。

【讨论】：