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

2023-03-18前端开发问题

本文介绍了通过 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

将 atlas 文件夹复制到 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 离线地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
  
  The End

layui 实现实时刷新一个外部的div

主页面上显示了一个合计，在删除和增加的时候需要更改这个总套数的值： //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后，...

2024-11-14 前端开发问题

156

layui要如何改变时间日历布局大小？

问题描述我想改变layui时间日历布局大小，这个要怎么操作呢？解决办法可以用css样式对时间日历进行重新布局，具体代码如下： !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...

2024-10-24 前端开发问题

271

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。语法： $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...

2024-10-18 前端开发问题

125

相关推荐

layui 实现实时刷新一个外部的div

layui要如何改变时间日历布局大小？

jQuery怎么动态向页面添加代码？

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时

如何制作 TextGeometry 多线?如何将它放在一个正方形内，以便它像 html 文本一样包裹在 div 内?

合并两个编译步骤的 source maps

热门文章

热门精品源码

最新VIP资源