在 Web 页面中使用离线地图

2019-01-22

所需工具&插件：

MapDownloader (提取码: spx6)
GISMysqlToLocalFile (提取码: vus6)
Leaflet

操作

参考：java离线地图web GIS制作下载好所需地图瓦片，本文以百度地图/深圳为例
使用 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>

注：本文演示是将瓦片文件与代码文件放在一起，实际使用中最好自建瓦片地图服务。

在线演示

参考：

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true