Question

我实际上拥有一组特定国家/地区的地图图块，但不适用于其他地方。

我想问一下，如果用户移出我的maptile边界，Leaflet是否可以加载一组不同的图块（比如openstreetmap）？

让我们说用户观看我的国家，它会使用我的maptiles ...虽然让我们说用户去了澳大利亚，Leaflet会改用openstreetmap瓷砖吗？

提前致谢。

Answer 1

我自己想出来。这是怎么做的。

通过创建ID为＆＃34; map＆＃34;

的DIV，按照惯例开始

/*  Initialize map in mapViewer   */
/*  Requires a DIV with id="mapViewer"  */
var mapViewer = $('#mapViewer'); //Find mapViewer DIV
mapViewer.append('<div id="map"></div>'); //add map DIV within

现在将map1指定为完整的世界地图，将map2指定为您自己的自定义地图

//openstreetmap
var map1 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
//Your map tiles
map2 = L.tileLayer('http://yourMap/Tiles/{z}/{x}/{y}.png');

设置相当于地图大小的边界。选择地图左下角和右上角的latlng。简单的方法是使用GoogleMaps并点击这些点来获取latlng。

var southWest = L.latLng(x.xxxxxx, xxx.xxxxxx),
northEast = L.latLng(x.xxxxxx, xxx.xxxxxx),
mapBounds = L.latLngBounds(southWest, northEast);

设置地图可以缩放的最大数量，并将map1添加到#map作为基础层。

var map = L.map('map', {
    maxZoom: 18, //Set maximum amount the map can zoom
    });
    map.attributionControl.setPrefix('');//remove Leaflet attribution 
    map1.addTo(map);

现在是实现这项工作的逻辑。在每次缩放结束时，如果您在当前视图中有mapBounds，请在基础图层的顶部添加map2。否则删除map2，因为你没有看它。

额外的getZoom if loop是可选的，只有当您希望用户在他/她缩小太多时使用map1时才应包含它。

map.on('zoomend', function() { //end of zoom
    if(map.getBounds().intersects(mapBounds)){ //if view intersects bounds
        map.addLayer(map2); //add map2
        if(map.getZoom()<=11){ //if current zoom less than or equals to 11
            map.removeLayer(map2); //remove map2
        }
    }else { //else view does not intersects bounds
    map.removeLayer(map2); //remove map2
    }
});

现在，当用户拖动地图时也会这样做。这是为了确保当用户将地图拖出视图时传单不会加载map2，并在用户拖动时加载map2，直到他/她的视图在你的范围内。

再一次，额外的getZoom if loop是可选的，只有当您希望用户在他/她缩小太多时使用map1时才应包括它。

map.on('dragend', function() { //end of dragging
    if(map.getBounds().intersects(mapBounds)){ //if view intersects bounds
        map.addLayer(map2); //add map2
        if(map.getZoom()<=11){ //if current zoom less than or equals to 11  
            map.removeLayer(map2); //remove map2
        }
    }else { //else view does not intersects bounds
        map.removeLayer(map2); //remove map2
    }
});

传单在超出边界时加载不同的图块

1 个答案: