leaflet加载离线瓦片地图

首先我们要明白瓦片地图的请求原理。

其实瓦片地图并不是什么特殊的文件，就是最普通的png图片。之所以为地图，就是带有了地理坐标。

打开network，查看其请求的的url就能明白其请求的原理了。

主要在于最后三位，含义依次是14级的13528行，6250列。（或者13528列，6250行。）

14就是下图中的level，而行列号对应每一级level里面的唯一一个瓦片（图片），那么地图框架为我们完成的就是，在对应地图层级，请求对应范围内的瓦片，而这个协议规则一般是通用的谷歌标准（也有其他标准，看框架是否支持），比兔第9级中的第一个不会叫9-0-0，而可能是9-1-1（真实可能不是）。

因此我们在部署离线地图的时候，只需要按规则组织好瓦片地图，再发布服务即可。

瓦片地图数据源的获取：以太乐地图为例。

本文以node为服务器发布，可以看到其组织方式。

那么实际在网页中network进行请求的时候，服务器的作用那就是静态文件的呈递了，按理说，直接放到文件夹下应该也可以。（未进行尝试）

然后就可以加载了

最后放一张加载的地图

leaflet加载离线瓦片地图相关推荐

QGIS加载离线瓦片地图
1.瓦片地图准备利用<全能地图下载软件>下载瓦片地图: 选择下载地图种类. 选择下载区域. 选择下载的级数. 下载完后 2.TMS.XML文件新建编辑编辑完后放在瓦片地图根目录 3.Q ...
leaflet加载离线地图教程以及下载离线地图瓦片工具
关于源码以及教程侵权请联系作者删除最近在做一个leaflet加载离线地图的东西,结果在网上找到一份相关的教程以及源码源码链接:https://pan.baidu.com/s/1cGew8PAU-L ...
如何采用离线的 Google Map API 加载离线谷歌地图的方法
原文转自:http://www.arceyes.com/bbs/thread-18476-1-1.html 如何采用离线的 Google Map API 加载离线谷歌地图的方法一.下载示例数据这里 ...
OpenLayers3加载离线百度地图(百度迁徙底图)
关于openlayers加载离线百度地图的东东好几年前就做过了,不过当时做的是2.0版本的. 自从好久没有去做可视化分析之后,也很少接触这些前端的JS的东西了.最近想实现一个东西的时候,才想起需要用到 ...
Leaflet加载百度瓦片到WGS84坐标系下
Leaflet加载百度瓦片到WGS84坐标系下百度技术真的很好,但还是忍不住吐槽,bd09坐标系.bd09mc投影.百度地图瓦片,真是诡异的存在. 下面的代码能实现,将leaflet中加载的百度地图 ...
leaflet加载腾讯地图 (路网、影像、地形) 示例教程034
第034个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet加载腾讯地图,这里使用了control.layers进行切换3种不同的百腾讯底图. 直接复制下面的 vue+leafle ...
leaflet 加载腾讯地图
地图切片,又叫地图瓦片,,个人比较喜欢叫切片. leaflet 默认的地图切片规则是,切片原点在左上角(即[85.05112877980659,-180]),而腾讯地图的使用切片规则是,其他不变,原点 ...
百度离线使用百度地图离线JavaScript API加载本地瓦片地图 -java教程
最近笔者几篇文章介绍了改百度离线的文章. 关联文章的地址 1.首先取获百度 JavaScript API 首先用浏览器开打 http://api.map.baidu.com/api?v=1.3 如下图 ...
leaflet加载离线OSM(OpenStreetMap)
转载: https://www.cnblogs.com/RainyBear/p/6011832.html leaflet作为广为应用的开源地图操作的API,是非常受欢迎,轻量级的代码让使用者更容易操作 ...

leaflet加载离线瓦片地图

leaflet加载离线瓦片地图相关推荐

最新文章

热门文章