初学leaflet（一）引入地图资源

程序员文章站 2022-06-18 23:47:05

Leaflet是一个插件可以引入地图资源，提供方法插件等可以对地图进行交互。准备：就像jQuery一样使用一个插件需要引入这个插件的文件。首先在标签中添加Css样式,然后引入Leaflet的js文件.这里具体看官方文档创建一个显示地图的容器，并设置高度地图初始化：设置打开地图的 ......

leaflet是一个插件可以引入地图资源，提供方法插件等可以对地图进行交互。

准备：

就像jquery一样使用一个插件需要引入这个插件的文件。首先在<head>标签中添加css样式,然后引入leaflet的js文件.这里具体看官方文档

创建一个显示地图的容器，并设置高度

地图初始化：

设置打开地图的地理位置，显示级别，坐标系等。

var mymap = l.map('mapid').setview([51.505, -0.09], 13);

在leaflet的 l 对象就像jquery的 $ 一样暴露给window供我们调用里面的方法。

使用l.map() 函数构造器实例化一个地图对象。

用法：

l.map(id,{

　　//可选参数设定，常用的参数有

　　center：[ ] / /初始化地图的地理中心

　　zoom：number / /初始化地图的缩放

})

setview方法：设定地图心事的地理中心和缩放级别。上面的代码也可以写成

var mymap = l.map('mapid',{
    center:[51.505,-0.09],
    zoom:13
})

加载地图源

leaflet官方推荐使用mapbox地图。mapbox的矢量地图是瓦片地图，需要调用打开瓦片图层的接口 l.tilelayer

上面说到瓦片地图，什么是瓦片地图？

一幅精确到街道级别的世界地图图片宽度为数以百万计的像素，由于这些数据太大了，从而导致无法一次下载并且在内存里也无法一次都hold住。而浏览器并行获取和显示多张小图片，比获取和显示一张大图片要高效的多，就有了地图瓦片来提高效率。由许多小的正方形的图片组成，这些小图片称作瓦片。瓦片的大小一般为256*256像素，这些瓦片一个挨一个并列放置以组成一张很大的看似无缝的地图。

初学leaflet（一）引入地图资源

例如百度地图，当放大时就可以看到还没加载到的方块空缺。下图是百度地图加载的图片请求。

初学leaflet（一）引入地图资源

调用l.tilelayer(utl,{

　　//添加可选参数

　　例如：

　　attribution:'hahaha'

}).addto(mymap)

l.tilelayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">openstreetmap</a> contributors'
}).addto(map)

上面代码关键在于请求地图url.上面加载的应该是openstreetmap。还可以加载mapbox地图(需要去官网注册账户然后申请)，高德地图，谷歌地图，也可以使用在线地图（arcgis online），具体url怎么回事，去哪里得到url我也是搞不懂是怎么回事，如果有知道的告诉告诉弟弟。

除了以上常见的地图提供商的地图，也可以使用自己的地图，例如图片。

l.imageoverlay(imageurl,imagebounds).addto(mymap)

视频格式也可以最为地图，使用

l.iamgeoverlay(videourl,videobounds).addto(mymap)

上一篇： margin的两个有趣现象：margin合并和margin塌陷

下一篇：互联网发展的三个阶段

初学leaflet（一）引入地图资源

当页面引入百度地图时，谷歌浏览器的控制台会弹出一个警告信息