Leaflet.js：制图小白也能看懂的入门指南

2023-11-06 05:14:16

前言

当今社会，地图在我们的生活中发挥着至关重要的作用。从导航到天气预报，从城市规划到应急响应，地图帮助我们了解周围环境并做出 informed decisions。如果您正在寻找一个强大的制图工具，那么 Leaflet.js 是您的不二之选。

什么是 Leaflet.js？

Leaflet.js 是一款免费开源的 JavaScript 库，用于创建美观、互动性强的在线地图。它以其轻量、快速和易用而闻名。Leaflet.js 拥有广泛的地图提供商支持，包括 OpenStreetMap、Mapbox 和 Google Maps，同时还支持多种插件和扩展。

Leaflet.js 入门

1. 安装 Leaflet.js

首先，您需要从 Leaflet.js 官网下载库文件。您可以在这里获取最新版本。下载完成后，将其解压到您的项目文件夹中。

2. 创建 HTML 文件

接下来，您需要创建一个 HTML 文件作为地图的容器。在 HTML 文件中，您需要添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="leaflet.css" />
  <script src="leaflet.js"></script>
</head>
<body>
  <div id="map" style="width: 100%; height: 400px;"></div>

  <script>
    // 创建地图对象
    var map = L.map('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);

    // 添加标记
    L.marker([51.505, -0.09]).addTo(map);
  </script>
</body>
</html>

3. 创建地图

在 HTML 文件中，找到 <div id="map"></div> 代码块。这就是您的地图容器。接下来，您需要在 <script> 标签中添加以下代码：

// 创建地图对象
var map = L.map('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);

// 添加标记
L.marker([51.505, -0.09]).addTo(map);