当前位置：首页 > news >正文

【leaflet】1. 初见

news 2026/2/10 16:46:46

▒ 目录 ▒

- 🛫 导读
- - 需求
  - 开发环境
- 1️⃣ 概念
- - 概念解释
  - 特点
- 2️⃣ 学习路线图
- 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 库。
<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"。
<div id="map"></div>
创建 leaflet 地图实例：使用 leaflet 库创建一个地图实例，并将其绑定到地图容器。
     var map = new L.Map('map', {center: new L.LatLng(39.86,116.45),zoom: 4});
加载底图：使用 leaflet 的tileLayer类加载底图。你可以使用 leaflet 提供的在线底图服务，如 mapbox，OpenStreetMap 等，或者加载本地的瓦片地图。
 L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {attribution: '夜猫逐梦 @CartoDB Positron>',maxZoom: 18}).addTo(map);
添加路线：使用 leaflet 的Polyline类在地图上添加路线。你需要提供路线的起点和终点坐标，以及路线的样式。
var polyline = L.polyline([[51.505, -0.12], [51.515, -0.125]], {color: 'red',weight: 3
}).addTo(map);
增加标记及popup。
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);

完整代码如下：

<!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/

【leaflet】1. 初见

▒ 目录 ▒ 🛫 导读需求开发环境 1️⃣ 概念概念解释特点 2️⃣ 学习路线图3️⃣ html示例🛬 文章小结📖 参考资料 🛫 导读需求要做游戏地图了，看到大量产品都使用的leaflet，所以开始学习这个。开发环境…...

编程日记 2023/11/13 4:23:51

数据结构与算法（Java版） | 详解十大经典排序算法之一：冒泡排序

前面虽然大家已经知道了多种不同的排序算法，但是我一直都没来得及给大家讲，所以，从这一讲起，我就要开始来给大家详细讲解具体的这些排序算法了。下面，我们先来看第一个最常见的排序，即冒泡排序。冒泡排…...

编程日记 2023/11/13 4:22:50

