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

Question

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

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

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 个地图吗？

Answer 1

保留对您的图块层的引用，并add/remove它们是适当的：

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);
    }
})

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

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

Leaflet with two switchable maps

maps

layer

leaflet