【leaflet】1. 初见

▒ 目录 ▒

- [🛫 导读](#🛫 导读)
- - 需求
  - 开发环境
- [1️⃣ 概念](#1️⃣ 概念)
- - 概念解释
  - 特点
- [2️⃣ 学习路线图](#2️⃣ 学习路线图)
- [3️⃣ html示例](#3️⃣ html示例)
- [🛬 文章小结](#🛬 文章小结)
- [📖 参考资料](#📖 参考资料)

🛫 导读

需求

要做游戏地图了，看到大量产品都使用的leaflet，所以开始学习这个。

开发环境

	版本号	描述
文章日期	2023-11-09
操作系统	Win10 - 22H2	19045.3570
leaflet	1.9.4

1️⃣ 概念

leaflet 是一个开源的 JavaScript 库，用于创建交互式的地图应用程序。

它提供了一系列的工具和类，用于实现地图的基本功能，如添加瓦片图层、绘制标记和路径等。

概念解释

下面是leaflet 中的一些概念解释：

地图（Map）：leaflet 中的地图是指一个 2D 空间的表示，可以包含多个图层。
每一个图层代表一种类型的地理信息，如地形、街道、行政区划等。
地图可以显示在网页上，用户可以通过缩放、平移和旋转等操作来查看地图内容。

图层（Layer）：leaflet 中的图层是指一个地理信息的显示层。
每一个图层都有一个对应的Layer类，该类负责处理图层的添加、删除、缩放等操作。
leaflet 支持多种类型的图层，如

矢量图层（VectorLayer）

栅格图层（GridLayer）

热力图：支持在地图上显示热力图效果，用于表示某个地区的人气、访问量等数据。

聚类图：支持在地图上显示聚类图效果，用于表示某个地区的人口密度、分布情况等数据。

地形图层（TerrainLayer）等。

标记（Marker）：leaflet 中的标记是指在地图上显示的一个标记点。
每一个标记都是一个Marker类的实例，该类负责处理标记的添加、删除、缩放等操作。
标记可以表示一个特定的地理位置，通常用于显示地图上的兴趣点等信息。

路径（Polyline）：leaflet 中的路径是指在地图上绘制的一条连续的线条。
每一个路径都是一个Polyline类的实例，该类负责处理路径的添加、删除、缩放等操作。
路径通常用于表示地图上的道路、河流、边界等信息。

事件（Event）：leaflet 中的事件是指在地图上发生的一些交互操作。
例如，当用户点击地图、缩放地图、移动地图等操作时，都会触发相应的事件。
leaflet 提供了丰富的事件处理机制，开发人员可以通过监听这些事件来响应用户的交互操作。

特点

总体来说，leaflet 是一款非常优秀的 WebGIS 库，适用于需要在移动端或 Web 平台上展示地理信息的应用。

易用性：leaflet 使用简单，不需要任何特殊的依赖，支持轻量级的 API，容易上手。

移动端兼容性：leaflet 在移动端设备上也能很好地兼容，并且支持响应式设计，自适应不同的屏幕大小。

强大的功能：leaflet 支持多图层、标记、路径、热点等多种地理信息的展示，同时还支持多边形、圆形等几何图形的绘制。

支持多种地图数据源：leaflet 支持加载多种常见的地图数据源，如 OpenStreetMap、Google Maps、ESRI basemaps 等，可以根据需求自由选择。

可扩展性：leaflet 提供了丰富的插件生态，允许开发者自定义功能，例如添加仪表盘、进度条等。

可交互性：拖拽、放大缩小、跳到指定位置、键盘控制、事件、标记拖动。

视觉特效：缩放动效、

2️⃣ 学习路线图

从官方网站开始，该网站为图书馆提供了全面的指南和参考文档。

熟悉 Web 开发的基础知识，包括 HTML、CSS 和 JavaScript，因为它们对于使用 Leaflet 创建交互式地图至关重要。

通过从官方网站下载库或使用 npm 或 yarn 等包管理器来安装 Leaflet。

探索 Leaflet API 并学习如何使用其各种功能，例如创建地图、添加标记和弹出窗口、显示图块和图层以及处理用户交互。

通过构建简单的项目来练习，例如您家乡的地图或您最喜欢的地方的地图，随着您对 Leaflet 的熟悉程度越来越高，逐渐增加项目的复杂性。

通过参与在线论坛加入传单社区，获取更多资讯。

3️⃣ html示例

面对这么强大的leaflet，我们这就来实战一下，先看看简单的效果：
加载 leaflet 库：在你的 HTML 文件中，使用 script 和 link 标签加载 leaflet 库。
html 复制代码
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
创建地图容器：在你的 HTML 文件中创建一个地图容器，并设置其 id 为"map"。
javascript 复制代码
<div id="map"></div>
创建 leaflet 地图实例：使用 leaflet 库创建一个地图实例，并将其绑定到地图容器。
javascript 复制代码
     var map = new L.Map('map', {
       center: new L.LatLng(39.86,116.45),
       zoom: 4
     });
加载底图：使用 leaflet 的tileLayer类加载底图。你可以使用 leaflet 提供的在线底图服务，如 mapbox，OpenStreetMap 等，或者加载本地的瓦片地图。
javascript 复制代码
 L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: '夜猫逐梦 @CartoDB Positron>',
    maxZoom: 18
 }).addTo(map);
添加路线：使用 leaflet 的Polyline类在地图上添加路线。你需要提供路线的起点和终点坐标，以及路线的样式。
javascript 复制代码
var polyline = L.polyline([[51.505, -0.12], [51.515, -0.125]], {
   color: 'red',
   weight: 3
}).addTo(map);
增加标记及popup。
javascript 复制代码
var bj = L.marker([39.92,116.46]).bindPopup('这里是北京');
var sh = L.marker([31.213,121.445]).bindPopup('这里是上海');
var gz = L.marker([23.16,113.23]).bindPopup('这里是广州');
var cities = L.layerGroup([bj, sh, gz]).addTo(map);

完整代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <title>Document</title>
  <style>
      html, body, #map { height: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    var map = new L.Map('map', {
            center: new L.LatLng(39.86,116.45),
            zoom: 4
        });
    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
      attribution: '夜猫逐梦 @CartoDB Positron',
      maxZoom: 18
    }).addTo(map);
    var polyline = L.polyline([[39.92,116.46], [31.213,121.445]], {
        color: 'red',
        weight: 3
    }).addTo(map);

    var bj = L.marker([39.92,116.46]).bindPopup('这里是北京');
    var sh = L.marker([31.213,121.445]).bindPopup('这里是上海');
    var gz = L.marker([23.16,113.23]).bindPopup('这里是广州');
    var cities = L.layerGroup([bj, sh, gz]).addTo(map);
  </script>
</body>
</html>

🛬 文章小结

总体来说，leaflet 是一款非常优秀的 WebGIS 库，适用于需要在移动端或 Web 平台上展示地理信息的应用。

本节对其做简单的介绍和使用演示。
其中使用leaflet需要注意以下几点：

必须引入leaflet.css，否则贴片会出现乱序的情况。

网上很多地图地址都无法访问，这里使用http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png，虽然慢了点，但是能用。

leaflet版本使用的是1.9.4，每个版本的接口可能不一样，出错了就看下控制台。
以后会不断写一些示例功能，或者翻译官网有用的文章。

📖 参考资料

leaflet官网：https://leafletjs.com/index.html

官网例子： https://leafletjs.com/examples

api文档：https://leafletjs.com/reference.html

Leaflet源码解析--TileLayer（某不错的网站）： https://www.giserdqy.com/secdev/leaflet/19903/