Leaflet简介

Leaflet是一个用于移动端渲染交互式地图开源JavaScript库。它的设计理念是高效、轻量且实用。其体积只有约38KB,但具有大多数开发人员所需要的地图操作功能,能在常见的桌面和移动平台上工作。有着可扩展的插件体系,清晰可读的代码、及优雅 的文档和易于操作的API。

简介

Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的、开源的 JavaScript 库。代码仅有 33 KB,但它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的哲学思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。支持插件扩展,有一个友好、易于使用的API文档和一个简单的、可读的源代码。Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务,数据提供,数据格式,地理编码,路线和路线搜索,地图控件和交互等类型的插件共有140多个。这些控件丰富leaflet的功能,同时也可以十分方便的实现自定义的控件具有良好的可扩展性。

Leaflet入门指南

这个循序渐进的指南让你快速了解leaflet基础知识,包括建立leaflet地图,使用标记、多线和弹出窗口,以及处理事件。

查看本实例

准备页面

在编写地图代码之前,您需要在页面上执行以下操作:

在页面的 <head> 标签与 </head> 标签之间加入如下代码:

<link rel="stylesheet" href="//www.osgeo.cn/_f2elib/leaflet_1.5.1/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<!-- 确保leaflet.js放在Leaflet's CSS之后 -->
<script src="//www.osgeo.cn/_f2elib/leaflet_1.5.1/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>

在想要创建地图的地方创建一个带有 iddiv

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

确保地图有一个明确的高度, 例如在CSS中定义:

#mapid { height: 180px; }

现在地图的初始化已经完成了,可以准备用它做一些事情了。

创建地图

查看本实例

1.初始化地图,并将其视图设置为我们所选择的地理坐标和缩放级别:

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

默认情况下(因为我们在创建地图实例时没有设置任何参数),地图上的所有鼠标事件和触摸交互功能都是开启的,并且它具有缩放和属性控件。

2.显示地图。

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <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'
}).addTo(mymap);

确保所有代码都在用于显示地图的 divleaflet.js 包含之后调用。

点状标记 , 圆形标记以及多边形标记

查看本实例

除了瓦片之外,你还可以轻松地在地图中添加其他东西,包括标记、折线、多边形、圆圈和弹出窗口。让我们添加一个标记:

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

添加圆形标记:

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

添加多边形标记同样简单:

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

使用弹出窗口

查看本实例

弹出窗口通常用于将某些信息附加到地图上的特定对象上。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.");

尝试点击我们的对象。bindPopup方法将具有指定HTML内容的弹出窗口附加到标记上,因此当您单击对象时弹出窗口出现,openPopup方法(仅用于标记)立即打开所附的弹出窗口。

您还可以把弹出窗口设置为层(当您需要更多的东西,而不是附加弹出窗口到一个对象):

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

这里我们使用 openOn 而不是 addTo 因为它在打开一个新的弹出窗口时,处理以前打开的弹出窗口的自动关闭,这样可以增强可用性。

处理事件

每次在Leaflet中发生某些事情,例如用户单击标记或地图缩放更改时,相应的对象都会发送一个事件,您可以通过函数来处理该事件,它允许您对用户交互作出反应:

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

每个对象都有自己的事件集,侦听器函数的第一个参数是事件对象,它包含关于发生的事件的有用信息。例如,MAP单击事件对象(在上面的示例中为e)具有latlng属性,latlng属性是单击发生的位置。

让我们通过使用弹出而不是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);

试着点击地图,你就会看到弹出窗口中的坐标。查看完整的例子 :

查看完整实例 →