类似于" OpenStreetMaps"工作良好! 一切都好,Zoom和Marker都可以,小代码......
但是当我添加自己的Url时,Tiles没有加载! 所以我认为我的图像尺寸有问题?像素? 宣传单教程只需说"添加地图网址"
在我的代码中查看有一个示例通知, 我认为这不是一个编码"错误,更像是文件错误。 我希望有人有一个想法: - )
答案 0 :(得分:1)
您使用http://www.hizi.xyz/Map/{z}/{x}/{y}.png
作为基本网址,但您的图块实际上位于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);
这是一个示例小提琴,显示它正常工作: