使用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