Question

我有一个方形图像16384x16384，使用MapTiler切片成瓷砖，在Leaflet中创建6级缩放。

我在Leaflet中设置了如下图像：

var map = L.map('map', {
      maxZoom: 6,
      minZoom: 0,
    }).setView([0, 0],1);

var tilesURL = "_server/tiles/{z}/{x}/{y}.jpg";

L.tileLayer(tilesURL, {
    maxZoom: 6,
    continuousWorld: 'false',
    tms: true
}).addTo(map);

我将如何：

将此大方形图像的视图限制在中间（横向矩形）区域？
制作非方形矩形瓷砖？

此外，Leaflet可以自动将有界区域拟合到Map容器吗？

Answer 1

是。使用maxBounds option。
不知道，但你为什么要做这样的事呢？
是：方法fitBounds就是这样做的。

Answer 2

无法编辑@L。 Sanna代码，因为队列已满，但我想举一个示例，说明如何对第一个问题使用maxBounds。

我在Angular上使用Leaflet 1.7.1

注意：

maxBounds（）接受latLngBounds数据类型作为参数。在我的情况下，我使用了包含两个坐标的元组。
maxboundViscosity（）接受一个介于0.0-1.0之间的值，该值将控制将地图拖出边界时边界的牢固程度。值为1将阻止显示任何超出范围的区域。
提示：调整您的minZoom可使视图不显示任何超出范围的区域。

this.map = L.map('map', {
      maxBounds: [[-90, -260],[90, 260]],
      maxBoundsViscosity: 1,
      center: [39.8282, -98.5795],
      zoom: 5,
      zoomSnap: 0.15 // enables fractional zooms
});

祝您编程愉快！

小叶图像映射的边界视图到风景视口

2 个答案: