Leaflet - 基本原理

Leaflet是什么

Leaflet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发，虽然代码仅有 39 KB，但它具有开发人员开发在线地图的大部分功能。

Leaflet设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。

openlayers和leaflet：

现在看，是前端地图开源库的唯二选择，两个都是将切片或者空间数据在浏览器中可视化，并提供与之交互的能力。

leaflet专注小而美，只提供基本的地图调用和交互，超出的基本依赖插件，插件很多，也很全，可能与我的接触面来说，国内感觉使用openlayers的开发会多与leaflet；

openlayers把所有的功能做到了一起，自成一体，但保留了扩展其类的功能，全部引入太过臃肿，所以最新的openlayers提供了ES6写法，可以只引入需要的部分。

所以，这两个各有特点。如果只需要显示地图和简单的交互，使用leaflet合适，复杂的可以尝试使用openlayers。

页面引入leaflet的js与css

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

创建dom存放地图

div的style就按需求设置就行了。

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

初始化地图

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

默认情况下（因为我们在创建地图实例时没有传递任何选项），地图上的所有鼠标和触摸交互都处于启用状态，并且具有缩放和属性控制。

接下来，我们将添加一个切片图层以添加到我们的地图中，在本例中它是 Mapbox Streets 切片图层。创建图块图层通常涉及设置图块图像的URL 模板、属性文本和图层的最大缩放级别。在这个例子中，我们将使用mapbox/streets-v11从Mapbox的静态瓦片API（使用Mapbox地图瓦片，还必须请求访问令牌）。由于此 API 默认返回 512x512 图块（而不是 256x256），因此我们还必须明确指定这一点并将缩放值偏移 -1。

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

标记、折线、多边形、圆形和弹出窗口

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

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

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