第一步: 首先我们到https://leafletjs.com/:
下载https://cdn.leafletjs.com/leaflet/v1.6.0/leaflet.zip
最新的稳定版本是1.6.0
第二步:下载我们所需要用到的离线地图瓦片
下载器很多,我们这里以Offline Map Maker为例: (可到http://www.allmapsoft.com/omm去下载它)
然后下载经纬度范围 (110,111,30,29)的一个缩放级别9到12的google卫星图:
下载完成后瓦片会保存在C:\offlinemaps\test目录下.
第三步: 编写我们的html文件，也就是我们要用来显示地图的页面
html内容如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="./leaflet.css"/>
<script src="./leaflet.js"></script>
<style>
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
#my-offline-leaf-map{width:100%;height:100%;}
</style>
</head>
<body>
<div id="my-offline-leaf-map"></div>
<script>
var url = './test/{z}/{x}/{y}.jpg';
var mymap = L.map('my-offline-leaf-map').setView([29.5, 110.5], 10);
L.tileLayer(url,{minZoom:9,maxZoom:12,}).addTo(mymap);
</script>
</body>
</html>
我们保存其为index.html,保存在c:\offlinemaps目录下，也就是与test目录在同一级目录下。
leaflet.css和leaflet.js两个解压缩后的文件也保存到index.html的同目录下。
第四步：双击index.html，即可看到地图成功加载！
扫一扫
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
