Javascript 如何为来自非地理来源的传单制作平铺图像金字塔

假设我有一张非地理图像，而不是普通的地图。比如说一张x光片，核磁共振成像扫描或者显微镜图像，我想用传单，这样我可以放大，缩小，在一些预定的点上做一些标记

---

我已经阅读了中的示例，但本例演示了使用单个图像而不是平铺。我更喜欢瓷砖，因为我的图像会相当大。请问还有其他适合我上面描述的箱子的吗？我正在研究，但我还没有明确说明这是否适用于任何光栅文件，因为这只适用于普通地图。

以下是我的经验，介绍如何从源（如或高分辨率图像）创建滑动地图。无论如何，我想写一篇关于这个的文章，所以让这个答案成为一篇尚未撰写的文章的草图

给你一个例子，这里有一个矢量图形，这里有一个

基本上，最合理的方法是制作一套标准瓷砖，并让传单展示。即，为每个缩放级别生成大小为256x256的瓷砖。
你不需要像层一样的巨大图像，因为这对浏览器来说太重了。您也不希望在浏览器中进行任何大小调整，这将导致质量低下

幸运的是，创建瓷砖非常容易。我就是这样做的

决定需要多少缩放级别 首先，确定需要多少缩放级别。这取决于地图，根据我的经验，你最多需要5-7个缩放级别。让我们以5个缩放级别为例。生产的级别越多，对硬件的要求就越高。下面的方法可能不适用于超过7-8个缩放级别

渲染或调整源图像的大小 接下来，为每个缩放级别渲染或调整图像大小。您必须生成其中一个尺寸等于以下尺寸的图像：

• 256

  0级像素

• 512

  级别1上的像素

• 1024

  2级像素

• 2048

  第3级像素

• 4096

  第4级像素
• 等等

注意：这一步的结果是巨大的图像。第5级大约为10MB，第6级大约为20MB，第7级大约为40MB。请小心尝试在“普通”工具中打开这些图像

调整普通高分辨率图像的大小 如果您的源是高分辨率图像，只需使用

x*256*

或

*256*x

的

convert-resize

：

convert images\source.jpg -resize   x256 images\0.jpg
convert images\source.jpg -resize   x512 images\1.jpg
convert images\source.jpg -resize  x1024 images\2.jpg
convert images\source.jpg -resize  x2048 images\3.jpg
convert images\source.jpg -resize  x4096 images\4.jpg
convert images\source.jpg -resize  x8192 images\5.jpg

如果您有几个不同缩放级别的缩放图像（我想MRI扫描也是如此），请选择最近的缩放源图像

使用已平铺的图像 在某些情况下，源图像已被分块剪切。这在“旧”地图客户机中很常见，您希望将其简化，瓷砖称为

vk-X-Y.jpg

，切割时有一些重叠。在这种情况下，首先必须裁剪图像：

magick data\vk-0-0.jpg  -crop 522x373+0x0 images\t-0-0.jpg
magick data\vk-1-0.jpg  -crop 522x373+0x0 images\t-1-0.jpg
magick data\vk-2-0.jpg  -crop 522x373+0x0 images\t-2-0.jpg
magick data\vk-3-0.jpg  -crop 522x373+0x0 images\t-3-0.jpg
magick data\vk-4-0.jpg  -crop 522x373+0x0 images\t-4-0.jpg
magick data\vk-5-0.jpg  -crop 650x373+0x0 images\t-5-0.jpg
...

convert -verbose -density 21.89073634204276 source.pdf        images\0.png
convert -verbose -density 43.78147268408551 source.pdf        images\1.png
convert -verbose -density 87.56294536817103 source.pdf        images\2.png
convert -verbose -density 175.1258907363421 source.pdf        images\3.png
convert -verbose -density 350.2517814726841 source.pdf        images\4.png

要计算裁剪参数，请将垂直和水平相邻的瓷砖加载到图形编辑器中，尝试匹配它们并检查偏移坐标

然后，在剪切平铺时，将其附加到大图像：

magick images\t-0-0.jpg images\t-1-0.jpg images\t-2-0.jpg images\t-3-0.jpg images\t-4-0.jpg images\t-5-0.jpg +append images\t-0.jpg
...
magick images\t-0.jpg images\t-1.jpg images\t-2.jpg images\t-3.jpg images\t-4.jpg images\t-5.jpg images\t-6.jpg images\t-7.jpg images\t-8.jpg images\t-9.jpg images\t-10.jpg -append images\t.jpg

