传单js如何从文件系统

Question

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

粗略地看到了这个网址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。所以我的问题是传单如何加载这么多的图块，因为这个网址http://localhost/tiles/eso/0/0/0.png引用了一个图块。

上面的代码是对的吗？

上面的代码可以加载一堆瓷砖吗？

setView([0, 0], 2);在做什么？ 0,0 and 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指定value或leaf将提供者值？

请告诉我。感谢

Answer 1

1）上面的代码是错误的。测试它，你会看到相同的重复0/0/0瓦片。

2）上面的代码无法加载一堆瓷砖，或者实际上它会创建一堆具有相同图像的瓷砖。

3）setView([0, 0], 2)使地图视图居中于坐标点纬度0度，经度0度，缩放级别2（缩放级别0为1个图块中的整个行星）。

4）参考Leaflet documentation about raster Tile Layer：

  

{z} - 缩放级别，{x}和{y} - 平铺坐标。

L.tileLayer的第一个参数是 urlTemplate 。 {4}，{z}和{x}文本由目标图块坐标替换为Leaflet。例如，您可以转到OpenStreetMap并右键单击任何图块（基本地图上的任意位置），选择“打开图像”（或“查看图像”），浏览器将仅显示特定图块URL，其中z，x和y已由Leaflet调整为指向该特定图块。

背景系统是图块以Quadtree结构排列，假设缩放级别0对应于单个图块（即0/0/0）中的整个地图拟合。然后，对于下一个更高的缩放级别，每个图块被细分为4个子图块。等等。

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

同样，所有这些都由Leaflet自动管理，前提是您的磁贴遵循此Quadtree排列（无论是在文件夹中还是在文件名中，如Zoomify）。

Answer 2

ghyb对1,2和3的回答是完全正确的，你可能想投票回答。

  

...还告诉我下面的代码试图说什么

关于你的第二个问题，ghybs也是完全正确的 - 我将从需要更简单介绍的人的角度添加它。除了深入了解TileLayer代码之外，您还可以通过Google搜索＆＃39; slippy map＆＃39;获得许多介绍级概念概述。可以在the openstreetmap documentation here中找到一个很好的流行的技术介绍，可以在地图坐标中找到它们，以及如何从地图坐标中导出它们，以及几种语言的代码示例。这些肯定会帮助您绕过TileLayer代码。

  

我需要在现实生活中遵循什么方法？我需要指定吗？   value或leaf将在运行时提供z，y和x的值？

Leaflet和其他库根据您在地图上移动和缩放的位置插入ghybs所描述的x，y，z的值。它们生成值，并向相应的文件夹发出请求。在现实生活中，您只需要具有正确图像的文件夹（由生成平铺图像到这些文件夹结构的程序生成） - 在您的计算机上，在服务器上 - 或者，更常见的是，使用Web地图提供x / y / z请求的图像的服务器。示例包括geoserver，mapserver，mapnik以及许多在线服务，如谷歌地图，openstreetmap，bing等。