Leaflet介绍_leaflet简介

一个用于适用于移动端交互地图的开源JavaScript库

简介

Leaflet是用于适用于移动端交互地图的主要的开源JavaScript库。JS库的大小为38k左右，但是拥有大部分开发者需要的全部地图功能。
Leaflet保持着简单、性能和实用性的设计思想。它可以在所有主要的桌面和移动端平台上高效的运转，可以扩展插件，它有一个漂亮的、易用的和文档清晰的API，还有一个简单、易读的源代码。

简单实例

首先我们在HTML文件中创建一个’map’的<div>，加上我们选择的地图图块，然后在弹出窗口添加一些带有文本的的标记。

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.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

快速开始

通过一步一步的引导，快速的从Leaflet基础开始，包括设置一个Leaflet地图，并配合一些标记、折线、弹窗和处理事件。

1.准备HTML页面
1.1.在head区域引入Leaflet CSS文件

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
  integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
  crossorigin=""/>
1
2
3

1.2.在CSS引入后引入Leaflet JavaScript文件

<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
  integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
  crossorigin=""></script>
1
2
3
4

1.3.在地图的位置设置一个带有确定id的<div>元素

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

1.4.确定地图区域有一个明确的高度，可以通过CSS来定义

#mapid { height: 180px; }
1

2.设置地图
* 一个用漂亮的Mapbox Streets的地图图块创建的伦敦中心的地图，首先需要初始化地图，并且设置视图用选择的地理坐标和缩放级别。

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

2.1.默认情况下，地图上的所有鼠标和触摸的交互控件都是激活，可行的，并且有缩放和属性控件。
注意：setView方法可以返回地图对象——大部分的Leaflet方法不返回明确的数值时就想这样，允许类似于jQuery的方便的方法链。
2.2.下一步，在地图上添加一个图块层，此处它是一个Mapbox Streets的图块层。创建一个图块层通常需要涉及到为图块层设置URL模板，图块层的属性文本和缩放的最大级别。此案例中，运用Mapbox中的经典地图的 mapbox.streets 图块（为了从Mapbox中运用图块，必须请求访问令牌）。

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
   attribution: 'Map data &copy; <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>',
   maxZoom: 18,
   id: 'mapbox.streets',
   accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
1
2
3
4
5
6

2.3值得注意的是，Leaflet是独立提供的，这就意味着它不会执行提供者为地图图块的特定选择。可以试图用mapbox.satellite代替mapbox.streets，并且观察发生什么。并且，Leaflet甚至不包含一个提供者特定的代码行，所以如果需要，可以自由使用其他提供者的代码。
3.标记、画圆和多边形
3.1.除了图层之外，还可以简单的在地图上添加其他的元素，包括标记、折线、多边形、圆和弹窗。例如我们添加标记：

var marker = L.marker([51.5, -0.09]).addTo(mymap);
1

3.2.添加一个圆也是类似方法（除了第二个参数为半径设置特定的单位），当创建对象时通过传递最后一个参数，可以控制它的外观。

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

3.3.添加多边形也是类似，比较简单易行。

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

4.使用弹窗（popups）
4.1.当想在地图上，通过运用popups在某个特定对象上附加一些信息。Leaflet有一个顺便的捷径。

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

4.2.尝试点击对象，绑定的popup方法在标记marker上附带一个有特定HTML内容的弹窗popup。所以当点击对象时，这个弹窗popup会出现，并且openPopup 方法（仅适用于标记markers）就会立即打开这个附加的弹窗popup。
4.3.设置弹窗popups 作为图层

var popup = L.popup()
   .setLatLng([51.5, -0.09])
   .setContent("I am a standalone popup.")
   .openOn(mymap);
1
2
3
4

这里，运用openOn 方法而不是addTo 方法时，是因为当打开一个新的popup时，它会自动关闭一个之前打开的popup，这是一个非常好的可用性。
5.事件处理
5.1.每当Leaflet上发生一些事情时，例如用户点击marker 或者地图缩放改变时，相应的对象会发送一个事件，可以通过一个函数来订阅事件，允许对用户的交互做出反应。

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

5.2.任一对象拥有自己的一组事件，监听器函数的第一个参数是一个事件对象——它包含有关事件发生时的有用信息。例如，地图点击事件对象有一个经纬度的属性，该属性是发生点击时的位置。
例：通过popup而不是alert来改进我们的事例

var popup = L.popup();
function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}
mymap.on('click', onMapClick);
1
2
3
4
5
6
7
8

以上就是一些Leaflet的基础知识，下面展示一个基本的完整示例。