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

【leaflet】1. 初见

news 2025/8/8 5:06:21

▒ 目录 ▒

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

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/6/17 9:20:49

Cursor实现用excel数据填充word模版的方法

cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中文章目录注意事项逐步生成程序1. 确定格式2. 调试程序注意事项直接给一个excel文件和最终呈现的word文件的示例，…...

编程新知 2025/6/18 2:20:36

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程新知 2025/8/5 6:55:34

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/8/3 2:43:55