通过Leaflet的HTML离线地图和本地图块 [英] HTML offline map with local tiles via Leaflet
本文介绍了通过Leaflet的HTML离线地图和本地图块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以使用HTML和JavaScript完全脱机显示给定区域的地图?我正在寻找一种对移动设备友好的(已读取Cordova的功能)解决方案.
Is there a way to display a map for a given area completely offline using HTML and JavaScript? I am looking for a mobile-friendly (read Cordova-enabled) solution.
推荐答案
There is an elegant solution for this problem in this blog post. I have compiled a full code example from it. Here are the steps:
1.创建地图图块
- 下载 Mobile Atlas Creator
- 使用 OSMdroid ZIP 格式创建新的地图集
- 制作地图和缩放选择，将选择添加到地图集中
- 点击创建图集"
- 解压缩地图集文件
- 您的图块具有以下格式: {atlas_name}/{z}/{x}/{y} .png ({z}代表缩放")
- download Mobile Atlas Creator
- create a new atlas with OSMdroid ZIP format
- make map and zoom selection, add your selection to the atlas
- click "Create atlas"
- unzip the atlas file
- your tiles have this format: {atlas_name}/{z}/{x}/{y}.png ({z} stands for "zoom")
2.设置HTML和JavaScript
- 将地图集文件夹复制到HTML根目录
- 下载 leaflet.js和leaflet.css 并将其复制到html根
- 使用以下代码创建index.html
- 调整起始坐标并在定义了 var mymap 的行上缩放
- 将atlasName更改为您的文件夹名称，设置所需的maxZoom
- copy your atlas folder to your HTML root
- download leaflet.js and leaflet.css and copy them to html root
- create index.html with the code below
- adjust starting coordinates and zoom on the line where var mymap is defined
- change atlasName to your folder name, set your desired 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>这篇关于通过Leaflet的HTML离线地图和本地图块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
