本文实现Leaflet的最基本的功能，在web中加载地图。实现步骤如下:
1.引入Leaflet文件
在<head>中加入如下代码：
<link rel="stylesheet" href="./static/css/leaflet.css">
<script src="./static/js/leaflet.js"></script>
2.创建地图显示div
在<body>中加入如下代码：
<div id="map-container"></div>
需要给这个div外加一个样式
<style>
#map-container {
width: 600px;
height: 400px;
}
</style>
3.显示地图
在<script>中加入如下代码：
var m = L.map('map-container').setView([36.52,120.31], 7);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(m);
说明
上述加载的是Mapobx的图层，关于MapBox的内容会在后文中继续介绍。
- 本文固定链接: https://www.chtfs.com/3990/
- 转载请注明: acer 于 测绘途夫 发表
这个作者貌似有点懒，什么都没有留下。