Question

我有两种类型的地图图块，我希望能够使用带有自定义html控件的图层在它们之间切换。两者都将具有相同的tileize和我设置的其他选项。唯一的区别是一个位于普通的地图文件夹中，另一个位于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张地图吗？

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

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

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

1 个答案: