0

まず、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);
4

1 に答える 1

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);
于 2016-07-27T07:13:25.573 に答える