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

Question

假设我有一个非地理图像而不是普通的 map 。比方说，例如X射线，MRI扫描或显微镜图像，我想使用传单，这样我就可以放大，缩小并在一些预定点上放置一些标记。

我已经阅读了Non-geographical maps的示例，但本例演示了使用单个图像而不是平铺图像。我宁愿使用图块，因为我的图像会很大。还有其他适合我上述情况的情况吗？我正在研究rastercoords，但尚未确定是否适用于此栅格文件，仅适用于纯 map 。

Answer 1

这是我的经验，介绍了如何从PDFs或高分辨率图像或non-slippy maps等来源创建滑动 map 。无论如何，我都想写一篇文章，所以让这个答案成为尚未撰写的文章的草图。

举一个例子，这是带有 vector 图形的PDF map of European inland waterways，这是其中的slippy map。

基本上，最合理的方法是制作一个标准的图块集，然后让Leaflet展示它。即为每个缩放级别生成大小为256x256的图块。
您不希望将大图像用作图层，因为这对于浏览器来说会很沉重。您也不想在浏览器中调整大小，这会导致质量下降。

幸运的是，使用ImageMagick创建图块非常容易。这就是我的方法。

确定您想要多少个缩放级别

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

渲染或调整源图像的大小

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

等级0上的

256像素

等级1上的

512像素

等级2上的

1024像素

等级3上的

2048像素

等级4上的

4096像素

等。

注意:此步骤的结果是巨大的图像。级别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扫描的情况)，请选择缩放最近的源图像。

使用已经平铺的图像

在某些情况下，源图像已经被切成小块。这在您想滑动的“旧” map 客户端中很典型。 This is an example，图块称为 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

裁剪和追加操作的结果是 map 的高分辨率图像。如上所述，将其调整为每个级别。

调整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。假设 slice 文件相对于HTML文件位于 ../tiles目录中，则很简单:

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

如果要设置适当的初始视点，请缩放/移动到所需位置，在开发工具中打开JavaScript控制台，然后输入:

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

然后在初始化 map 时使用打印的参数:

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