Leaflet 技术分享（一）

Leaflet 是一个开源的 JavaScript 库，用于在 Web 应用程序中构建交互式地图。本文将介绍如何使用 Leaflet 构建一个简单的交互式地图。

安装 Leaflet

在使用 Leaflet 之前，需要先引入 Leaflet 的 CSS 和 JavaScript 文件。可以通过 CDN 或 npm 进行安装。

使用 CDN

在 HTML 文件的 <head> 部分引入以下内容：

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

使用 npm

在项目目录中运行以下命令：

npm install leaflet

然后在 JavaScript 文件中引入：

import 'leaflet/dist/leaflet.css'
import L from 'leaflet'

初始化地图

在 HTML 文件中创建一个用于放置地图的 <div> 元素，并设置其大小：

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

然后在 JavaScript 文件中初始化地图：

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

添加地图图层

Leaflet 支持多种地图图层，这里以 OpenStreetMap 为例：

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

添加标记

在地图上添加一个标记：

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

添加弹出层

为标记添加弹出层，当标记被点击时显示：

marker.bindPopup('<b>Hello world!</b><br>I am a popup.').openPopup()

添加多边形

在地图上添加一个多边形：

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

处理事件

可以为地图上的元素添加事件处理程序，例如点击事件：

marker.on('click', function () {
  alert('Marker clicked!')
})

自定义样式

可以通过 CSS 自定义地图元素的样式：

.leaflet-popup-content-wrapper {
  background-color: #f9f9f9;
  border-radius: 5px;
}

.leaflet-popup-tip {
  background: #f9f9f9;
}

示例代码

以下是一个完整的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Map Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
      #map {
        width: 600px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
      // 初始化地图
      const map = L.map('map').setView([51.505, -0.09], 13)

      // 添加地图图层
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map)

      // 添加标记
      const marker = L.marker([51.5, -0.09]).addTo(map)

      // 添加弹出层
      marker.bindPopup('<b>Hello world!</b><br>I am a popup.').openPopup()

      // 添加多边形
      const polygon = L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047],
      ]).addTo(map)

      // 处理事件
      marker.on('click', function () {
        alert('Marker clicked!')
      })
    </script>
  </body>
</html>