leaflet.js加載谷歌離線地圖

時間 2020-05-28

標籤 leaflet.js leaflet 加載谷歌離線地圖欄目 JavaScript 简体版

原文原文鏈接

曾經某一刻，筆者也爲下載離線地圖和加載地圖，煩惱過好久。在網上找了不少資料，都不全，不符合要求。要麼加載的百度、高德在線地圖；要麼就是沒有完整的離線地圖下載方式或者座標體系對不上。搞了好久，也痛苦了好久，在這裏記錄一個完整的Demo。css

離線地圖下載

以谷歌衛星地圖爲例，下載某小區地圖。先用線條工具框選好下載的區域，而後在左上角地圖級別勾選好要下載的級別（用於地圖縮放），設置好任務列表和地圖路徑，直接點擊下載就能夠了。下載時間與網絡和地圖級別有關，級別越大時間越長，顯示就越精細。html

下載工具來自網絡：全能電子地圖下載器 3.0linux

上圖中筆者選了1六、1七、1八、1九、20、21這6個級別，後來下載好久沒下完，就改爲只下載16這一個級別了（95.7M），也就是說地圖在縮放的時候會出現空白。不過這不影響本次案例的代碼編寫，若是讀者朋友在工做中確實須要，請等待下載完就能夠。nginx

部署離線地圖

通常須要將下載好的離線地圖，即瓦片部署到服務器，以便使用http訪問。這裏筆者使用的本身開發的tiles-server，讀者朋友也可自行選擇其餘服務器（只要支持http就能夠）。git

安裝tiles-server Linux發行版本web

下載發行版本：
https://gitee.com/dev-tang/tiles-server/releasesshell

解壓並進入服務器目錄瀏覽器

tar -xvf tiles-server-x86_64-unknown-linux-gnu.tar.gz
cd tiles-server

會看到兩個目錄data和tiles。將下載好的離線地圖複製到tiles目錄下。運行tiles-server，從目錄中找到一張瓦片在瀏覽器打開，肯定是否能夠訪問。tomcat

./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