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

第一步: 首先我们到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,即可看到地图成功加载!

 

  • 2
    点赞
  • 6
    评论
  • 15
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值