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

126.在 Vue 3 中使用 OpenLayers 实现绘制正方形、正三角形、正五边形

article 2025/9/24 18:53:04

🗺️ 项目效果（先看效果）

支持点击按钮绘制图形，效果如下：

✅ 正三角形
✅ 正方形
✅ 正五边形
✅ 支持停止绘制

📌 前言

在 Web GIS 的实际项目中，我们经常需要绘制一些规则的图形，比如：正方形、正三角形、正五边形等，这在标注地块、规划图形、布设区域等场景中都非常常见。

本文将基于 Vue 3 + OpenLayers 来实现一个小型的图形绘制功能，提供完整代码、讲解思路，方便你快速集成到自己的项目中。

🧱 技术栈

  • Vue 3（采用 Composition API + <script setup>）

  • OpenLayers v6+

  • Element Plus（按钮交互）

  • Tailwind CSS（用于

相关文章：

126.在 Vue 3 中使用 OpenLayers 实现绘制正方形、正三角形、正五边形

🗺️ 项目效果（先看效果） 支持点击按钮绘制图形，效果如下： ✅ 正三角形 ✅ 正方形 ✅ 正五边形 ✅ 支持停止绘制 📌 前言 在 Web GIS 的实际项目中，我们经常需要绘制一些规则的图形，比如：正方形、正三角形、正五边形等，这在标注地块、规划图形、布设区域等场景中都…...

编程日记 2025/9/24 18:53:04

大数据 vs. 小数据：AI项目中数据规模与质量的权衡之道

大数据 vs. 小数据&#xff1a;AI项目中数据规模与质量的权衡之道 引言&#xff1a;数据时代的辩证法则 在AI领域&#xff0c;一个根本性悖论日益凸显&#xff1a;数据规模与质量往往呈现此消彼长的关系。Google Brain团队的研究揭示&#xff0c;当数据规模增长10倍时&#x…...

编程日记 2025/7/8 11:40:51

互联网大厂Java求职面试实战：Spring Boot到微服务全景解析

&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通 2. 我的免费工具站&#xff1a; 欢迎访问 https://tools-6wi.pages.dev/ &#x1f601; 3. 毕业设计专栏&#xff0c;毕业…...

编程日记 2025/5/23 23:43:00

最新版VSCode通过SSH远程连接Ubuntu 16.04等旧版Linux的方法

根据官方文档Remote Development FAQ - Can I run VS Code Server on older Linux distributions?&#xff0c;自Visual Studio Code 1.99起&#xff0c;VSCode Remote - SSH Server由于运行库依赖更新&#xff0c;会无法连接到旧版Linux发行版上。但是好在官方在文档中还给了…...

编程日记 2025/8/9 21:58:33

SQL Server中delete table和truncate table删除全表数据哪个快？

目录 1.TRUNCATE 2.DELETE 总结 在 SQL Server 中&#xff0c;DELETE 和 TRUNCATE 都可以用来删除表中的数据&#xff0c;但它们执行的方式和性能影响是不同的。这里简要说明两者的区别以及哪个更快&#xff1a; 1.TRUNCATE 速度&#xff1a; TRUNCATE 是一个DDL&#xff…...

编程日记 2025/9/24 12:13:40

3DVR制作的工具或平台

3DVR&#xff08;三维虚拟现实&#xff09;是利用三维图像技术和虚拟现实技术&#xff0c;将真实场景进行三维扫描并转换成计算机可识别的三维模型&#xff0c;使用户能够在虚拟空间中自由漫游&#xff0c;体验身临其境的感觉。3DVR技术结合了全景拍摄和虚拟现实&#xff0c;提…...

编程日记 2025/9/25 7:12:59

qt QMessageBox 的详细解析

以下是关于 QMessageBox 的详细解析，涵盖其核心功能、使用方法、高级特性及常见场景示例。 1. QMessageBox 的核心作用 QMessageBox 是 Qt 中用于快速创建标准化对话框的类，常用于以下场景： 信息提示（如操作成功/失败）。警告或错误通知（如文件未保存）。用户决策（如确认…...

编程日记 2025/8/25 21:54:52

高吞吐与低延迟的博弈：Kafka与RabbitMQ数据管道实战指南

摘要 本文全面对比Apache Kafka与RabbitMQ在数据管道中的设计哲学、核心差异及协同方案。结合性能指标、应用场景和企业级实战案例，揭示Kafka在高吞吐流式处理中的优势与RabbitMQ在复杂路由和低延迟传输方面的独特特点；介绍了使用Java生态成熟第三方库（如Apache Kafka Clie…...

编程日记 2025/9/24 19:02:24

在 Spring Boot 中实现分库分表的全面指南

分库分表&#xff08;Database Sharding&#xff09;是一种数据库架构优化技术&#xff0c;通过将数据分散到多个数据库或表中&#xff0c;以应对高并发、大数据量场景&#xff0c;提升系统性能和扩展性。在 Spring Boot 中&#xff0c;分库分表可以通过框架支持&#xff08;如…...

