在 Web 页面中使用离线地图

1. 所需工具&插件：

1. MapDownloader (提取码: spx6)

2. GISMysqlToLocalFile (提取码: vus6)

3. Leaflet

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

 

posted @ 2019-01-22 15:27  VictorBu  阅读(6616)  评论(1)  编辑  收藏  举报