菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
341
0

初学leaflet(一)引入地图资源

原创
05/13 14:22
阅读数 91957

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)

 

发表评论

0/200
341 点赞
0 评论
收藏
为你推荐 换一批