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

【leaflet】1. 初见

news 2026/1/3 11:25:29

▒ 目录 ▒

- 🛫 导读
- - 需求
  - 开发环境
- 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

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2025/12/24 3:40:16

golang循环变量捕获问题

在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景看这个代码片段： fo…...

编程新知 2025/7/5 11:03:11

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/9/9 23:27:37

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

Linux离线（zip方式）安装docker

目录基础信息操作系统信息docker信息安装实例安装步骤示例遇到的问题问题1：修改默认工作路径启动失败问题2 找不到对应组基础信息操作系统信息 OS版本：CentOS 7 64位内核版本：3.10.0 相关命令： uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...

编程新知 2025/12/31 21:30:40

学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图

在鸿蒙（HarmonyOS5）中集成百度地图，可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API，可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备开发工具：下载安装 De…...

编程新知 2025/11/13 2:37:01

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2026/1/1 10:08:38

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像在科研研究中，如何展示好看的实验结果图像非常重要！！！ 1、灰度原始图像灰度图像每个像素点只有一个数值，代表该点的亮度（或…...

编程新知 2026/1/1 20:06:39