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

2023-09-23 10:20:33

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像素，这些瓦片一个挨一个并列放置以组成一张很大的看似无缝的地图。

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

调用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)

码农公寓

相关文章