Leaflet简介

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

Leaflet入门指南

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

查看本实例

准备页面

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

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

    
                        
                            <
                            link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin=""/>
        <!-- 确保leaflet.js放在Leaflet's CSS之后 -->
        <script src="https://unpkg.com/leaflet@1.3.4/dist/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);

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