從mbutil生成的瓷磚不使用leafletjs渲染

Question

首先，我使用TileMill創建地圖，然後將其導出爲「.mbtiles」，然後使用該文件的mbutil I生成的瓷磚（.png）導出。

現在，我想用leafletjs使用那些磚，但它返回一個錯誤：

當我檢查文件，它不匹配。

這裏有什麼問題？

這裏是我的代碼：

var map = L.map('map').setView([7.038218,9.017317], 13); 
L.tileLayer(
    'cbr90013/{z}/{x}/{y}.png', { 
     minZoom: 13, 
     maxZoom: 19, 
     attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
    }).addTo(map); 

Answer 1

幾件事情來嘗試

• 檢查的setView你的座標爲（），他們應該是LatLong。

• 在調用mbutil之後的輸出文件夾中，應該有一個名爲metadata.json的文件，這可能很有用。檢查它是否列出scheme（xyz或tms）。這會告訴你瓷磚的Y方向

• 你也可以使用這個Maptiler.com tool來給你一個視覺，告訴你在谷歌地圖上缺失的瓷磚的位置。您可能需要添加tms屬性。默認值爲false，因爲您沒有它，所以您可以添加它並將其設置爲true。

您的LatLng座標與您缺少的圖塊（例如13/4979/6931.png）不匹配，因此可能存在不匹配。

---

var map = L.map('map').setView([7.038218,9.017317], 13); 
L.tileLayer(
     'cbr90013/{z}/{x}/{y}.png', { 
     tms: true 
     minZoom: 13, 
     maxZoom: 19, 
     attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
    }).addTo(map);