leaflet：入门基础（一）

前言

    登陆官网，下载leaflet，其实也就是一个js包

    点击download

    选择第一个，下载下来后解压就好了

    创建一个Web项目，添加一个html文件

    把解压后的 leaflet.css 和 leaflet.js 添加到项目里

    在head标签里添加下面两句

<link rel="stylesheet" href="./leaflet.css"/>
<script src="./leaflet.js"></script>
1
2

    不想下载leaflet到本地的话，也可以用连网资源

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
1
2

    在body标签里添加

<div id="mapid"></div>
1

    在style标签里对其样式进行设置

# mapid { 
	height: 600px; 
}
1
2
3

    在script标签添加语句

var mymap = L.map('mapid').setView([51.505, -0.09], 13); 
      
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 18
}).addTo(mymap);
1
2
3
4
5

    注：一些 map box提供的底图需要去注册账号，登录后创建一个access token。当然还有许多其他的底图就不需要注册账号就可以使用 [可以参考下一篇]（下图与上述代码中使用的底图不是同一个

    添加一个比例尺

var scale = L.control.scale({
	maxWidth: 200,
	metric: true,
	imperial: false
}).addTo(mymap);
1
2
3
4
5

    效果

绘制图形

    1. 圆形

var circle = L.circle([51.508, -0.11], {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0.5,
   radius: 500
}).addTo(mymap);
1
2
3
4
5
6

     2. 标注（