通过 Leaflet 使用本地图块的 HTML 离线地图答案

【问题标题】：HTML offline map with local tiles via Leaflet通过 Leaflet 使用本地图块的 HTML 离线地图
【发布时间】：2017-09-22 08:44:55
【问题描述】：

有没有办法使用 HTML 和 JavaScript 完全离线显示给定区域的地图？我正在寻找一种适合移动设备（阅读支持 Cordova）的解决方案。

【问题讨论】：

标签： html maps leaflet offline tiles

【解决方案1】：

this blog post 中有一个优雅的解决方案可以解决这个问题。我已经从中编译了一个完整的代码示例。步骤如下：

1.创建地图图块

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

2。设置 HTML 和 JavaScript

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

3.你都准备好了！享受吧！

在浏览器中运行 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>

【讨论】：

【解决方案2】：

你应该一步一步完成这些步骤

从https://openmaptiles.org/下载指定区域的mbtiles文件
通过Docker建立地图服务器
通过 Leaflet.js 实现网页，并在您的代码中使用地图服务器 IP 地址。

【讨论】：

"通过 Docker 建立地图服务器" LOL