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

【地图视界-Leaflet4】绘制自定义图形

news 来源：原创 2025/9/12 2:28:33

引言

在前面的文章中，我们学会了如何在 Leaflet 中添加标记、弹窗以及切换不同的底图和叠加图层。但是在很多实际应用中，我们需要在地图上绘制多边形、圆形、矩形、折线等几何图形，用于标记区域、路径规划、范围分析等。

本篇文章将介绍如何在 Leaflet 中绘制这些自定义图形，并且通过交互功能让地图更加灵活。

Leaflet 支持的基本几何图形

Leaflet 提供了一些基础的矢量图形对象，包括：

折线（Polyline）：用于绘制路径或路线
多边形（Polygon）：用于绘制封闭的区域
矩形（Rectangle）：特殊的多边形，定义两个对角点即可
圆（Circle）：用于标记一定半径范围的区域
圆形标记（Circle Marker）：类似于 Circle，但大小不会随地图缩放变化

绘制基本几何图形

1. 绘制折线（Polyline）

折线（Polyline）适用于显示路径，比如一条公交线路或行进轨迹。

var polyline = L.polyline([[39.9042, 116.4074],[39.9152, 116.4174],[39.9252, 116.4274]
], {color: 'blue',weight: 4,opacity: 0.7
}).addTo(map);

效果：在地图上绘制一条蓝色的折线，代表一个路径。

2. 绘制多边形（Polygon）

多边形（Polygon）适用于绘制封闭区域，比如某个城市的行政边界或建筑轮廓。

var polygon = L.polygon([[39.9042, 116.4074],[39.9142, 116.4174],[39.9242, 116.4074],[39.9142, 116.3974]
], {color: 'red',fillColor: '#f03',fillOpacity: 0.5
}).addTo(map);

效果：在地图上绘制一个红色的半透明多边形。

3. 绘制矩形（Rectangle）

矩形（Rectangle）适用于标记特定区域，比如公园范围或建筑物。

var rectangle = L.rectangle([[39.90, 116.40],[39.91, 116.41]
], {color: 'green',weight: 2,fillOpacity: 0.4
}).addTo(map);

效果：在地图上绘制一个绿色半透明的矩形。

4. 绘制圆（Circle）

圆（Circle）适用于标记某个地点的影响范围，比如无线信号范围。

var circle = L.circle([39.9042, 116.4074], {color: 'purple',fillColor: '#a3c',fillOpacity: 0.5,radius: 1000  // 半径 1000 米
}).addTo(map);

效果：在地图上绘制一个紫色的半透明圆形。

5. 绘制圆形标记（CircleMarker）

与 Circle 不同，CircleMarker 的大小不会随地图缩放变化，适用于固定大小的标记。

var circleMarker = L.circleMarker([39.9142, 116.4174], {color: 'orange',fillColor: '#ffa500',fillOpacity: 0.7,radius: 10
}).addTo(map);

效果：在地图上添加一个橙色的小圆点。

交互增强：点击事件

为了让地图更具交互性，我们可以为绘制的图形添加点击事件，显示对应的信息。

polygon.on('click', function () {alert('你点击了红色多边形！');
});circle.on('click', function () {alert('这个圆形表示某个范围，比如影响区域。');
});

效果：当用户点击多边形或圆形时，会弹出提示框。

总结

本篇文章介绍了 Leaflet 提供的几何绘制功能，包括折线、多边形、矩形、圆、圆形标记等，并通过交互事件让用户能够点击这些图形获取信息。

这些图形在实际地图应用中有非常广泛的用途，比如：

折线（Polyline）：绘制公交路线、行驶轨迹
多边形（Polygon）：标记行政区划、土地使用范围
矩形（Rectangle）：标记建筑物、公园、停车场
圆（Circle）：标记影响范围，如无线信号、噪声污染
圆形标记（CircleMarker）：用于固定大小的地点标记

【地图视界-Leaflet4】绘制自定义图形

