是否有一种方法可以使用HTML和JavaScript完全离线显示给定区域的地图？我正在寻找一种移动友好(读取Cordova(解决方案。
在此博客文章中有一个优雅的解决方案。我从中编写了一个完整的代码示例。这是：
1。创建地图图块
- 下载移动地图集
- 使用 OSMDROID ZIP 格式创建一个新的地图集
- 进行地图和缩放选择，将您的选择添加到Atlas
- 单击"创建地图集"
- 解压缩地图集文件
- 您的瓷砖具有以下格式： {atlas_name}/{z}/{x}/{y} .png ({z}代表" Zoom"(
2。设置HTML和JavaScript
- 将您的Atlas文件夹复制到您的HTML root
- 下载feflet.js and flaflet.css，然后将它们复制到html root
- 使用以下代码创建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>您应该一一做这些步骤
- 从https://openmaptiles.org/ 下载特定区域的MBTILES文件
- 由Docker建立地图服务器
- 通过flaflet.js实现网页，并在您的代码中使用地图服务器IP地址。