此裁剪和附加操作的结果是地图的大高分辨率图像。如上所述，将其调整到每个级别

调整PDF的大小 渲染PDF时，我更喜欢使用密度调整大小。要计算每个缩放级别的密度（这是Windows命令，请相应地修改Linux）：

这会给你一些类似的东西：

21.89073634204276
43.78147268408551
87.56294536817103
175.1258907363421
350.2517814726841

（4096/max（w，h））*72表达式的魔力很简单：（目标大小/源大小）*标准DPI

让密度渲染图像：

magick data\vk-0-0.jpg  -crop 522x373+0x0 images\t-0-0.jpg
magick data\vk-1-0.jpg  -crop 522x373+0x0 images\t-1-0.jpg
magick data\vk-2-0.jpg  -crop 522x373+0x0 images\t-2-0.jpg
magick data\vk-3-0.jpg  -crop 522x373+0x0 images\t-3-0.jpg
magick data\vk-4-0.jpg  -crop 522x373+0x0 images\t-4-0.jpg
magick data\vk-5-0.jpg  -crop 650x373+0x0 images\t-5-0.jpg
...

convert -verbose -density 21.89073634204276 source.pdf        images\0.png
convert -verbose -density 43.78147268408551 source.pdf        images\1.png
convert -verbose -density 87.56294536817103 source.pdf        images\2.png
convert -verbose -density 175.1258907363421 source.pdf        images\3.png
convert -verbose -density 350.2517814726841 source.pdf        images\4.png

在更高的层次上，这可能需要很多时间

在平铺中剪切水平图像
此时，每个层应该有一个图像。现在我们可以将它们切割成瓷砖：

convert -verbose images\0.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles\0_%%[filename:tile].png"
convert -verbose images\1.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles\1_%%[filename:tile].png"
convert -verbose images\2.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles\2_%%[filename:tile].png"
convert -verbose images\3.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles\3_%%[filename:tile].png"
convert -verbose images\4.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles\4_%%[filename:tile].png"
convert -verbose images\5.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles\5_%%[filename:tile].png"

这将生成如下文件：


tiles/0\u 0\u 0.png
tiles/1\u 0\u 0.png
tiles/1\u 0\u 1.png
tiles/1_1_0.png
tiles/1_1_1.png
等等

这是一组256x256大小的静态预渲染瓷砖

配置传单
现在您只需配置传单。假设tile文件位于相对于HTML文件的
。/tiles
目录中，那么它只是：

L.tileLayer('../tiles/{z}_{x}_{y}.png', {
    maxZoom: 5,
    noWrap: true,                     
    attribution: 'Some Attribution'
}).addTo(map);

如果要设置正确的初始视点，请缩放/移动到所需的位置，在开发工具中打开JavaScript控制台并键入：

map.getCenter();
map.getZoom();

然后在初始化地图时使用打印的参数：

var map = L.map('map').setView([-26.3525, -65.0390], 3);

要添加标记，请执行以下操作：

L.marker([-26.3525, -65.0390], {title: "Hi there!"}).addTo(map);

即使在平移或缩放时，标记仍将保持在相同的位置


以下是其中一个项目的示例：



有一个操作，可以在一个命令中为传单创建一个滑动贴图平铺集

例如，通过这个（thank you@lexicore！），您可以输入：

vips dzsave European_inland_waterways_-_2012.pdf[dpi=600] xxx --layout google

它将创建一个名为
xxx
的目录，其中包含您的所有互动程序，随时可以上传到您的服务器。大约需要15秒（无论如何，在这台笔记本电脑上）

它速度快，需要很少的内存。文件格式的细节略有不同，但对于许多格式，它可以解码输入、构造所有金字塔层并写入输出分片，所有这些都是并行的，并且不需要将整个输入图像加载到内存中。我经常在一台普通笔记本电脑上渲染超过300000 x 300000像素的金字塔

它可以做一些有用的文件类型以及通常的tiff、PNG、JPG等，包括SVG、FITS、DICOM和OpenSlide。它还可以为deepzoom和zoomify制作金字塔

Windows主机的一个很好的特性是能够将tileset写入zip文件而不是文件系统。Windows在文件创建方面相当慢——使用大金字塔和小平铺，您可以在文件创建过程中花费几乎75%的CPU时间。改为写入zip文件，您可能会看到3倍的加速：

vips dzsave huge.tif xxx.zip --layout google