Contents

1.1. Leaflet简介

Leavlet是一个开放源码的JavaScript库，用于移动渲染交互式地图。它的设计理念是高效、轻便和实用。它的大小只有38KB左右，但它拥有大多数开发人员需要的地图操作功能，可以在常见的桌面和移动平台上运行。具有可扩展的插件系统、清晰易读的代码、优雅的文档和易于操作的API。

1.1.1. 简介

Leaflet是一个现代、开源的JavaScript库，旨在为移动设备构建交互式地图。代码只有33KB，但它具有开发在线地图的大部分功能。Leaflet设计秉承简约、高性能、好用的设计理念。它在所有主要的桌面和移动平台上高效工作，利用现代浏览器中的HTML5和CSS3，同时还支持访问较旧的浏览器。支持插件扩展，具有友好、易用的API文档和简单易读的源代码。Leavlet强大的开源库插件涉及地图应用程序的方方面面，包括地图服务。有140多个插件，用于数据提供、数据格式、地理编码、路线和路线搜索、地图控制和交互。这些控件丰富了Leaflet的功能，同时实现自定义控件非常方便，具有良好的可扩展性。

1.1.2. Leaflet入门指南

本分步指南让您快速了解Leaflet的基本知识，包括构建Leaflet地图、使用标记、多行和弹出窗口以及处理事件。

View this example

1.1.3. 准备页面

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

在页面上 <head> 标签与 </head> 在标记之间添加以下代码：

<link rel="stylesheet" href="/f2elib/leaflet-1.8.0/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<!-- Make sure to place leaflet.js after leaflet.css . -->
<script src="/f2elib/leaflet-1.8.0/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>

创建要在其中创建地图的地图 id 的 div 。

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

确保地图具有清晰的高度，如在css中定义的那样：

#mapid { height: 180px; }

既然地图已经初始化，您就可以对它执行一些操作了。

1.1.4. 创建地图

View this example

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

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

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

  1. 显示地图：

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);

确保所有代码都用于显示地图 div 和 leaflet.js 在包含后调用。

1.1.5. 点标记、圆标记和多边形标记

View this example

除了地图瓦片，还可以轻松地向地图添加其他内容，包括标记、虚线、多边形、圆和弹出窗口。让我们添加一个标签：

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);

1.1.6. 使用弹出窗口

View this example

弹出窗口通常用于将某些信息附加到地图上的特定对象。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 ，因为它在打开新的弹出窗口时，自动关闭以前打开的弹出窗口，从而提高了可用性。

1.1.7. 处理事件

每次Leaflet中发生一些事情，例如当用户单击标记或地图缩放更改时，相应的对象都会发送一个事件，可通过一个功能来处理该事件，该功能允许对用户交互做出反应：

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

每个对象都有自己的一组事件，侦听器函数的第一个参数是Event对象，它包含有关发生的事件的有用信息。例如，地图单击事件对象(上例中的e)具有latlng属性，而latlng属性是发生单击的位置。

让我们通过使用弹出窗口而不是警报来改进示例：

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);

尝试点击地图，则会在弹出窗口中看到坐标。查看完整的示例：

Show the example

上一页

1. Leaflet轻量级WebGIS前端类库

下一页

1.2. 自定义图标