从 mbutil 生成的图块不使用 leafletjs 呈现

Question

首先，我使用 TileMill 创建了一个地图，然后将其导出为“.mbtiles”，然后使用 mbutil 我生成了该文件的图块 (.png)。

现在，我想通过 leafletjs 使用这些图块，但 returns 出现错误：

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

这里可能有什么问题？

这是我的代码：

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

从 mbutil 生成的图块不使用 leafletjs 呈现

Tiles generated from mbutil does not render using leafletjs

javascript

mapping

leaflet

tilemill

mbtiles