javascript - 传单js如何从文件系统加载瓦片

Question

假设图 block 存储在文件系统中，如下图所示

大致看到了这个url http://build-failed.blogspot.in/2012/11/zoomable-image-with-leaflet.html

看代码

var map = L.map('map').setView([0, 0], 2);
        L.tileLayer('http://localhost/tiles/eso/0/0/0.png', {
            minZoom: 1,
            maxZoom: 6,
            attribution: 'Testing',
            tms: true
        }).addTo(map);

从上面的代码看来，加载 tile 0/0/0.png 意味着引用一个 tile。所以我的问题是 leaflet 如何加载这么多图 block ，因为这个 url http://localhost/tiles/eso/0/0/0.png引用一个瓷砖。

上面的代码对吗？

上面的代码可以加载一堆图 block 吗？

setView([0, 0], 2); 在做什么？ 0,0 和 2 是什么意思？

也告诉我下面的代码想表达什么

var map = L.map('map').setView([0, 0], 2);
        L.tileLayer('eso/{z}/{x}/{y}.jpg', {
            minZoom: 1,
            maxZoom: 6,
            attribution: 'ESO/INAF-VST/OmegaCAM',
            tms: true
        }).addTo(map);

在上面的代码中我们没有提到 z 或 y 或 x 的任何值？

在现实生活中我需要遵循什么方法？我是否需要指定值或叶将在运行时为 z、y 和 x 提供值？

请告诉我。谢谢

Answer 1

1) 上面的代码是错误的。对其进行测试，您将始终看到相同的重复 0/0/0 磁贴。

2) 上面的代码不能加载一堆图 block ，或者实际上它创建了一堆具有相同图像的图 block 。

3) setView([0, 0], 2) 将 map View 以纬度 0 度、经度 0 度坐标点为中心，缩放级别为 2(缩放级别 0 为整个星球在 1 个图 block 中)。

4) 引用Leaflet documentation about raster Tile Layer :

{z} — zoom level, {x} and {y} — tile coordinates.

L.tileLayer 的第一个参数是 urlTemplate。 {z}、{x} 和 {y} 文本被 Leaflet 替换为目标图 block 坐标。例如，您可以转到 OpenStreetMap并右键单击任何图 block (基础 map 上的任意位置)，选择“打开图像”(或“查看图像”)，浏览器将仅显示特定图 block 及其确切的 URL，其中 z、x 和 y 已由传单指向那个特定的图 block 。

后台系统是tile排列成Quadtree结构，假设缩放级别 0 对应于单个图 block 中的整个 map 拟合(即 0/0/0)。然后对于下一个更高的缩放级别，每个图 block 被分割为 4 个子图 block 。等等。

因此，在您在问题中展示的示例文件夹结构中，图 block 1/0/0 和 1/0/1 是图 block 0/0/0 的左半部分。瓦片 1/0/0 是左上角，瓦片 1/0/1 是左下角。

同样，所有这些都由 Leaflet 自动管理，前提是您的图 block 遵循此四叉树排列(无论是在文件夹中还是在其文件名中，例如 Zoomify)。