Leaflet - 自定義地圖無法加載 - 文件大小錯誤？

Question

像「OpenStreetMaps」的東西很好！ 一切都好，縮放和標記工程，小碼...

但是，當我添加我自己的網址，瓷磚得不到加載！ 所以我認爲我的圖像大小有問題？像素？ 傳單教程只是說「添加地圖網址」

看在我的代碼有一個與實例通知書， 我覺得這是不是一個「編碼」錯誤，更像是一個文件錯誤。 我希望有人有一個想法:-)

http://hizi.xyz/Map/

Answer 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); 

如果出於美學原因，你要保持地圖從世界的邊界包裹，你可能還需要設置noWrap: true在tileLayer選項，即：

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

下面是一個例子小提琴，顯示它的工作：

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