leaflet 集成百度地图小例子(1)
一.首先你要实现一个地图的小例子以便于理解leaflet如何实现的
1.leaflet CSS文件标题部分的文档:
|
1
|
<link"stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> |
2.传单JavaScript文件:
|
1
|
<script"https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> |
3.放一个div元素与特定的id,你想要你的地图:
|
1
|
<div"mapid"></div> |
4.确保定义的映射容器有一个高度,例如通过设置CSS（必须定义一个高度，因为无法获取指定的id名，因此这个库并没有进行高度的处理设置，自己必须设置高度，如同div默认是没有高度的一样）:
|
1
|
#mapid height: -webkit-fill-available;} |
- 现在您已经准备好初始化地图,用它做一些东西。
让我们创建一个地图的中心沈阳某个地点漂亮Mapbox街道瓷砖。首先我们将初始化和设置它的视图映射到我们选择的地理坐标和缩放级别（里面的 mapid 必须和设置的id保持一致）:
|
1
|
var mymap'mapid').setView([41.80408, |
在默认情况下(我们没有通过任何选项创建地图实例)时,所有鼠标和触摸交互启用了在地图上,它有放大和归因控制。（这些都可以通过js来控制，目前只是入门，有深入了解的可以自己摸索）
注意setView调用返回地图对象——大多数leaflet方法这样的行为时不返回一个显式的值,它允许方便类jQuery方法控制。
接下来,我们将添加一个砖层来增加我们的地图,在这种情况下这是一个Mapbox街道砖层。创建一个砖层通常涉及瓷砖图像的模板设置URL(在Mapbox得到你),归因的文本和的最大缩放级别层:
|
1
2
3
4
5
6
|
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', attribution: 'Map, maxZoom: id: 'your.mapbox.project.id', accessToken: 'your.mapbox.public.access.token'}).addTo(mymap); |
其中‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}’为你获取瓷砖,也就是地图图片的地址,第一次请求后会保存到浏览器中.
其中 attribution为地图又下角的链接
L.TileLayer()：通过给定URL模板和具有选项的对象来实例化一个切片图层。
见下面的例子
L.tileLayer(‘http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png’, {foo: ‘bar’})
Options（选项）
minZoom：最小级别数
maxZoom：最大级别数
tileSize：切片尺寸（宽度和高度的像素值，假设切片是正方形的）
subdomains：服务的子域。可以传递一个字符串（其中每一个字母都是一个子域名称）或是一个字符串数组。
errorTileUrl：图片的URL给出加载错误的位置。
attribution：用来进行属性控制的字符串，描述了图层数据。
这样就实现了一个地图,如何切换图层,下节描述.
转载自：https://blog.csdn.net/sgy86/article/details/78614634
