leaflet教程一_leaflet基础入门教程示例

Leaflet 是一个为建设交互性好适用于移动设备地图，而开发的现代的、开源的 JavaScript 库。代码仅有 33 KB，但它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的哲学思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务，数据提供，数据格式，地理编码，路线和路线搜索，地图控件和交互等类型的插件共有140多个。
LeafLet快速入门教程本教程将一步一步的指导你如何使用Leaflet加载地图、使用标记,折线和弹出窗口,处理事件。
引入CSS文件

<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
1

引用JavaScript

<script src="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
1

页面添加一个div作为地图的容器

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

确定map容器的高度

map { height: 180px; }
1

设置地图设置地图中心和缩放级别

var map = L.map('map').setView([51.505, -0.09], 13);
1

添加图层

L.TileLayer.Kitten = L.TileLayer.extend({
    getTileUrl: function(coords) {
        var i = Math.ceil( Math.random() * 4 );
        return "http://placekitten.com/256/256?image=" + i;
    },
    getAttribution: function() {
        return "<a href='http://placekitten.com/attribution.html'>PlaceKitten</a>"
    }
});
L.tileLayer.kitten = function() {
    return new L.TileLayer.Kitten();
}
L.tileLayer.kitten().addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13

添加标注、圆形、多边形

var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);
1
2
3
4
5
6
7

添加多边形

var polygon = L.polygon([
     [51.509, -0.08],
     [51.503, -0.06],
     [51.51, -0.047]
]).addTo(map);
1
2
3
4
5

为覆盖物标注、圆、多边形添加弹出气泡

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
1
2
3

处理事件

function onMapClick(e) {
   alert("You clicked the map at " + e.latlng);
}
map.on('click', onMapClick);
1
2
3
4

添加地图

var map = L.map('map').setView([51.505, -0.09], 13);
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);
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();
1
2
3
4
5
6
7

官网：https://leafletjs.com/index.html