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

Question

假设我有一个非地理图像而不是通常的地图.让我们说例如X射线,MRI扫描或显微镜图像,我想使用传单,所以我可以放大,缩小并在一些预定点上放置一些标记.

我已经阅读了非地理地图中的示例,但是这个案例演示了使用一个单独的图像而不是平铺.我更喜欢瓷砖,因为我的图像会相当大.还有其他适合我上面描述的案例吗？我正在研究rastercoords但我还没有明确表示这是否适用于任何光栅文件只适用于普通地图.

Answer 1

以下是我如何使用PDF或高分辨率图像或非滑动地图等来源创建滑动地图的经验.无论如何,我想写一篇关于此的文章,所以让这个答案成为尚未撰写的文章的草图.

举个例子,这是一张带有矢量图形的欧洲内陆水道的PDF地图,这里有一张滑动的地图.

基本上,最合理的方法是制作一个标准的瓷砖集,让Leaflet展示它.即为每个缩放级别生成大小为256x256的图块.
你不希望巨大的图像作为层,因为浏览器会很重.您也不希望在浏览器中进行任何大小调整,这将导致质量不佳.

幸运的是,使用ImageMagick创建切片非常容易.我就是这样做的.

决定你想要多少个缩放级别

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

渲染或调整源图像的大小

接下来,为每个缩放级别渲染或调整图像大小.您必须生成一个尺寸等于的图像:

• 256 0级像素
• 512 第1级像素
• 1024 2级像素
• 2048 3级像素
• 4096 4级像素
• 等等.

注意:这一步的结果是巨大的图像.5级大约10 MB,6级大约20 MB,7级大约40 MB.小心尝试在"普通"工具中打开这些图像.

调整正常高分辨率图像的大小

如果源是一个高清晰度的图像简单地使用convert -resize具有两种x*256*或*256*x:

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
...

要确定裁剪参数将垂直和水平相邻的图块加载到图形编辑器中,请尝试匹配它们并检查偏移坐标.

然后,在裁剪切片时,将它们附加到大图像:

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时,我更喜欢调整大小density.要计算每个缩放级别的密度(这是Windows命令,请相应地修改Linux):

identify -precision 16 -format "%%[fx:((256/max(w,h))*72)]\n%%[fx:((512/max(w,h))*72)]\n%%[fx:((1024/max(w,h))*72)]\n%%[fx:((2048/max(w,h))*72)]\n%%[fx:((4096/max(w,h))*72)]" source.pdf

这给你的东西:

21.89073634204276
43.78147268408551
87.56294536817103
175.1258907363421
350.2517814726841

(4096/max(w,h))*72表达的神奇之处很简单:(目标大小/源大小)*标准DPI.

密度渲染图像:

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_0_0.png
• tiles/1_0_0.png
• tiles/1_0_1.png
• tiles/1_1_0.png
• tiles/1_1_1.png
• 等等

这是一组256x256大小的静态预渲染图块.

传单

现在您只需配置Leaflet.假设tile文件位于../tiles相对于HTML文件的目录中,它只是:

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);

即使平移或缩放,标记也将保持在相同位置.

以下是其中一个项目示例:

• https://github.com/highsource/unece-maps

Answer 2

libvips的一项操作可以在一个命令中为单张制作滑溜的地图图块。

例如，使用这张欧洲内陆水道的PDF地图（谢谢@lexicore！），您可以输入：

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

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

它速度快，几乎不需要内存。详细信息随文件格式的不同而有所不同，但是对于许多格式，它可以并行解码输入，构造所有金字塔层，并写入输出图块，而无需将整个输入图像加载到其中。记忆。我经常在一台普通的笔记本电脑上渲染超过300,000 x 300,000像素的金字塔。

它可以执行一些有用的文件类型，以及常用的tiff，PNG，JPG等，包括SVG，FITS，DICOM和OpenSlide之类的文件。它也可以使金字塔成为Deepzoom和zoomify。

Windows主机的一个不错的功能是能够将图块集写入zip文件而不是文件系统中。Windows创建文件的速度相当慢-使用大金字塔和小图块，您仅在文件创建中就可以花费将近75％的CPU时间。改为写一个zip文件，您可能会看到3倍的加速：

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

另外，当然，zip更容易上传到服务器。

libvips手册中有一章介绍了dzsave并显示了所有选项。