2

我有一个 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);

我怎么会：

  1. 将这个大方形图像的视图限制在中间（横向矩形）区域？
  2. 制作一组非正方形的矩形瓷砖？

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

4

2 回答 2

4
  1. 是的。使用maxBounds 选项。
  2. 不知道，但你为什么要做这样的事情？
  3. 是的：fitBounds方法可以做到这一点。
于 2013-06-19T19:11:46.823 回答
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
});

快乐编码！

于 2020-09-08T22:18:13.467 回答