web-dev-qa-db-ja.com

Leafletを介したローカルタイルを含むHTMLオフラインマップ

HTMLとJavaScriptを使用して、特定のエリアの地図を完全にオフラインで表示する方法はありますか？モバイル対応（Cordova対応の読み取り）ソリューションを探しています。

htmlmapsleafletofflinetiles
10
Kozuch

このブログ投稿 には、この問題のエレガントな解決策があります。それから完全なコード例をコンパイルしました。手順は次のとおりです。

1。マップタイルの作成

  • ダウンロード Mobile Atlas Creator
  • OSMdroid Zip形式で新しいアトラスを作成します
  • 地図を作成してズーム選択し、選択をアトラスに追加します
  • [アトラスを作成]をクリックします
  • atlasファイルを解凍します
  • タイルの形式は次のとおりです：{atlas_name}/{z}/{x}/{y} .png（{z}は「ズーム」を表します）

2。 HTMLとJavaScriptをセットアップします

  • atlasフォルダーをHTMLルートにコピーします
  • leaflet.jsおよびleaflet.css をダウンロードし、htmlルートにコピーします
  • 以下のコードでindex.htmlを作成してください
    • 開始座標を調整し、var mymapが定義されている行をズームします
    • atlasNameをフォルダー名に変更し、希望するmaxZoomを設定します

3。準備万端です！お楽しみください！

  • ブラウザでindex.htmlを実行します
<!DOCTYPE html> 
<html> 
        <head> 
                <title>Leaflet offline map</title>
                <link rel="stylesheet" charset="utf-8" href="leaflet.css" />
        <script type="text/javascript" charset="utf-8" src="leaflet.js"></script>
                <script>
                        function onLoad() {

                                var mymap = L.map('mapid').setView([50.08748, 14.42132], 16);

                                L.tileLayer('atlasName/{z}/{x}/{y}.png',
                                {    maxZoom: 16  }).addTo(mymap);
                        }
                </script> 
        </head>
        <body onload="onLoad();"> 
                <div id="mapid" style="height: 500px;"></div>
        </body>
</html>
19
Kozuch

これらの手順を1つずつ実行する必要があります

  1. 特定の領域のmbtilesファイルを https://openmaptiles.org/ からダウンロードします
  2. dockerによるマップサーバーの確立
  3. leaflet.jsでWebページを実装し、コードでマップサーバーのIPアドレスを使用します。
1
nassim taghipour