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