使用Leaflet进行地图可视化教程

---

Leaflet简介

Leaflet 是一个流行的开源 JavaScript 库，用于创建交互式的、可定制的地图应用程序。它提供了轻量级、灵活且易于使用的API，可以在网页上轻松集成地图功能。

---

一、准备工作

1.在头部引入Leaflet库

引入 Leaflet 库的CSS文件（样式表文件），以便样式化 Leaflet 地图。

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

2.在CSS文件后引入Java Script文件

引入 Leaflet 库的样式表文件，以便样式化 Leaflet 地图。

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

3.放置div元素

<div> 元素是 HTML 中的一个块级元素，用于创建一个分隔区域（division/divider），它可以在网页中创建一个独立的区域，用于组织和布局其他元素，或者用于包裹其他内容以应用样式或行为。

在 HTML 文件中的任何位置插入以下代码来放置一个具有特定 id 的 div 元素，并规定它的长宽，用于展示地图。

<div id="map" style="width: 1024px; height: 600px;"></div>

二、操作示例

1.初始化地图

创建一个 Leaflet 地图对象，并设置地图容器为 “map”，地图的初始中心坐标为 [51.505, -0.09]，缩放级别为 13。

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

默认情况下，地图上的所有鼠标和触摸交互都是启用的。

接下来，我们将添加一个瓦片图层到我们的地图上，这里使用的是 OpenStreetMap 瓦片图层。创建一个瓦片图层通常涉及设置瓦片图像的 URL 模板、归属文本和图层的最大缩放级别。

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

这段代码中，调用了 Leaflet 提供的 L.tileLayer() 方法，用于创建一个瓦片图层对象。第一个参数是瓦片图层的 URL 模板，其中 {z}、{x} 和 {y} 会根据地图的缩放级别和当前的瓦片坐标动态替换为实际的瓦片图片的 URL。第二个参数是一个包含配置选项的对象。

在配置选项对象中，maxZoom 属性指定了瓦片图层的最大缩放级别。attribution 属性用于定义地图的归属信息，即地图数据的来源。

.addTo(map) 用于将图层添加到指定的地图对象上，使得该图层可以在地图上正确渲染。

2.地图标识绘制

通过Leaflet插件，我们可以在 Leaflet 地图上添加不同类型的图层和元素，包括标记（marker）、圆形（circle）、多边形（polygon）等。

标识marker

const marker = L.marker([51.5, -0.09]).addTo(map);

这行代码创建了一个标记（marker）对象，并设置了标记的位置为 [51.5, -0.09]，即纬度为 51.5，经度为 -0.09。然后将这个标记对象添加到地图上，使得标记可以在地图上显示。

圆形circle

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

这行代码创建了一个圆形（circle）对象，并设置了圆形的中心位置为 [51.508, -0.11]，即纬度为 51.508，经度为 -0.11。另外，还设置了圆形的颜色为红色 (color: ‘red’)，填充颜色为 #f03，填充透明度为 0.5，半径为 500。最后将这个圆形对象添加到地图上。

多边形polygon

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

这行代码创建了一个多边形（polygon）对象，并设置了多边形的顶点坐标。多边形的顶点坐标是一个包含多个数组的数组，每个数组代表一个顶点的经纬度坐标。最后将这个多边形对象添加到地图上。

最终呈现样式：

3.弹出窗口

弹出窗口通常用于在地图上的特定对象上附加一些信息。

类型一：将弹出窗口作为一个图层

	const popup = L.popup()
		.setLatLng([51.513, -0.09])
		.setContent('I am a standalone popup.')
		.openOn(map);

const popup = L.popup()：这行代码创建了一个弹出窗口对象，并将其赋给变量 popup。使用 L.popup() 方法创建的弹出窗口对象是一个空白的弹出窗口，后续可以通过方法链来设置其位置和内容。
.setLatLng([51.513, -0.09])：这是方法链的第一部分，调用了 setLatLng() 方法来设置弹出窗口的位置。在这里，弹出窗口的位置被设置为纬度为 51.513，经度为 -0.09 的位置。
.setContent('I am a standalone popup.')：这是方法链的第二部分，调用了 setContent() 方法来设置弹出窗口的内容。在这里，弹出窗口的内容被设置为字符串 “I am a standalone popup.”。
.openOn(map)：这是方法链的最后一部分，调用了 openOn() 方法来将弹出窗口添加到地图上并显示出来。在这里，map 是地图对象，表示将弹出窗口添加到指定的地图对象上。

