javascript - 从 mbutil 生成的图块不使用 Leafletjs 渲染

Question

首先，我使用 TileMill 创建了一个地图，然后将其导出为“.mbtiles”，然后使用 mbutil 我生成了该文件的图块（.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 工具来直观地了解丢失的图块在 Google 地图上的显示位置。

• 从Leafletjs.com 文档中，您可能必须添加该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);