1. 所需工具&插件：

1. MapDownloader (提取碼: spx6)

2. 操作：

1. 參考：java離線地圖web GIS制作下載好所需地圖瓦片，本文以百度地圖/深圳為例

2. 使用 Leaflet 加載地圖瓦片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web 版離線地圖測試頁面</title>
    
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />    
    
</head>
<body>

    <div id="map" style="width:90%;height:600px;margin-top:30px;text-align:center;margin:0 auto;">
    </div>

    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    
    <script type="text/javascript">
        window.onload=function () {
            var map = L.map('map').setView([22.56414255434805,114.153442382813], 11);
            L.tileLayer('./img/788865972/{z}/{x}/{y}.png'
                , {
                    minZoom: 10,
                    maxZoom: 12,
                    attribution: '<b style="color:#dddddd">百度地圖</b>'
                })
            .addTo(map);
            
        };    
    </script>
    
</body>
</html>

注：本文演示是將瓦片文件與代碼文件放在一起，實際使用中最好自建瓦片地圖服務。

在線演示

參考：

1. java離線地圖web GIS制作

2. chenwuwen/OffineMap

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Web GIS 離線地圖 java離線地圖web GIS制作 web百度地圖離線開發 web頁面實現地圖展示，可縮放，標點並點擊---使用高德地圖百度離線地圖使用如何使用android百度地圖離線地圖 Web版百度地圖加載離線瓦片開發者在頁面中使用中國地圖時候的注意事項 All In One 在vue中使用騰訊地圖 vue中使用echarts地圖