本文介紹了通過 Leaflet 使用本地圖塊的 HTML 離線地圖的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！
問題描述
有沒有辦法使用 HTML 和 JavaScript 完全離線顯示給定區域的地圖?我正在尋找一種適合移動設備(閱讀支持 Cordova)的解決方案.
Is there a way to display a map for a given area completely offline using HTML and JavaScript? I am looking for a mobile-friendly (read Cordova-enabled) solution.
推薦答案
在 這篇博文.我已經從中編譯了一個完整的代碼示例.步驟如下:
There is an elegant solution for this problem in this blog post. I have compiled a full code example from it. Here are the steps:
1.創建地圖圖塊
- 下載Mobile Atlas Creator
- 創建一個具有 OSMdroid ZIP 格式的新圖集
- 進行地圖和縮放選擇，將您的選擇添加到地圖集
- 點擊創建圖集"
- 解壓圖集文件
- 您的圖塊具有以下格式:{atlas_name}/{z}/{x}/{y}.png({z} 代表縮放")
- download Mobile Atlas Creator
- create a new atlas with OSMdroid ZIP format
- make map and zoom selection, add your selection to the atlas
- click "Create atlas"
- unzip the atlas file
- your tiles have this format: {atlas_name}/{z}/{x}/{y}.png ({z} stands for "zoom")
<強>2.設置 HTML 和 JavaScript
- 將 atlas 文件夾復制到 HTML 根目錄
- 下載leaflet.js和leaflet.css并復制到html根目錄
- 使用以下代碼創建 index.html
- 調整起始坐標并在 var mymap 定義的行上縮放
- 將 atlasName 更改為您的文件夾名稱，設置所需的 maxZoom
- copy your atlas folder to your HTML root
- download leaflet.js and leaflet.css and copy them to html root
- create index.html with the code below
- adjust starting coordinates and zoom on the line where var mymap is defined
- change atlasName to your folder name, set your desired 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>這篇關于通過 Leaflet 使用本地圖塊的 HTML 離線地圖的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！