效果：
类型二：将弹出窗口附加到标记上

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 方法（仅适用于标记）会立即打开附加的弹出窗口。

效果：

4.交互

每当 Leaflet 中发生某些事件时，例如用户点击标记或地图缩放变化时，相应的对象都会发送一个事件，可以通过一个函数对这些事件做出不同的反应。

function onMapClick(e) {
		popup
			.setLatLng(e.latlng)
			.setContent(`You clicked the map at ${e.latlng.toString()}`)
			.openOn(map);
	}
map.on('click', onMapClick);

这段代码定义了一个名为 onMapClick 的函数，用于处理地图点击事件。然后，通过 map.on('click', onMapClick) 语句，将这个函数绑定到地图对象上，使得当用户点击地图时，该函数被调用。

function onMapClick(e) { ... }：这是一个 JavaScript 函数的定义，它接受一个参数 e，表示事件对象。在这个函数内部，通过 e.latlng 获取到用户点击地图时的经纬度坐标。
popup.setLatLng(e.latlng)：这行代码将弹出窗口的位置设置为用户点击的地图位置，即 e.latlng。
popup.setContent(You clicked the map at ${e.latlng.toString()})：这行代码设置弹出窗口的内容为字符串，显示用户点击地图的经纬度坐标。
popup.openOn(map)：这行代码将弹出窗口添加到地图上并显示出来。
map.on('click', onMapClick)：这行代码通过 Leaflet 提供的 on() 方法，将 onMapClick函数绑定到地图对象的 ‘click’ 事件上。这样，当用户点击地图时，onMapClick 函数就会被调用，执行相应的操作。

效果：

三、练习：用Leaflet 插件显示上海疫情数据

Step1: 初始化地图

上海市中心的大致经纬度坐标是：（31.2304° N，121.4737° E）

const map = L.map('map').setView([31.2304，121.4737], 9);

Step2：建立瓦片图层

const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png'：通过L.tileLayer() 方法创建了一个瓦片图层对象。参数'https://tile.openstreetmap.org/{z}/{x}/{y}.png'指定了瓦片图层的 URL 模板，其中 {z}、{x}、{y} 分别表示瓦片的缩放级别、行和列。
{z}: 缩放级别。在地图缩放时，会加载不同缩放级别的瓦片。
{x}: 瓦片的水平坐标。
{y}: 瓦片的垂直坐标。
maxZoom: 19：设置了瓦片图层的最大缩放级别为 19。
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'：设置了瓦片图层的归属信息，显示在地图的右下角，告诉用户地图数据的来源。
.addTo(map)：将创建的瓦片图层对象添加到之前创建的地图对象 map 上，以在地图上显示该图层。

Step3: 加载数据

使用 D3.js 库中的 d3.json() 函数来加载名为 “05-Covid-SH.json” 的 JSON 文件，并在加载完成后执行一个回调函数来处理数据。

d3.json("05-Covid-SH.json", function(data) {
        console.log(data);
        for(let item of data){
            const marker = L.circleMarker([item.lat, item.lng],{ radius:2   }).addTo(map);
        }
});

console.log(data)：这行代码用于将加载的 JSON 数据打印到控制台，以便查看数据的结构和内容。
for(let item of data) { ... }：这是一个 for 循环，用于遍历加载的 JSON 数据中的每一项。对于每一项数据，都执行后面的代码块。
const marker = L.circleMarker([item.lat, item.lng], { radius: 2 }).addTo(map);：这行代码根据遍历到的每一项数据中的经纬度坐标（item.lat 和 item.lng）创建了一个圆形标记（circle marker），并设置了圆形标记的半径为 2。然后将该圆形标记添加到之前创建的地图对象 map 上。

最后呈现效果：

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<base target="_top">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>Shanghai Covid</title>
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="d3.v3.min.js"></script>

	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		.leaflet-container {
			height: 400px;
			width: 600px;
			max-width: 100%;
			max-height: 100%;
		}
	</style>

</head>
<body>

<div id="map" style="width: 1024px; height: 600px;"></div>
<script>

	const map = L.map('map').setView([31, 121], 9);

	const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);

    // 加载COVID-19数据
    d3.json("05-Covid-SH.json", function(data) {
        console.log(data);
        for(let item of data){
            const marker = L.circleMarker([item.lat, item.lng],{ radius:2 }).addTo(map);
        }
    });
    
</script>

</body>
</html>

---

总结

好啦，现在你就可以用leaflet插件来对地图进行编辑啦！