从mbutil生成的tile不使用leafletjs进行渲染

Question

首先，我使用TileMill创建了一个地图，然后将其导出为＆＃34; .mbtiles＆＃34;然后使用mbutil我生成了该文件的tile（.png）。

现在，我想使用leafletjs使用这些tile，但它返回一个错误：

当我检查文件时，它不匹配。

这里有什么不对？

这是我的代码：

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为您提供有关Google地图上缺少的图块显示位置的视觉效果。

• 从Leafletjs.com documentation，您可能需要添加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);