1. 首頁
  2. 問答
  3. 通過小冊子使用本地圖塊的HTML離線地圖

通過小冊子使用本地圖塊的HTML離線地圖

2017-04-25 24 views

回答

5

在this blog post中存在針對此問題的優雅解決方案。我已經編譯完整的代碼示例。以下是具體步驟：

1.創建地圖圖塊

  • 下載Mobile Atlas Creator
  • 創建一個新的地圖集OSMdroid ZIP格式
  • 將地圖和縮放選擇，添加您的選擇地圖集
  • 單擊「創建地圖集」
  • 解壓縮地圖集文件
    • 個
  • 您的瓷磚有這樣的格式：{atlas_name}/{Z}/{X}/{Y} png格式（{Z}表示 「縮放」）

2.設置HTML和JavaScript

  • 您的圖集文件夾複製到你的HTML根
  • 下載leaflet.js and leaflet.css並將其複製到HTML根
  • 創建的index.html下面代碼
    • 調整起點座標和放大在哪裏變種MyMap中定義
    • 變化atlasName你的文件夾名稱線，設置所需的MAXZOOM

3.您已經預訂！請享用！在瀏覽器中

  • 運行的index.html

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Leaflet offline map</title> 
 
\t \t <link rel="stylesheet" charset="utf-8" href="leaflet.css" /> 
 
\t <script type="text/javascript" charset="utf-8" src="leaflet.js"></script> 
 
\t \t <script> 
 
\t \t \t function onLoad() { 
 

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

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

來源

2017-04-25 11:04:39 Kozuch

相關問題

 相關問題