通过Leaflet使用本地磁贴的HTML离线地图

Question

通过Leaflet使用本地磁贴的HTML离线地图

Koz*_*uch 10 html maps offline tiles leaflet

有没有办法使用HTML和JavaScript完全脱机显示给定区域的地图？我正在寻找适合移动设备(阅读Cordova的解决方案).

Answer 1

Koz*_*uch 20

在这篇博客文章中有一个优雅的解决方案.我已经编译了一个完整的代码示例.以下是步骤:

1.创建地图图块

下载Mobile Atlas Creator
使用OSMdroid ZIP格式创建新的地图集
制作地图和缩放选择,将您的选择添加到地图集
点击"创建地图集"
解压缩atlas文件
您的图块具有以下格式:{atlas_name}/{z}/{x}/{y} .png({z}代表"缩放")

2.设置HTML和JavaScript

将atlas文件夹复制到HTML根目录
下载leaflet.js和leaflet.css并将它们复制到html root
使用以下代码创建index.html
- 调整起始坐标并缩放定义var mymap的行
- 将atlasName更改为您的文件夹名称,设置所需的maxZoom

你们都准备好了!请享用!

在浏览器中运行index.html

<!DOCTYPE html> 
<html> 
	<head> 
		<title>Leaflet offline map</title>
		<link rel="stylesheet" charset="utf-8" href="leaflet.css" />
	<script type="text/javascript" charset="utf-8" src="leaflet.js"></script>
		<script>
			function onLoad() {

				var mymap = L.map('mapid').setView([50.08748, 14.42132], 16);

				L.tileLayer('atlasName/{z}/{x}/{y}.png',
				{    maxZoom: 16  }).addTo(mymap);
			}
		</script>	
	</head>
	<body onload="onLoad();"> 
		<div id="mapid" style="height: 500px;"></div>
	</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，8 月前
查看次数：	15095 次
最近记录：	6 年，7 月前