700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > leaflet加载离线瓦片地图

leaflet加载离线瓦片地图

时间:2021-11-15 18:07:24

相关推荐

leaflet加载离线瓦片地图

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

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

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

主要在于最后三位,含义依次是14级的13528行,6250列。(或者13528列,6250行。)

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

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

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

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

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

然后就可以加载了

var url = 'http://localhost:3000/tiles/{z}/{x}/{y}.png';

//初始化 地图,这个view要设置到离线地图的范围,不然什么都没有

var leafletMap = L.map('mapDiv').setView([39.2, 117.25], 13);

//将图层加载到地图上,并设置最大的聚焦还有map样式

L.tileLayer(url, {

maxZoom: 18,

id: 'mapbox.streets'

}).addTo(leafletMap);

最后放一张加载的地图

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。