leaflet入门之加载地图
目录
leaflet入门之加载地图
本节包括地图初始化，加载图层，添加要素(marker、面、圆形),点击marker弹出信息框popup
创建html，引入必须的文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>加载地图</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script> <style> #mapid {height: 800px;width:600px;}//地图容器样式 </style> </head> <body> <div id="mapid"></div>//地图容器 </body> </html>
初始化地图
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);//L为leaflet全局
</script>
初始化图层并添加到地图中
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'your.mapbox.access.token'//由于地图服务是mapbox的，需要申请token key，https://www.mapbox.com/account/
}).addTo(mymap);
此时打开html就能看到地图加载成功
添加marker，circle,polygon
var marker = L.marker([51.5, -0.09]).addTo(mymap);//marker
var circle = L.circle([51.508, -0.11], {//circle
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500//半径
}).addTo(mymap);
var polygon = L.polygon([//polygon
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap);
添加弹出框popup
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();//绑定默认打开，支持自定义html
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