引言在前面的文章中，我们学会了如何在 Leaflet 中添加标记、弹窗以及切换不同的底图和叠加图层。但是在很多实际应用中，我们需要在地图上绘制多边形、圆形、矩形、折线等几何图形，用于标记区域、路径规划、范围分析等。本篇文章将介绍如何…...

编程日记 2025/9/12 2:28:33

华为hcia——Datacom实验指南——STP工作基本原理及STP/RSTP基本功能配置

什么时候需要用到STP 在二层交换网络中，为了避免环路产生。什么是STP STP生成树协议，是用来在冗余链路上消除二层环路。在众多交换机中，需要设置出一个根桥，其余的交换机称为非根桥，根桥是整个交换网络的核心&…...

编程日记 2025/9/12 2:24:36

游戏引擎学习第127天

仓库:https://gitee.com/mrxiao_com/2d_game_3 为本周设定阶段我们目前的渲染器已经实现了令人惊讶的优化，经过过去两周的优化工作后，渲染器在1920x1080分辨率下稳定地运行在60帧每秒。这个结果是意料之外的，因为我们没有预计会达到这样的…...

编程日记 2025/9/12 2:20:02

PostgreSQL 创建表格

PostgreSQL 创建表格在数据库管理中，表格（Table）是数据存储的基础。PostgreSQL作为一款强大的开源对象关系型数据库管理系统（ORDBMS），创建表格是其最基本的功能之一。本文将详细讲解如何在PostgreSQL中创…...

编程日记 2025/9/10 3:56:35

AF3 deduplicate_unpaired_sequences函数解读

AlphaFold3 msa_pairing模块的deduplicate_unpaired_sequences 函数的作用是移除 chain[msa] 中那些已经存在于 chain[msa_all_seq] 中的序列。换句话说，它保留那些不在 chain[msa_all_seq] 中的序列，从而确保未配对的 MSA 序列不会与配对的 MSA 序列重复…...

编程日记 2025/9/12 2:17:49

图像处理之图像边缘检测算法

目录 1 图像边缘检测算法简介 2 Sobel边缘检测 3 经典的Canny边缘检测算法 4 演示Demo 4.1 开发环境 4.2 功能介绍 4.3 下载地址参考 1 图像边缘检测算法简介图像边缘检测是计算机视觉和图像处理中的基本问题，主要目的是提取图像中明暗变化明显的边缘细节…...

编程日记 2025/9/5 7:14:18

unity使用input system实现相机屏幕手势丝滑拖拽

