|
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./{z}/{x}/{y}.png', {
attribution: '© <a href="https://www./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)
|
|
|
