インターネットへのオンラインアクセスが不可能な場合は、（オフライン）HTML5アプリケーションでOSMファイルを使用してOSMマップを表示します。オフラインOSMマップファイルを表示します。提案：Js.libraryのMBタイルファイル
Mapsforge/GeofabrikなどのオフラインOSMマップファイルからロードされたオフラインHtml5アプリケーションのOSMタイルに、どのように表示するかの例を挙げることができますか？
例：openstreetmap.orgを使用して、私は最初にマップの小さな部分をエクスポートしました。このダウンロードしたOSMマップをHtml5オフラインWebアプリケーションでどのように表示できますか？
リーフレットを使用して地図を表示するにはどうすればよいですか？デフォルトでリーフレットはラスターイメージで動作します。通常、これらのタイルはインターネット経由で取得されます。
オフラインファイルを使用して地図を表示するにはどうすればよいですか？例えば。インターネットに接続できないためですか？階層構造で
ローカルタイル。たとえば、そのようなスクリプトを使用して。欠点は、これがコンパクトなフォーマットではないことです。これは、いくつかのpreparational作業を必要とする：
L.tileLayer（ '/マップタイル/ {Z}/map_ {X} _ {Y}の.png'、{ 帰属： '地図データを© ???' }）。addTo（map）;
ラスタータイルのMBTilesファイル。このようなファイルは、Leaflet.TileLayer.MBTiles.jsプラグインを介して表示できます。スクリプトの例を以下に示します。
VectorGridは、MBTilesファイルからベクターデータを読み取るコンパクトな候補です。このintructionも参照してください。
Mapbox GL JSオフライン。その場合は、ローカルにベクターファイルを配置します。 demoを参照してください。
mobac.sourceforge.net下記のように@JaakL。
広告オプション3：OpenMapTiles.comは、ベクター形式の非常にコンパクトなMBTilesファイルを生成します。したがって、この解決策はオプション3に便利です。
広告オプション2：MBTILES/Rasterファイルがある場合、次のコードは正しく動作します。したがって、上記のMBTilesベクタファイルでは動作しません。
パッケージをnpmで約1分でインストールした後、デモを実行しました。デモは 'node_modules \ Leaflet.TileLayer.MBTiles \ demo'フォルダの下にあります。正常に動作します。
私はアムステルダム地図を表示しようとしました。ああ、私はこれを（初心者として）働かせることができませんでした。私はPOCのためにこれを調べています。
アムステルダム地図が表示されるようにこのソースを更新するにはどうすればよいですか？ これを行うと+50の賞金が得られます。
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/[email protected]/js/sql.js"></script>
<script src="../Leaflet.TileLayer.MBTiles.js"></script>
<meta charset="utf-8">
<title>Leaflet.TileLayer.MBTiles demo</title>
<style>
#map {
width:600px;
height:400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = new L.Map('map');
map.setView(new L.LatLng(52.361367, 4.923083), 18);
var mb = L.tileLayer.mbTiles('./amsterdam_netherlands.mbtiles', {
minZoom: 16,
maxZoom: 20
}).addTo(map);
mb.on('databaseloaded', function(ev) {
console.info('MBTiles DB loaded', ev);
});
mb.on('databaseerror', function(ev) {
console.info('MBTiles DB error', ev);
});
</script>
</body>
</html>
mbtilesファイルをローカルに提供する必要があると思います。次をご覧ください：https://github.com/chelm/mbtiles-server –
次に、私が含まれているスニペットはうまくいくはずです。 –
私はLeaflet.TileLayer.MBTilesプラグインはラスタータイルを必要としますが、OpenMapTilesウェブサイトはベクタータイルを提供すると考えています。 – ghybs
はい、これはリーフレットまたは他のマッピングライブラリで行うことができます。あなたがしなければならないのは、OSMファイルをタイルのセットに変換してから、タイルレイヤーをローカルに保存されたファイル（相対パス）に向けることだけです。可能であれば（私はOSMのルールに精通していません）、あなたのエリアのタイルのセットをダウンロードすることができます。
OSMファイルをタイルに変換する必要がある場合は、Maperativeとそのtile generatorのようなツールを試してみてください。
このリンクに記載されている方法を試すこともできます。 http://wiki.openstreetmap.org/wiki/Creating_your_own_tiles
タイルを作成したら、プロパティディレクトリ構造を設定し、タイルレイヤーをポイントします。
はここでリーフレットを使った例です：
は// the path may be different depending on how you have the tiles saved.
// you will have to define the options object
new L.tileLayer('/tiles/{z}/{x}/{y}.png', {}).addTo(map);
は、ファイルパスは相対的なものを覚えておいてください、とあなたはおそらく制約がカスタムタイルの正しいセットを構成していることを確認する必要があります。
質問に対する回答は「[はい]（http://www.strcat.de/questions-with-yes-or-no-answers.html）」です。より具体的にしてください。何を試しましたか？あなたはどのソリューションを検討しましたか？ – IvanSanchez
私はまだ良い解決策を見つけることができませんでした。 Mapletgeファイルでleafletjsを使用するなど、標準的な解決策が可能であることを願っています。 解決策はありますか？ – tjm1706