使用传单显示非地理平铺图像答案

【问题标题】：Use leaflet to display non-geographical tiled images使用传单显示非地理平铺图像
【发布时间】：2022-12-20 23:56:15
【问题描述】：

传单文档提供了一个有见地的tutorial来处理非地理图像，但它基于imageOverlay。

const imageSize = {
  width: 1000,
  height: 1000,
}
const maxZoom = 10
const minZoom = 1
const toLatLng = (x, y) => L.CRS.Simple.pointToLatLng(new L.Point(x, y), maxZoom);
const bounds = [
  toLatLng(0, 0),
  toLatLng(imageSize.width, imageSize.height),
];

var viewer = L.map('viewer', {
  crs: L.CRS.Simple,
  maxBounds: bounds,
  minZoom,
  maxZoom,
  zoomSnap: 0,
}).fitBounds(bounds);
L.imageOverlay('https://leafletjs.com/examples/crs-simple/uqm_map_full.png', bounds).addTo(viewer);

#viewer {
  width: 100vw;
  height: 100vh;
  background: none;
}

<link href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<div id="viewer"/>

例如，我们如何将此示例与 tileLayer 转置以显示基于 Deep Zoom Image 的平铺图像。

【问题讨论】：

标签： javascript leaflet tiled deepzoom large-image

【解决方案1】：

这里有一个使用来自 OpenSeadragon 的 Duomo 数据集的示例。

const source = {
  "Image": {
    "xmlns": "http://schemas.microsoft.com/deepzoom/2008",
    "Url": "https://openseadragon.github.io/example-images/duomo/duomo_files",
    "Format": "jpg",
    "Overlap": 1,
    "TileSize": 254,
    "Size": {
      "Width":  13920,
      "Height": 10200,
    },
  },
};

const maxZoom = Math.ceil(Math.log2(Math.max(source.Image.Size.Width, source.Image.Size.Height)));
const minZoom = Math.ceil(Math.log2(source.Image.TileSize + 2 * source.Image.Overlap));
const toLatLng = (x, y) => L.CRS.Simple.pointToLatLng(new L.Point(x, y), maxZoom);
const bounds = [
  toLatLng(0, 0),
  toLatLng(source.Image.Size.Width, source.Image.Size.Height),
];

const viewer = L.map("viewer", {
  crs: L.CRS.Simple,
  maxBounds: bounds,
  minZoom,
  maxZoom,
  zoomSnap: 0,
}).fitBounds(bounds);
L.tileLayer(`${source.Image.Url}/{z}/{x}_{y}.${source.Image.Format}`, {
  noWrap: true,  // do not query tiles outside the bounds
  bounds: bounds,
}).addTo(viewer);

#viewer {
  width: 100vw;
  height: 100vh;
  background: none;
}

img.leaflet-tile {
  height: auto !important;
  width: auto !important;
}

<link href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<div id="viewer"/>

根据 Deep Zoom Image documentation，大尺度图像由金字塔表示。金字塔的每一个分辨率都相当于一个等级。级别从 1x1 像素分辨率开始计算为级别 0，然后每个后续级别的分辨率加倍。因此我们可以从级别计算分辨率：resolution = 2 ^ level并推断显示特定分辨率所需的级别：level = ceil(log2(resolution))。

在我们的示例中，我们使用完整图像分辨率来计算最大缩放级别，使用拼贴分辨率来计算最小缩放级别。

对于图像的边缘，Deep Zoom Image 返回具有不同尺寸的非正方形图块。这就是为什么我们需要覆盖 leaflet-tile 类属性以防止传单扭曲图像。

注意：Duomo 数据集似乎包含大小无效的非边缘图块（255 像素而不是 256 像素），这就是为什么某些缩放级别会出现白线的原因。但我们不希望这种情况发生在只有有效图块大小的数据集上。

【讨论】：