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

【leaflet】1. 初见

news 2026/4/9 22:03:20

▒ 目录 ▒

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

大模型基础无非就这些！（附学习资料）

今年春招，算法岗位中，薪资开的最高的无疑是大模型相关的岗位，大模型相关应用正在逐步落地，往后3-5年，大模型仍是热门方向大家常听到的AI算法工程师，基座大模型，大模型应用工程师等都属于大模型…...

编程新知 2026/4/9 21:01:14

紧急！GraalVM上线后OOM频发？立即执行这5个内存安全检查项——覆盖Quarkus/Spring Native主流框架

第一章：GraalVM静态镜像内存异常的典型表征与根因定位全景图GraalVM 静态镜像（Native Image）在启动性能与资源占用方面具备显著优势，但其编译期内存模型与运行时行为存在根本性差异，导致内存异常表现隐晦且难以复现。典…...

编程新知 2026/4/9 20:59:14

Java微服务容器化新范式：GraalVM静态镜像+Seccomp白名单+gVisor沙箱（三重隔离方案已通过CNCF安全审计）

第一章：Java微服务容器化新范式：GraalVM静态镜像Seccomp白名单gVisor沙箱（三重隔离方案已通过CNCF安全审计）现代Java微服务在云原生环境中正面临启动慢、内存高、攻击面广三大瓶颈。本章介绍的三重隔离方案，将GraalVM …...

编程新知 2026/4/9 20:49:02

CogVideoX-2b效果探索：极端提示词下的边界测试

CogVideoX-2b效果探索：极端提示词下的边界测试 1. 引言：当文字遇见视频魔法你有没有想过，用几句话就能拍出一部微电影？输入一段文字描述，几分钟后就能得到一段动态视频，这听起来像是科幻电影里的场景&am…...

编程新知 2026/4/9 19:10:45

分布式训练有望解决人工智能的能耗难题

人工智能正面临着巨大的能源消耗挑战。这种持续增长的能源需求体现在支撑AI繁荣的数据中心产生的巨大碳足迹，以及前沿AI模型训练所产生的碳排放量随时间稳步增加。难怪大型科技公司开始青睐核能，设想一个由可靠、无碳能源支撑的未来。但是，虽…...

编程新知 2026/4/9 18:36:34

智能语音转写效率工具：AsrTools解放你的音频处理工作流

编程新知 2026/4/9 18:06:22

实测Z-Image-Turbo_UI界面：生成效果展示与使用技巧分享

实测Z-Image-Turbo_UI界面：生成效果展示与使用技巧分享 1. 快速上手：UI界面初体验 Z-Image-Turbo_UI界面提供了一种极其简单的图像生成方式，无需复杂配置即可快速体验AI绘画的魅力。启动服务后，只需在浏览器中输入http://localh…...

编程新知 2026/4/9 17:23:51

[PL2303老芯片兼容性困境]：驱动适配方案实现设备激活（适用于工业控制与嵌入式开发场景）

[PL2303老芯片兼容性困境]：驱动适配方案实现设备激活（适用于工业控制与嵌入式开发场景） 【免费下载链接】pl2303-win10 Windows 10 driver for end-of-life PL-2303 chipsets. 项目地址: https://gitcode.com/gh_mirrors/pl/pl2303-win10 …...

编程新知 2026/4/9 16:31:53