轻量封装WebGPU渲染系统示例＜24＞- Rendering Pass Graph基本用法(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/PassNodeGraphTest.ts 此示例基于此渲染系统实现，当前示例TypeScript源码如下: class PassGraph extends WGRPassNodeGraph {constructor() { super();…...

编程日记 2023/11/13 4:20:48

开设自己的网站系类01购买服务器

开始建设自己的网站吧！ 编者买了一个服务器打算自己构建一个网站，用于记录生活。网站大概算是一个个人博客吧。记录创建过程的一些步骤要开设自己的网站，需要执行以下关键步骤以下只是初步列出了建立自己的网站的大概步骤，后…...

编程日记 2023/11/13 4:18:46

FTP、NFS、SAMBA系统服务一

一、rsync托管xinetd 1、为什么要进行服务托管独立服务：独立启动脚本 ssh ftp nfs dns ... 依赖服务: 没有独立的启动脚本 rsync telnet 依赖xinetd服务（独立服务） 2、如何将rsync托管给xinetd服务去管理？ 第一步&#xff1…...

编程日记 2023/11/13 4:17:45

transfomer模型——简介，代码实现，重要模块解读，源码，官方

一、什么是transfomer Transformer是一种基于注意力机制（attention mechanism）的神经网络架构，最初由Vaswani等人在论文《Attention Is All You Need》中提出。它在自然语言处理（NLP）领域取得了巨大成功，特…...

编程日记 2023/11/13 4:16:44

队列（Queue）：先进先出（FIFO）的数据结构

队列是一种基本的数据结构，用于在计算机科学和编程中管理数据的存储和访问。队列遵循先进先出（First In, First Out，FIFO）原则，即最早入队的元素首先出队。这种数据结构模拟了物理世界中的队列，如排队等待服…...

编程日记 2023/11/13 4:15:42

吃透 Spring 系列—AOP部分

目录 ◆ AOP 简介 - AOP的概念 - AOP思想的实现方案 - 模拟AOP的基础代码 - AOP相关概念 ◆ 基于xml配置的AOP - xml方式AOP快速入门 - xml方式AOP配置详解 - xml方式AOP原理剖析 ◆ 基于注解配置的AOP - 注解方式AOP基本使用 - 注解方式AOP配置详解 - 注解…...

编程日记 2023/11/13 4:14:41

redis 问题解决 2

1.4 数据存储 1、Redis 的数据过期策略是什么？ Redis的数据过期策略包括两种机制：被动删除和主动删除。被动删除：当某个键被访问时，如果发现这个键已经过期，Redis会立即删除这个键。这意味着如果一个过期的键从未被访问，它就不会被自动删除。这是一种惰性删除策略。主…...

编程日记 2023/11/13 4:13:40

Spring Boot 校验用户上传的图片文件

图片上传是现代应用中非常常见的一种功能，也是风险比较高的一个地方。恶意用户可能会上传一些病毒、木马。这些东西不仅严重威胁服务器的安全还浪费了带宽，磁盘等资源。所以，在图片上传的接口中，一定要对用户上传的文件进行严格的…...

编程日记 2023/11/13 4:12:38

【springboot配置项动态刷新】与【yaml文件转换为java对象】

文章目录一，序言二，准备工作1. pom.xml引入组件2. 配置文件示例三，自定义配置项动态刷新编码实现1. 定义自定义配置项对象2. 添加注解实现启动时自动注入3. 实现yml文件监听以及文件变化处理四，yaml文件转换为java对象1. 无法使…...

编程日记 2023/11/13 4:09:35

JS移动端触屏事件

在我们PC端中有许多的事件，那我们在移动端有没有事件呢？让我为大家介绍一下移动端常用的事件，触屏事件触屏事件 touch (也称触摸事件)，Android 和IOS 都有 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一…...

编程日记 2023/11/13 4:06:30

C语言——打印1000年到2000年之间的闰年

闰年： 1、能被4整除不能被100整除 2、能被400整除 #define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> int main() {int year;for(year 1000; year < 2000; year){if((year%4 0) && (year%100!0) || (year%400 0)){printf("%d ",ye…...

编程日记 2023/11/13 4:05:28

【Linux】【驱动】设备树下的paltform总线

【Linux】【驱动】设备树下的paltform总线 1. 驱动程序的完整代码2. 使用到的相关函数3 使用到的指令3.2 设备上使用的指令 1. 驱动程序的完整代码主要是展示了通过总线上挂载的方式来实现相关的数据读取实质上就是几个of函数的调用。 /** Author: topeet* Description: 设…...

编程日记 2023/11/13 4:04:26

洛谷 NOIP 2023 模拟赛-汪了个汪-题解

简要题意棋盘上有 n n n 行，第 i i i 行有 i i i 个格子。你要在格子填 1 ∼ n 1\sim n 1∼n，满足： 每行第一个数互不相同所有在行上相邻的两个数所组成的无序对互不相同每行的数互不相同 n ≤ 4000 n\le4000 n≤4000 题解容易发现…...

编程日记 2023/11/13 4:03:25

洛谷 NOIP 2023 模拟赛 P9836 种树

洛谷 NOIP 2023 模拟赛 P9836 种树文章目录洛谷 NOIP 2023 模拟赛 P9836 种树题目大意思路code 题目大意路边有 n n n 棵树，每棵树的高度均为正整数，记作 p 1 , p 2 … p n p_1, p_2 \dots p_n p1,p2…pn。定义一棵树的宽度为它高度的…...

编程日记 2023/11/13 4:02:24

链表经典OJ题（链表回文结构，链表带环，链表的深拷贝）

目录前言 1.反转一个单链表。 2. 给定一个带有头结点 head 的非空单链表，返回链表的中间结点。 3.链表的回文结构。 4.链表带环问题（*****） 4.1是否带环 4.2 入环的节点 5.随机链表的复制（链表的深拷贝） 前言…...

编程日记 2023/11/13 4:01:22

AD教程（十三）常见CHIP封装的创建

AD教程 （十三）常见CHIP（贴片）封装的创建 PCB封装是电子设计图纸和实物之间的映射体，具有精准数据的要求，在实际设计中需要通过规格书获取创建封装的数据参数。 PCB封装和实物的大小一致。PCB封装是承载实物…...

编程日记 2023/11/13 4:00:20

从0到1实现一个前端监控系统（附源码）

目录一、从0开始二、上报数据方法三、上报时机四、性能数据收集上报收集上报FP 收集上报FCP 收集上报LCP 收集上报DOMContentLoaded 收集上报onload数据收集上报资源加载时间收集上报接口请求时间五、错误数据收集上报收集上报资源加载错误收集上报js错…...

编程日记 2023/11/13 3:59:19

第7章-使用统计方法进行变量有效性测试-7.2-方差分析

目录 7.2 方差分析 7.2.1 单因素方差分析组内变异组间变异总变异随机误差...

编程日记 2023/11/13 3:58:17

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/2/7 23:18:31

地震勘探——干扰波识别、井中地震时距曲线特点

目录干扰波识别反射波地震勘探的干扰波井中地震时距曲线特点干扰波识别有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。地震勘探中，有效波和干扰波是相对的。例如，在反射波…...

编程新知 2026/2/8 20:43:05

【WiFi帧结构】

文章目录帧结构MAC头部管理帧帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...

编程新知 2026/2/7 17:33:19

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我，后续持续新增专题博文，谢谢！！！】上一篇我们讲了： 这一篇我们开始讲： 目录一、场景操作步骤二、日志基础关键字分级如下三、场景日志如下： 一、场景操作步骤操作步…...

编程新知 2026/1/30 10:10:55

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。例…...

编程新知 2026/1/10 10:16:16

《通信之道——从微积分到 5G》读书总结

第1章绪论 1.1 这是一本什么样的书通信技术，说到底就是数学。那些最基础、最本质的部分。 1.2 什么是通信通信发送方接收方承载信息的信号解调出其中承载的信息信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...

编程新知 2026/2/7 11:01:56

大数据学习（132）-HIve数据分析

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

优选算法第十二讲：队列 + 宽搜优先级队列

优选算法第十二讲：队列宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2026/1/20 17:18:59

Selenium常用函数介绍

目录一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口四，弹窗五，等待六，导航七，文件上传 …...

编程新知 2026/1/29 3:55:23