场景

Leaflet快速入门与加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880

上面加载显示OSM地图的使用的是网络url。

https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

如果要加载离线瓦片地图怎样显示，即将地图切割成一张张png照片，在本地加载显示这些png照片显示。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、怎样获取离线瓦片地图。

可以通过工具切割下载离线瓦片地图Offine Map Maker

Offline Map Maker

2、下载到本地后安装运行

Task name设置任务名，会在对应目录下生成osm这个目录，

Maps type选择OpenStreetMap map

From zoom 与To zoom分别设置地图的缩放层级，这里设置9到12

Longitude设置精度范围，Latitude设置纬度范围

Save to 选择要保存文件的目录

点击Start按钮

3、等待切割完成

第一层目录，这里的9代表是zoom缩放层级，第二层419代表的是x，第三层图片命名代表的是y。

然后将整个osm目录复制出来到html所在目录同级目录下

4、修改html中地图的url

'osm/{z}/{x}/{y}.png'

注意这里的没有前面斜杠。

完整代码


<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>leaflet加载OSM离线瓦片地图</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style>
</head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript">var map = L.map('map').setView([35.5, 120.5], 10);L.tileLayer('osm/{z}/{x}/{y}.png', {minZoom:9,maxZoom:12,}).addTo(map);</script>
</body></html>

Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)相关推荐

Leaflet中加载Geoserver发布的WMS服务显示地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSD ...
Vue+Leaflet实现加载Stamen显示地图
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面加载显示OSM的基础上,怎样显示s ...
Openlayers中加载Geoserver切割的EPSG:900913离线瓦片图层组
场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示: Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示_BADA ...
四个步骤实现在ESRI ArcMap中加载17.6G离线卫星地图的方法
四个步骤实现在ESRI ArcMap中加载17.6G离线卫星地图的方法 ArcMap是GIS行业的从业人员再熟悉不过的一款功能非常强大的软件,尤其是对从事地质方面工作的外业人员来讲,更是一款不可或缺的 ...
基于 GoogleMap 离线 API 源码在内网中加载卫星地图的方法
1. 概述我们之前为大家分享过在三维地球开源平台离线加载卫星影像的方法,主要包括基于桌面端的OsgEarth开源三维地球和基于Web端的Cesium开源三维地球等平台的局域网离线加载. 另外,也为大 ...
在Arcmap中加载互联网地图资源的4种方法
在Arcmap中加载互联网地图资源的4种方法前一段时间想在Arcmap中打开互联网地图中的地图数据,如影像数据.基础地图数据等,经过简单研究目前总结了四种方法,整理下与大家分享,有些内容可能理解有误 ...
iClient for Leaflet加载MVT矢量瓦片并注册鼠标事件
作者:刘大使用背景需要在前端动态更改地图样式,并高效进行鼠标交互获取要素的业务场景时,我们会采取MVT矢量瓦片来解决此类问题,但是web应用开发已经选用Leaflet地图框架的情况下怎么办呢,这时 ...
arcgis中如何导出奥维可识别的图_如何在奥维中加载ArcGIS发布的地图服务
在工作中,您可能有大量的航拍图需要在奥维中加载显示,但直接导入航拍图的数据处理量较大.对电脑硬件的要求较高.因此,您可以通过ArcGIS将航拍图发布成地图服务,在奥维中以在线自定义地图的形式加载. 1 ...
如何在OsgEarth中加载谷歌卫星地图的ArcGISServer服务教程
说明: 本实例演示如何在arcgis中发布下载好的影像瓦片数据,在osgearth中加载发布好的瓦片服务. 本实例使用软件版本:ArcGIS10.2,osg3.3.1和osgEarth2.5 VC10 ...

Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)

场景

实现

Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)相关推荐

最新文章

热门文章