一个传单图像的边界视图映射到一个景观视窗

Bounding view of a Leaflet image map to a landscape viewport

本文关键字：一个 映射 视图 景观 图像 单图像 边界      更新时间：2023-09-26

我有一个方形图像16384x16384，已经使用MapTiler切割成瓷砖，在传单中创建6个缩放级别。

我已经设置了传单中的图像如下:

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. 生产一套非正方形矩形瓷砖?

另外，传单可以自动适应有界区域到地图容器吗?

  1. 是的。使用maxBounds选项
    2. 不知道，但你为什么要做这样的事?
  2. 是:方法fitBounds做这个

无法编辑@L。Sanna代码，因为队列是满的，但我想贡献一个关于如何使用maxBounds的第一个问题的例子。

我使用的是Angular的传单1.7.1

注意:

    maxBounds()接受latlnbounds数据类型作为参数。在我的情况下，我使用一个元组保存两个坐标。
  • 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
});

编码快乐!

相关文章：