编程日记 2025/9/18 0:05:52

关于大语言模型的困惑度（PPL）指标优势与劣势

1. 指标本身的局限性 与人类感知脱节&#xff1a; PPL衡量的是模型对词序列的预测概率&#xff08;基于交叉熵损失&#xff09;&#xff0c;但低困惑度未必对应高质量的生成结果。例如&#xff1a; 模型可能生成语法正确但内容空洞的文本&#xff08;PPL低但质量差&#xff09;…...

编程日记 2025/6/27 2:37:35

如何使用WordPress SEO检查器进行实时内容分析

在这篇文章中&#xff0c;我们将带你从头开始了解如何在WordPress中使用SEO检查工具进行实时内容分析。这篇文章面向初学者&#xff0c;帮助你理解SEO的重要性以及如何通过工具提高文章的搜索引擎优化&#xff08;SEO&#xff09;效果。 一、什么是SEO内容分析&#xff1f; 内…...

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

C语言：深入理解指针（5）

目录 一、回调函数 二、qsort 使用举例 三、模拟qsort 一、回调函数 回调函数就是一个通过函数指针调用的函数。 举个例子&#xff1a; int Add(int x, int y) {return xy; }void test(int (*pf)(int, int)) {int r pf(10 ,20);printf("%d\n" ,r); }int main()…...

编程日记 2025/9/24 19:40:42

前端如何获取电脑唯一编码

在前端开发中&#xff0c;出于安全和隐私的考虑&#xff0c;浏览器不允许直接获取硬件的唯一标识&#xff08;如 MAC 地址、CPU 序列号等&#xff09;。但可以通过以下方法生成设备指纹&#xff08;Device Fingerprint&#xff09;&#xff0c;近似实现设备唯一标识&#xff1a…...

编程日记 2025/6/18 17:32:38

IEEE出版｜连续多年稳定检索｜第三届信号处理与智能计算国际学术会议(SPIC2025)

【重要信息】 会议官网&#xff1a; www.ic-spic.com 会议日期&#xff1a;2025年11月28-30日 会议地点&#xff1a;中国 广州 截稿日期&#xff1a;2025年11月10日 接受或拒绝通知日期&#xff1a;提交后7个工作日 【征稿主题】 人工智能和机器学习 计算机系统和架构 …...

编程日记 2025/9/24 18:33:04

“强强联手，智启未来”凯创未来与绿算技术共筑高端智能家居及智能照明领域新生态

近日&#xff0c;北京凯创未来科技有限公司总经理赵健凯先生莅临广东省绿算技术有限公司北京运营中心&#xff0c;双方正式签订战略合作协议&#xff0c;标志着绿算技术在高端智能家居及智能照明领域的技术实力与产业布局获得智能家居行业认可&#xff0c;同时也为凯创未来在高…...

编程日记 2025/9/24 18:33:00

MQ消息队列的深入研究

目录 1、Apache Kafka 1.1、 kafka架构设 1.2、最大特点 1.3、功能介绍 1.4、Broker数据共享 1.5、数据一致性 2、RabbitMQ 2.1、架构图 2.2、最大特点 2.3、工作原理 2.4、功能介绍 3、RocketMQ 3.1、 架构设计 3.2、工作原理 3.3、最大特点 3.4、功能介绍 3…...

编程日记 2025/9/24 19:00:24

【NLP 74、最强提示词工程 Prompt Engineering 从理论到实战案例】

一定要拼尽全力&#xff0c;才能看起来毫不费劲 —— 25.5.15 一、提示词工程 1.提示词工程介绍 Ⅰ、什么是提示词 所谓的提示词其实就是一个提供给模型的文本片段&#xff0c;用于指导模型生成特定的输出或回答。提示词的目的是为模型提供一个任务的上下文&#xff0c;以便模…...

编程日记 2025/9/24 18:33:39

安卓开饭-ScrollView内嵌套了多个RecyclerView，只想与其中一个RecyclerView有联动

在 Android 开发中&#xff0c;将 RecyclerView 嵌套在 ScrollView 内通常会导致性能问题和滚动冲突&#xff0c;应尽量避免这种设计。以下是原因和替代方案&#xff1a; 为什么不推荐 RecyclerView ScrollView&#xff1f;​​ 性能损耗​ RecyclerView 本身已自带高效回收复…...

编程日记 2025/9/19 19:13:12

Linux 系统中的文件系统层次结构和重要目录的用途。

Linux系统目录结构采用分层布局方式&#xff0c;通过根目录"/"组织管理各类文件。以下为核心目录说明&#xff1a; 一、主要目录结构 1. / : 根目录&#xff0c;所有文件和目录的起点 2. /bin : 存储基础用户命令(ls/cp/mv等) 3. /boot : 存放系统引导程序和…...

编程日记 2025/9/13 4:07:44

从攻击者角度来看Go1.24的路径遍历攻击防御

