传单 - 自定义地图无法加载 - 文件大小错误？

Question

"OpenStreetMaps" 之类的东西很好用！一切正常，Zoom 和 Marker 工作，小代码...

但是当我添加自己的 Url 时，Tiles 没有加载！所以我认为我的图像尺寸有问题？像素？传单教程就说"add a Map Url"

看看我的代码，有一个带有示例的通知，我认为这不是 "coding" 错误，更像是文件错误。我希望有人有想法:-)

Answer 1

您正在使用 http://www.hizi.xyz/Map/{z}/{x}/{y}.png 作为基础 URL，但您的板块实际上位于 http://www.hizi.xyz/Map/tiles/{z}/{x}/{y}.png。

在您初始化地图 (11) 的缩放级别，无论如何您将无法看到您的自定义图块，因此您应该在地图选项中设置 maxZoom: 5。此外，您的图块仅覆盖地图的西北象限（从北 0-85 度和西 0-180 度），因此您需要通过设置 maxBounds 选项来限制在这些范围内平移，或者（如果您确实希望地图是全局的）通过将每个 {z} 目录的索引降低 1 来修改目录结构。以下代码应该可以按原样加载您的地图并防止用户超出边界您的地图图块：

var southWest = L.latLng(0, -180),
    northEast = L.latLng(85, 0),
    bounds = L.latLngBounds(southWest, northEast);

var map = L.map('map', {maxZoom: 5, maxBounds: bounds}).setView([42.5, -90], 3);

L.tileLayer('http://www.hizi.xyz/Map/tiles/{z}/{x}/{y}.png').addTo(map);

如果出于美观原因，您希望地图不在世界边界处环绕，您可能还想在 tileLayer 选项中设置 noWrap: true，即：

L.tileLayer('http://www.hizi.xyz/Map/tiles/{z}/{x}/{y}.png', {noWrap: true}).addTo(map);

这里有一个示例 fiddle 表明它有效：

http://jsfiddle.net/nathansnider/6qeL29sm/

传单 - 自定义地图无法加载 - 文件大小错误？

Leaflet - Custom Map does not load - Wrong File Size?

customization

leaflet