input action设置操作对象设置 camera 具体操作类 PlayerInputView类 using System.Collections; using UnityEngine; using UnityEngine.InputSystem; using TouchPhase UnityEngine.InputSystem.TouchPhase;public class FingerScale : MonoBehaviour {private Vector3…...

编程日记 2025/9/8 9:44:06

Leetcode-853. Car Fleet [C++][Java]

目录一、题目描述二、解题思路 Leetcode-853. Car Fleethttps://leetcode.com/problems/car-fleet/description/ 一、题目描述 There are n cars at given miles away from the starting mile 0, traveling to reach the mile target. You are given two integer array …...

编程日记 2025/9/10 11:34:16

建易WordPress

建易WordPress是一家专业的WordPress建站服务提供商，专注于为企业和个人提供一站式的WordPress网站建设、维护、托管、运营推广以及搜索引擎优化(SEO)服务。服务内容 1. 网站建设提供模板建站和定制开发两种服务，满足不同客户的需求。模板建站价格为…...

编程日记 2025/9/8 11:26:07

计算机三级网络技术备考（3）

【知识点补充：带宽是是链路的传输速率，宽带是一种服务】第四章：路由设计技术考点1：IP路由选择与路由汇聚核心层：s0两个IP进行汇聚就行汇聚层：聚合后两个以上的往前进几位（因为主机号不够因…...

编程日记 2025/9/12 2:24:37

工程化与框架系列（13）--虚拟DOM实现

虚拟DOM实现 🌳 虚拟DOM（Virtual DOM）是现代前端框架的核心技术之一，它通过在内存中维护UI的虚拟表示来提高渲染性能。本文将深入探讨虚拟DOM的实现原理和关键技术。虚拟DOM概述 🌟 💡 小知识&#xff1…...

编程日记 2025/9/10 6:15:22

Java实现pdf文件压缩（aspose-pdf实现压缩、itextpdf去除aspose-pdf版权水印）

Java实现pdf文件压缩时间换空间，实现pdf文件无损压缩。 1、依赖准备市面上操作pdf文件的组件有spire.pdf.free、itextpdf、openpdf、pdfbox等，它们各有千秋。我们主要完成的场景为压缩，减少文件大小去优化存储、传输等。在这里选取的组件…...

编程日记 2025/9/11 21:20:05

生态安全相关

概念：生态安全指一个国家具有支撑国家生存发展的较为完整、不受威胁的生态系统，以及应对内外重大生态问题的能力。 （1）国外生态安全的研究进展国际上对生态安全的研究是从“环境”与“安全”之间的关系展开的。开始的阶段&#x…...

编程日记 2025/9/10 12:13:22

通过 ANSYS Discovery 进行 CFD 分析，增强工程设计

概括工程师使用计算流体动力学 (CFD) 分析来研究和优化各种应用中的流体流动和传热分析。ANSYS Discovery 是一个用户友好的软件平台，使工程师能够轻松设置和解决 CFD 模型，并能够通知设计修改在这篇博文中，我们将重点介绍在 Ansys Disc…...

编程日记 2025/9/9 6:37:34

2. 在后端代码中加入日志记录模块

1. 说明日志模块基本上是每一个软件系统开发中必不可少的，主要用于持久记录一些代码运行中的输出信息，辅助编码人员进行代码调试，以及后期软件上线运行报错分析。在Python中加入日志模块比较简单，只需要借助logging和RotatingFi…...

编程日记 2025/9/10 16:03:39

MySQL锁分类

一、按锁的粒度划分全局锁定义：锁定整个数据库实例，阻止所有写操作，确保数据备份一致性。加锁方式：通过FLUSH TABLES WITH READ LOCK实现，释放需执行UNLOCK TABLES。应用场景：适用于全库逻辑备份&#xf…...

编程日记 2025/9/7 20:15:32

软件测试之白盒测试知识总结

🍅 点击文末小卡片 ，免费获取软件测试全套资料，资料在手，涨薪更快概念与定义白盒测试：侧重于系统或部件内部机制的测试，类型分为分支测试（判定节点测试）、路径测试、语句测试…...

编程日记 2025/9/4 13:47:02

看视频学习方法总结

以下是提高教学视频吸收率的系统性方法，结合认知科学原理和实际学习场景，帮助您最大化学习效果： 一、观看前的黄金准备阶段 60秒快速扫描法用1分钟快速浏览视频目录、章节标题和简介，建立知识框架。荷兰伊拉斯姆斯大学实验表明&…...

编程日记 2025/9/5 3:55:50

nvm的学习

学习 nvm（Node Version Manager） 是掌握 Node.js 开发的关键技能之一。以下是系统的学习路径和实战指南，涵盖从基础到进阶的内容： 一、基础入门 1. nvm 的核心作用多版本共存：安装和管理多个 Node.js 版本&#xff…...

编程日记 2025/9/11 7:04:56

OpenCV计算摄影学（5）处理一系列图像（例如视频帧）的非局部均值去噪的函数fastNlMeansDenoisingColoredMulti()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述对用于彩色图像序列的 fastNlMeansDenoisingMulti 函数的修改。 cv::fastNlMeansDenoisingColoredMulti 函数是 OpenCV 中用于处理一系列图像&am…...

编程日记 2025/9/3 21:20:35

mysql安装教程，超详细图文教程（附安装包）MySQL8.0安装教程

文章目录前言一、MySQL安装包下载二、mysql安装教程前言本教程旨在为大家提供详细、清晰的 mysql安装教程，帮助你轻松跨过安装门槛，顺利开启数据库管理与开发的精彩之旅。一、MySQL安装包下载 MySQL 是一款备受欢迎的开源关系型数据库管理系统&…...

编程日记 2025/9/10 6:49:36

Spark内存迭代计算

一、宽窄依赖窄依赖：父RDD的一个分区数据全部发往子RDD的一个分区宽依赖：父RDD的一个分区数据发往子RDD的多个分区，也称为shuffle 二、Spark是如何进行内存计算的？DAG的作用？Stage阶段划分的作用？ &a…...

编程日记 2025/9/10 1:10:01

Odoo免费开源CRM技术实战：从商机线索关联转化为售后工单的应用

文 / 开源智造 Odoo金牌服务 Odoo：功能强大且免费开源的CRM Odoo 引入了一种高效的客户支持管理方式，即将 CRM 线索转换为服务台工单。此功能确保销售和支持团队能够无缝协作，从而提升客户满意度并缩短问题解决时间。通过整合 CRM 模块与服…...

编程日记 2025/9/3 1:45:06

对seacmsv9进行sql注入，orderby，过滤information_schema

对seacmsv9进行sql注入，orderby，过滤information_schema 1.对seacmsv9进行sql注入海洋影视管理系统（seacms，海洋cms）是一套专为不同需求的站长而设计的视频点播系统，采用的是 php5.Xmysql 的架构 seacm…...

编程日记 2025/9/3 9:59:32

跨AWS账户共享SQS队列以实现消息传递

在现代分布式系统中,不同的服务和组件通常需要进行通信和协作。Amazon Simple Queue Service (SQS)提供了一种可靠、可扩展且完全托管的消息队列服务,可以帮助您构建分布式应用程序。本文将介绍如何在一个AWS账户(账户A)中创建SQS队列,并授权另一个AWS账户(账户B)中的用户和角色…...

编程日记 2025/9/11 11:36:01

Starrocks 写入报错 primary key memory usage exceeds the limit

背景本文基于 StarRocks 3.3.5 单个Starrocks BE配置是 16CU 32GB 在Flink Yaml CDC 任务往 Starrocks写数据的过程中，突然遇到了primary key memory usage exceeds the limit 问题，具体如下： java.lang.RuntimeException: com.starrocks.…...

编程日记 2025/9/7 18:52:32

【Java】I/O 流篇 —— 打印流与压缩流

目录打印流概述字节打印流构造方法成员方法代码示例字符打印流构造方法成员方法代码示例打印流的应用场景解压缩/压缩流解压缩流压缩流 Commons-io 工具包概述Commons-io 使用步骤Commons-io 常见方法代码示例 Hutool 工具包打印流概述分类：打印流一般是指…...

编程日记 2025/9/10 18:42:20

刷屏（0和1）

计算机有一个“好东西”，它就是2进制，虽然无法快速转换，but可以通过编程来实现。附代码： #include <bits/stdc.h> using namespace std; int main() {int a,b,c;cout<<" …...

编程日记 2025/9/10 16:47:10

keil主题（vscode风格）

#修改global.prop文件，重新打开keil即可 # Keil uVision Global Properties File # This file is used to customize the appearance of the editor# Editor Font editor.font.nameConsolas editor.font.size10 editor.font.style0# Editor Colors editor.backgro…...

编程日记 2025/9/11 7:00:18

windows服务器更新jar包脚本

【需求】Java每次发布新的版本都需要先kill掉原来的服务，然后再启动新的包有了这个脚本只需要把包替换掉，服务会自动kill 以6001 为例完整的脚本如下 echo off REM 检查端口 6001 是否被占用 netstat -ano | findstr :6001 > nul IF %ERRORLE…...

编程日记 2025/9/10 5:20:46

前端实现OSS上传图片(Vue3+vant)

首先，下面这些信息从阿里云服务器OSS管理中获取 aliyun:oss:file:endpoint: "oss-cn-beijing.aliyuncs.com"keyid: "xxxxxxxxx"keysecret: "xxxxxxxxxxxx"bucketname: "xxxx"一、安装OSS npm install ali-oss 二、以下步…...

编程日记 2025/9/8 4:52:21

Vue.js 组件开发指南：实现、传值与优缺点分析

1. 组件的实现与使用 1.1 组件的定义在 Vue.js 中，组件是独立的、可复用的 Vue 实例。每个组件可以包含自己的模板、逻辑和样式。 // 定义一个简单的组件 Vue.component(my-component, {template: <div>这是一个自定义组件</div> });1.2 组件的使用…...

编程日记 2025/9/6 19:00:48

vulnhub靶场之【kioptrix-5】靶机

前言靶机：kioptrix-5，IP地址为192.168.10.10 攻击：kali，IP地址为192.168.10.6 都采用VMware虚拟机，网卡为桥接模式这里需要注意，在靶机安装后，先把原本的网卡删除，重新添加一个…...

编程日记 2025/9/6 4:51:50

#渗透测试#批量漏洞挖掘#(0day)某智能终端操作平台前台存在通用SQL注入漏洞（CVE-2022-21047）

免责声明本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停…...

编程日记 2025/9/7 14:31:43

Linux系统中proc是做什么的？

在 Linux 系统中，/proc 是一个虚拟文件系统（Virtual Filesystem），它不对应实际的磁盘文件，而是内核在内存中动态生成的。/proc 文件系统提供了一种与内核数据结构交互的方式，它主要用于存放与系统运行状态、…...

编程日记 2025/9/9 10:13:24

el-table修改表格颜色

文章目录一、el-table属性修改表格颜色1.1、header-row-class-name修改表头行颜色1.2、header-row-style修改表头样式1.3、row-class-name修改行颜色二、el-table-column属性修改表格颜色2.1、class-name修改整列的颜色2.2、label-class-name修改列标题颜色本文讲解vue修改e…...

编程日记 2025/9/8 13:29:22

014存储期（时间）

一、基本概念 C语言中，变量都是有一定的生存周期的，所谓生存周期指的是从分配到释放的时间间隔。为变量分配内存相当于变量的诞生，释放其内存相当于变量的死亡。从诞生到死亡就是一个变量的生命周期。根据定义方式的不同，变量的…...

编程日记 2025/9/10 12:11:03

执行git操作时报错：`remote: [session-b8xxxda3] Access denied ...`解决方案

问题描述： 执行git push -u origin "master"时报错： > remote: [session-b849cda3] Access denied > fatal: unable to access https://gitee.com/jyunee/maibobo.git/: The requested URL returned error: 403表示没有权限访问远程仓库…...

编程日记 2025/9/12 1:12:02

Redis版本的EOL策略与升级路径（刷到别划走）

各位看官，刷到就点进来，大数据已经抓到你喽～😊 前言在软件行业做服务端开发的我们，多多少少都会接触到Redis，用它来缓存数据、实现分布式锁等，相关八股文烂熟于心，但是往往会忽略具…...

编程日记 2025/9/3 22:31:23

算法题：数组中的第 K 个最大元素（中等难度）

一、题目给定整数数组 nums 和整数 k，请返回数组中第 k 个最大的元素。请注意，你需要找的是数组排序后的第 k 个最大的元素，而不是第 k 个不同的元素。示例 1： 输入：nums [3,2,1,5,6,4], k 2 输出：…...

编程日记 2025/9/11 13:59:40

进行性核上性麻痹患者的生活护理指南

进行性核上性麻痹是一种神经系统退行性疾病，合理的生活护理能有效改善症状，提高生活质量。居家环境要安全。移除地面杂物，铺设防滑垫，安装扶手，降低跌倒风险。在浴室、厨房等湿滑区域要特别加强防护措施。建议在床边、…...

编程日记 2025/9/8 18:21:25

Python大战Java：AI时代的编程语言‘复仇者联盟‘能否换C位？

背景当Java程序员在咖啡机前念叨’Python凭什么抢我饭碗’时，AI实验室里的Python工程师正用5行代码召唤出神经网络——这场编程语言的’权力的游戏’，胜负可能比你想象的更魔幻！" 一、茶水间里的战争：Java和Python的相爱相…...

编程日记 2025/9/11 15:44:32

SpringBoot AI + PgVector向量库 + Openai Embedding模型

Spring Boot 项目引入下载仓库地址 <dependencyManagement><dependencies><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-bom</artifactId><version>${spring-ai.version}</version>&l…...

编程日记 2025/9/9 12:28:51

目标检测——数据处理

1. Mosaic 数据增强 Mosaic 数据增强步骤: (1). 选择四个图像： 从数据集中随机选择四张图像。这四张图像是用来组合成一个新图像的基础。 (2) 确定拼接位置： 设计一个新的画布(输入size的2倍)，在指定范围内找出一个随机点（如…...

编程日记 2025/9/7 18:56:08

数据集笔记：新加坡LTA MRT 车站出口、路灯等位置数据集

1 MRT 车站出口 data.gov.sg （geojson格式） 1.1 kml格式 data.gov.sg 2 路灯 data.govsg ——geojson data.gov.sg——kml 版本 3 道路摄像头数据集 data.gov.sg 4 自行车道网络 data.gov.sg 5 学校区域 data.gov.sg 6 自行车停车架&#xff…...

编程日记 2025/9/8 19:40:47

Highcharts 配置语法详解

Highcharts 配置语法详解引言 Highcharts 是一个功能强大的图表库，广泛应用于数据可视化领域。本文将详细介绍 Highcharts 的配置语法，帮助您快速上手并制作出精美、实用的图表。高级配置结构 Highcharts 的配置对象通常包含以下几部分&#xff1a…...

编程日记 2025/9/11 19:02:58

Python 项目安全实战：工具应用、规范制定、数据防护与架构加固

Python 项目安全实战：工具应用、规范制定、数据防护与架构加固本文聚焦 Python 项目安全，深入介绍安全工具如 Bandit、OWASP ZAP 的实战操作，涵盖对特定模块扫描及 Web 测试进阶应用。详细阐述团队如何制定并持续更新安全编码规范&#xff…...

编程日记 2025/9/10 20:24:36

linux ununtu通过nginx-1.6.2.tar.gz安装nginx并安装在自定义目录XXX下的步骤

Ubuntu 下通过源码安装 Nginx 1.6.2 到自定义目录 /home/aot/nginx 的步骤以下是将 Nginx 1.6.2 源码包离线安装到自定义目录的详细流程，包含依赖管理、编译配置和服务管理： 一、准备工作 1. 下载源码包和依赖（需联网环境准备）…...

编程日记 2025/9/10 13:52:51

《Python百练成仙》31-40章（不定时更新）

第卅一章函数结丹def开紫府罗酆山的鬼门关吞吐着猩红的变量阴风，每个风眼都涌动着作用域混乱的灵力乱流。叶军手握薛香遗留的丹田玉简，玉简表面浮现出残缺的函数符文： def 凝聚金丹(灵气):道基灵气 * 0.618print(金丹品质) # 作用域外变…...

编程日记 2025/9/8 4:54:09

Python--内置模块和开发规范（上）

1. 内置模块 1.1 JSON 模块核心功能序列化：Python 数据类型 → JSON 字符串 import json data [{"id": 1, "name": "武沛齐"}, {"id": 2, "name": "Alex"}] json_str json.dumps(data, ensure_a…...

编程日记 2025/9/9 8:07:20

引言