目录 一、具体攻击示例 程序 攻击步骤&#xff1a; 二、为什么攻击者能成功&#xff1f; 分析 类比理解 总结 三、TOCTOU 竞态条件漏洞 1、背景&#xff1a;符号链接遍历攻击 2. TOCTOU 竞态条件漏洞 3. 另一种变体&#xff1a;目录移动攻击 4. 问题的核心 四、防…...

编程日记 2025/5/23 19:17:42

使用 SiamMask 实现单目标逐帧跟踪与掩码中心提取

使用 SiamMask 实现单目标逐帧跟踪与掩码中心提取 使用 SiamMask 实现逐帧掩码中心提取与目标跟踪1. 功能概述2. 输入要求3. 使用说明4. 可选扩展5. 常见问题排查6. 脚本代码（siam\_one\_frame.py）使用 SiamMask 实现逐帧掩码中心提取与目标跟踪 本文介绍基于 SiamMask 的逐…...

编程日记 2025/8/6 3:08:34

Qt中的RCC

Qt资源系统(Qt resource system)是一种独立于平台的机制&#xff0c;用于在应用程序中传输资源文件。如果你的应用程序始终需要一组特定的文件(例如图标、翻译文件和图片)&#xff0c;并且你不想使用特定于系统的方式来打包和定位这些资源&#xff0c;则可以使用Qt资源系统。 最…...

编程日记 2025/9/24 18:33:35

【实战解决方案】Spring Boot+Redisson构建高并发Excel导出服务，彻底解决系统阻塞难题

【实战解决方案】Spring BootRedisson构建高并发Excel导出服务&#xff0c;彻底解决系统阻塞难题 一、问题背景&#xff1a;痛苦的系统卡顿经历 作为电商后台开发者&#xff0c;我们经常遇到这样的场景&#xff1a;运营人员在后台点击"导出订单数据"后&#xff0c;…...

编程日记 2025/9/25 6:35:53

Delphi 12.3调用Chrome/edge内核实现DEMO源码

DELPHI使用调用Chrome/Edge内核浏览器&#xff0c;虽然旧的WebBrowser也还可以用&#xff0c;但大势所趋&#xff0c;新版的已经不需要使用第三方的组件了&#xff0c;算是全内置的开发了&#xff0c;不废话 Unit1 源码 Form 源码 unit Unit1;interfaceusesWinapi.Windows, W…...

编程日记 2025/9/24 18:33:11

GitDiagram - GitHub 仓库可视化工具

GitDiagram - GitHub 仓库可视化工具 项目链接&#xff1a;https://github.com/ahmedkhaleel2004/gitdiagram 将任何 GitHub 仓库转换为交互式架构图&#xff0c;只需替换 URL 中的 hub 为 diagram。 ✨ 核心功能 即时可视化&#xff1a;将代码库结构转换为系统设计/架构图…...

编程日记 2025/9/24 18:33:08

【Linux】基于虚拟机实现网络的管理

通过学习我们需要掌握&#xff1a;IP 的配置、子网掩码、网关、DNS 服务器】 一、配置虚拟机的IP地址 1. 查看虚拟机 IP 地址&#xff08;可以看到三个地址&#xff09; ip a&#xff08;即ip address show&#xff09; 其中可以看到&#xff1a; Linux系统识别的以太网接口…...

编程日记 2025/9/24 18:59:52

QT 使用QPdfWriter和QPainter绘制PDF文件

QT如何生产pdf文件&#xff0c;网上有许多文章介绍&#xff0c;我也是看了网上的文章&#xff0c;看他们的代码&#xff0c;自己琢磨琢磨&#xff0c;才有了本编博客&#xff1b; 其他什么就不详细说了&#xff0c;本篇博客介绍的QPdfWriter和QPainter绘制PDF文件&#xff1b;…...

编程日记 2025/9/24 18:33:06

英迈国际Ingram Micro EDI需求分析

Ingram Micro&#xff08;英迈国际&#xff09;成立于1979年&#xff0c;是全球领先的技术和供应链服务提供商&#xff0c;总部位于美国加州尔湾。公司致力于连接全球的技术制造商与渠道合作伙伴&#xff0c;业务涵盖IT分销、云服务、物流和供应链优化等多个领域。Ingram Micro…...

编程日记 2025/9/18 10:32:13

linux - 权限的概念

目录 用户权限 超级用户与普通用户的区别 超级用户&#xff08;root&#xff09;&#xff1a; 普通用户&#xff1a; 切换用户身份 使用sudo执行高权限命令 用户管理 用户组管理 文件权限 文件访问者类别 基本权限 权限表示方法 权限修改 chmod chown chgrp u…...

编程日记 2025/9/24 18:33:24

函数的定义与调用 -《Go语言实战指南》

函数是 Go 编程的基本单元。Go 支持普通函数、匿名函数、高阶函数&#xff08;函数作为参数或返回值&#xff09;以及多返回值机制。 一、函数的定义格式 func 函数名(参数列表) 返回值列表 {// 函数体 } 示例&#xff1a; func add(a int, b int) int {return a b } 说明&…...

编程日记 2025/8/9 14:08:21