曾經某一刻，筆者也為下載離線地圖和載入地圖，煩惱過很久。在網上找了很多資料，都不全，不符合要求。要麼載入的百度、高德線上地圖；要麼就是沒有完整的離線地圖下載方式或者坐標體系對不上。搞了很久，也痛苦了很久，在這裡記錄一個完整的Demo。 離線地圖下載 以谷歌衛星地圖為例，下載某小區地圖。先用線條工具框 ...
曾經某一刻，筆者也為下載離線地圖和載入地圖，煩惱過很久。在網上找了很多資料，都不全，不符合要求。要麼載入的百度、高德線上地圖；要麼就是沒有完整的離線地圖下載方式或者坐標體系對不上。搞了很久，也痛苦了很久，在這裡記錄一個完整的Demo。
離線地圖下載
以谷歌衛星地圖為例，下載某小區地圖。先用線條工具框選好下載的區域，然後在左上角地圖級別勾選好要下載的級別（用於地圖縮放），設置好任務列表和地圖路徑，直接點擊下載就可以了。下載時間與網路和地圖級別有關，級別越大時間越長，顯示就越精細。
下載工具來自網路：全能電子地圖下載器 3.0
上圖中筆者選了16、17、18、19、20、21這6個級別，後來下載很久沒下完，就改成只下載16這一個級別了（95.7M），也就是說地圖在縮放的時候會出現空白。不過這不影響本次案例的代碼編寫，如果讀者朋友在工作中確實需要，請等待下載完就可以。
部署離線地圖
一般需要將下載好的離線地圖，即瓦片部署到伺服器，以便使用http訪問。這裡筆者使用的自己開發的tiles-server，讀者朋友也可自行選擇其他伺服器（只要支持http就可以）。
安裝tiles-server Linux發行版本
下載發行版本：
https://gitee.com/dev-tang/tiles-server/releases
解壓併進入伺服器目錄
tar -xvf tiles-server-x86_64-unknown-linux-gnu.tar.gz
cd tiles-server
會看到兩個目錄data和tiles。將下載好的離線地圖複製到tiles目錄下。運行tiles-server，從目錄中找到一張瓦片在瀏覽器打開，確定是否可以訪問。
./tiles-server
瓦片地圖載入成功
除了tiles-server，也可以選擇nginx、tomcat等web伺服器作為瓦片伺服器，其原理就是將下載好的瓦片地圖當作靜態文件來處理就可以了。tiles-server與其它不一樣的就是還支持MBtiles。
leaflet.js載入地圖
編寫一個html文件，在裡面寫入代碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tiles-server</title>
<link rel="stylesheet" href="http://cdn.staticfile.org/leaflet/1.5.1/leaflet.css">
<style>
html,body {
padding: 0;
margin: 0 auto;
width: 100%;
height: 100%;
min-width: 100%;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://cdn.staticfile.org/leaflet/1.5.1/leaflet.js"></script>
<script>
var map = L.map('map',{
center: [22.54746, 113.93552],
zoom: 16
});
var layer = L.tileLayer();
layer.getTileUrl = function(coords)
{
var z = coords.z;
var x = coords.x;
var y = coords.y;
return 'http://localhost:3000/tiles/googlemaps/satellite/'+z+'/'+x+'/'+y+'.jpg';
};
layer.addTo(map);
</script>
</body>
</html>
這裡需要註意zoom、center這兩個參數，如果設置不正確，會導致地圖無法顯示。center就是你下載離線地圖時的坐標位置，zoom是地圖級別。
本示例代碼已托管在Gitee，最終效果預覽和源代碼下載請訪問：https://dev-tang.com/post/2020/05/leafletjs-offline-map.html
