Question

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

Answer 1

在this blog post中有针对此问题的优雅解决方案。我已经编译了一个完整的代码示例。以下是步骤：

<强> 1。创建地图图块

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

<强> 2。设置HTML和JavaScript

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

第3。你们都准备好了！享受！

在浏览器中运行index.html

＆＃13;

<!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>

＆＃13;

Answer 2

您应该一步一步地完成这些步骤

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

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

2 个答案: