使用leaflet加载本地离线地图瓦片的一个最简单地例子

netying

已于 2024-08-29 20:38:27 修改

阅读量1.3w

点赞数 3

CC 4.0 BY-SA版权

文章标签： leaflet 离线地图

于 2020-03-29 22:19:08 首次发布

本文链接：https://blog.csdn.net/netying/article/details/105187665

第一步: 首先我们到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>