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

65.在 Vue 3 中使用 OpenLayers 绘制带有箭头的线条

news 来源：原创 2025/6/9 19:27:26

前言

在现代的前端开发中，地图已经成为许多项目的核心功能之一。OpenLayers 是一个强大的开源地图库，它提供了丰富的功能和高度的定制化支持。在本篇文章中，我将向大家展示如何在 Vue 3 中使用 OpenLayers 绘制带有箭头的线条。

我们将实现以下功能：

在地图上动态绘制线条；
在线条的每段末端添加箭头；
箭头方向自动调整，以指示线条的方向。

实现效果

绘制的线条如下图所示，每段线条都带有箭头，箭头的方向与线段方向一致。

开发环境

Vue 版本：3.x
OpenLayers 版本：6.x+
其他工具：Node.js、NPM

项目代码

<!--* @Author: 彭麒* @Date: 2025/1/14* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><div class="container"><div class="w-full flex justify-center"><div class="font-bold text-[24px]">在Vue3中使用OpenLayers显示绘制带有箭头的线</div></div><div id="vue-openlayers"></div></div>
</template><script setup>
import 'ol/ol.css';
import { ref, onMounted } from 'vue';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import LayerVector from 'ol/layer/Vector';
import SourceVector from 'ol/source/Vector';
import Draw from 'ol/interaction/Draw';
import Point from 'ol/geom/Point';
import { Fill, Stroke, Style, Icon } from 'ol/style';
import arrow from '@/assets/OpenLayers/arrow.png';
const map = ref(null);
const source = new SourceVector({ wrapX: false });
const draw = ref(null);const styleFunction = (feature) => {const geometry = feature.getGeometry();const styles = [new Style({stroke: new Stroke({color: 'purple',width: 2,}),}),];geometry.forEachSegment((start, end) => {const dx = end[0] - start[0];const dy = end[1] - start[1];const rotation = Math.atan2(dy, dx);styles.push(new Style({geometry: new Point(end),image: new Icon({src: arrow,anchor: [0.75, 0.5],rotateWithView: true,rotation: -rotation,}),}));});return styles;
};const addInteraction = () => {if (draw.value) {map.value.removeInteraction(draw.value);}draw.value = new Draw({source: source,type: 'LineString',});map.value.addInteraction(draw.value);
};const initMap = () => {const raster = new Tile({source: new OSM(),});const vector = new LayerVector({source: source,style: styleFunction,});map.value = new Map({target: 'vue-openlayers',layers: [raster, vector],view: new View({projection: 'EPSG:4326',center: [113.1206, 23.034996],zoom: 10,}),});addInteraction();
};onMounted(() => {initMap();
});
</script><style scoped>
.container {width: 840px;height: 590px;margin: 50px auto;border: 1px solid #42B983;
}#vue-openlayers {width: 800px;height: 470px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>

实现说明

地图初始化：
使用 ol/Map 和 ol/View 初始化地图，并添加瓦片图层（OSM）。
数据源和图层：
使用 ol/source/Vector 作为数据源，添加到矢量图层中。通过 styleFunction 实现动态样式。
绘图交互：
使用 ol/interaction/Draw 实现用户绘制线条的功能。
箭头样式：
每段线条的末端添加一个箭头，方向通过 Math.atan2 自动计算。

注意事项

箭头图标：
请确保您提供的箭头图标路径正确，并且图片具有透明背景。
坐标系：
示例使用 EPSG:4326 坐标系，具体可根据项目需求调整。

效果预览

完成以上代码后，运行项目，您将看到一个可交互的地图，支持绘制线条并自动添加箭头。

总结

本文介绍了如何在 Vue 3 中结合 OpenLayers 使用矢量图层和交互功能，实现绘制带箭头的线条。通过这种方法，您可以轻松实现诸如路径指示、流向显示等功能。

如果您有任何问题或更好的建议，欢迎在评论区讨论！ 😊

如果您觉得这篇文章对您有帮助，请点赞、收藏和关注！谢谢支持！ ❤️

65.在 Vue 3 中使用 OpenLayers 绘制带有箭头的线条

前言在现代的前端开发中，地图已经成为许多项目的核心功能之一。OpenLayers 是一个强大的开源地图库，它提供了丰富的功能和高度的定制化支持。在本篇文章中，我将向大家展示如何在 Vue 3 中使用 OpenLayers 绘制带有箭头的线条。我们将实现…...

编程日记 2025/6/3 7:49:58

关于编写测试用例的细枝末节

这里写目录标题故障判别类-边界考虑示例1.0：若A＞20.3且持续时间≥15ms时（判故周期为1000Hz），输出B为1，否则输出B为0。故障判别类-不可恢复测试示例1.1：若A＞20.3且持续时间≥15ms时…...

编程日记 2025/5/30 23:48:59

【Vim Masterclass 笔记13】第 7 章：Vim 核心操作之——文本对象与宏操作 + S07L28：Vim 文本对象

文章目录 Section 7：Text Objects and MacrosS07L28 Text Objects1 文本对象的含义2 操作文本对象的基本语法3 操作光标所在的整个单词4 删除光标所在的整个句子5 操作光标所在的整个段落6 删除光标所在的中括号内的文本7 删除光标所在的小括号内的文本8 操作尖括号…...

编程日记 2025/6/2 6:34:43

（一）QSQLite3库简介

1、SQLite数据库 SQLite数据库，作为一个轻量级的关系型数据库管理系统，广泛应用于移动设备和桌面应用程序中。由于其简单易用、无需配置的特点，它为开发者提供了极大的便利。然而，正是由于其应用广泛，随着用户对于系统…...

编程日记 2025/5/30 16:40:01

新版 MacOS 无法从 /usr/local/lib 加载动态链接库的解决办法

自己编写的动态链接库在Unix规范下一般位于/usr/local/lib，在2023年及之前的MacOS版本中，直接将动态库安装到该位置即可在程序运行时加载，可是升级MacOS版本后，ld就报错。错误现象运行程序，报错 dyld[6376]: Libra…...

编程日记 2025/6/3 7:55:44

PanWeidb-使用BenchmarkSQL对磐维数据库进行压测

本文提供PanweiDb使用BenchmarkSQL进行性能测试的方法和测试数据报告。 BenchmarkSQL，一个JDBC基准测试工具，内嵌了TPC-C测试脚本，支持很多数据库，如PostgreSQL、Oracle和Mysql等。 TPC-C是专门针对联机交易处理系统（OLTP系统）的规范，一般情况下我们也把这类系统称为业…...

编程日记 2025/6/3 20:06:35

git在本地创建新分支并将该分支推送到远程仓库

1. 创建本地分支首先，创建并切换到一个新的本地分支： git checkout -b new-branch-name2. 推送本地分支到远程仓库将新的本地分支推送到远程仓库，并在远程创建一个对应的新分支： git push origin new-branch-name3. 设置本地…...

编程日记 2025/6/1 9:02:41

Axure9笔记

快速入门原型图种类 1.线框图 2.高保真图 3.简易需求文档（PRD） tips 按住shift可以等比缩放旋转：ctrl按角角矢量图素材： iconfont-阿里巴巴矢量图标库复制svg图-->将svg图换为形状截屏： Windows&…...

编程日记 2025/6/2 23:31:42

33_操作Redis分片集群

1.Redis分片集群读写我们使用的redis-cli --cluster提供了很多操作集群的命令，可以通过下面方式查看。 [root@localhost ~]# redis-cli --cluster help 1.连接上7001节点后，尝试存储一组num=100和a=10的数据，语句如下所示。 [root@node1 cluster]# redis-cli -a 123456…...

编程日记 2025/6/4 15:25:20

llama.cpp 模型可视化工具 GGUF Visualizer

llama.cpp 模型可视化工具 GGUF Visualizer 1. GGUF Visualizer for VS Code (gguf-viz)1.1. Features1.2. Extension Settings References GGUF Visualizer https://marketplace.visualstudio.com/items?itemNameAgainstEntropy.gguf-viz 1. GGUF Visualizer for VS Code (g…...

编程日记 2025/6/3 18:50:00

MAC AndroidStudio模拟器无网络

先确认PC端是正常访问网络的； 模拟器端修改Wifi设置：设置 - 网络和互联网 - WALN设置按照上图修改； IP设置：从DHCP修改为静态，IP地址：10.0.2.16 ，网关：10.0.2.2 ， DNS…...

编程日记 2025/5/28 7:02:32

如何添加合适的索引：MySql 数据库索引认知

写在前面博文内容涉及 Mysql 数据库索引简单认知，包括SQL执行过程，数据库数据存储原理。如何通过索引加快数据查询原理简单介绍适合有一定SQL基础的开发运维小伙伴建立数据库索引认知，学会如何添加索引理解不足小伙伴帮忙指正 😃…...

编程日记 2025/6/2 23:31:58

深度学习中的学习率调度器（scheduler）分析并作图查看各方法差异

文章目录 1. 指数衰减调度器（Exponential Decay Scheduler）工作原理适用场景实现示例 2. 余弦退火调度器（Cosine Annealing Scheduler）工作原理适用场景实现示例 3. 步长衰减调度器（Step Decay Scheduler）工…...

编程日记 2025/6/4 2:49:51

测试人员面试需要掌握的内容

测试人员面试需要掌握的内容 1、在公司的测试流程是什么？ 产品经理确认本次版本的需求，召开需求评审会，进行估时排期，需求和时间都确定之后，UI出设计图，开发人员进行开发，测试人员编写测试用例…...

编程日记 2025/6/4 13:39:50

【C++】函数（下）

1、函数的常见样式常见的函数样式有四种： （1）无参数无返回值 （2）有参数无返回值 （3）无参数有返回值 （4）有参数有返回值 （1）无参数无返回值示例…...

编程日记 2025/6/3 8:37:22

dockerfile实现lnmp

dockerfile实现lnmp 自定义镜像实现整个架构 (基础镜像centos7) nginx cd /opt mkdir nginx mysql php vim Dockerfile docker network create --subnet172.111.0.0/16 mynetwork #创建自定义网段 docker run -itd --name nginx -p 80:80 --cpu-quota 20000 -m 512m -v /op…...

编程日记 2025/6/4 6:07:56

C语言进阶-2指针（一）

目录 1. 字符指针1.1 一般用法：字符指针指向单字符1.2 第二种用法，字符串首地址给指针变量1.3 习题,下面代码的输出结果是什么？为什么？ 2. 指针数组2.1实例—— 字符指针数组2.2实例——整形指针数组2.3 例子，识别下下…...

编程日记 2025/6/4 6:07:40

JAVA：Spring Boot 集成 JWT 实现身份验证的技术指南

1、简述在现代Web开发中，安全性尤为重要。为了确保用户的身份，JSON Web Token（JWT）作为一种轻量级且无状态的身份验证方案，广泛应用于微服务和分布式系统中。本篇博客将讲解如何在Spring Boot 中集成JWT实现身份验证…...

编程日记 2025/5/26 10:11:04

SpringBoot链接Kafka

一、SpringBoot生产者 （1）修改SpringBoot核心配置文件application.propeties, 添加生产者相关信息 # 连接 Kafka 集群 spring.kafka.bootstrap-servers192.168.134.47:9093# SASL_PLAINTEXT 和 SCRAM-SHA-512 认证配置 spring.kafka.properties.securi…...

编程日记 2025/6/1 10:58:40

《深度剖析算法优化：提升效率与精度的秘诀》

想象一下，你面前有一堆杂乱无章的数据，你需要从中找到特定的信息，或者按照一定的规则对这些数据进行排序。又或者，你要为一个物流公司规划最佳的配送路线，以降低成本和提高效率。这些问题看似复杂，但都可以…...

编程日记 2025/6/4 6:08:59

APP推荐：全新TV端来了，8K原画电视版

▌ 软件介绍 B站都不陌生吧，一个能追番、学习、娱乐的多元平台，之前也分享过几款第三方TV端，其中的BV最近更新了全新版本。使用了全新的UI界面，由之前的顶部菜单栏改成了侧边布局，已解锁限制&…...

编程日记 2025/5/29 8:45:27

Spark vs Flink分布式数据处理框架的全面对比与应用场景解析

1. 引言 1.1 什么是分布式数据处理框架随着数据量的快速增长，传统的单机处理方式已经无法满足现代数据处理需求。分布式数据处理框架应运而生，它通过将数据分片分布到多台服务器上并行处理，提高了任务的处理速度和效率。分布式数据处理框…...

编程日记 2025/5/28 14:59:57

【Linux】正则表达式

正则表达式是一种可供Linux工具过滤文本的自定义模板，Linux工具（如sed、gawk）会在读取数据时使用正则表达式对数据进行模式匹配。正则表达式使用元字符来描述数据流中的一个或多个字符。它是由正则表达式引擎实现的。正则表达式引擎是一种底…...

编程日记 2025/6/4 6:08:43

《银行保险机构数据安全管理办法》正式实施，分类分级、安全评估共筑安全防线

金融数据具有高价值和高敏感性，金融数据安全关乎国家安全和金融消费者权益密切相关。在当前数字化进程加速的背景下，数据合作频繁，安全风险也随之增加，给机构管理带来了新挑战。为规范银行业保险业数据处理活动，保障数…...

编程日记 2025/6/4 6:08:12

excel仅复制可见单元格，仅复制筛选后内容

背景我们经常需要将内容分给不同的人，做完后需要合并遇到情况如下那是因为直接选择了整列，当然不可以了。下面提供几种方法，应该都可以直接选中要复制区域然后复制，不要选中最上面的列alt;选中可见单元格正常复制&#xff…...

编程日记 2025/6/4 6:08:28

26_Redis RDB持久化

从这个模块开始带领大家来学习Redis分布式缓存的相关内容，主要学习目标见下：数据丢失问题：实现Redis数据持久化（RDB和AOF）并发能力问题：搭建Redis主从集群，实现读写分离故障恢复问题：利用Redis哨兵模式，实现健康检测和自动恢复存储能力问题：搭建Redis分片集群，利用…...

编程日记 2025/6/3 21:40:06

Windows图形界面(GUI)-QT-C/C++ - QT控件创建管理初始化

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页目录控件创建包含对应控件类型头文件实例化控件类对象控件设置设置父控件设置窗口标题设置控件大小设置控件坐标设置文本颜色和背景颜色控件排版垂直布局 QVBoxLayout …...

编程日记 2025/6/2 11:35:25

Java+Maven+GDAL

下载已经编译好的压缩包，下载地址解压 jar 包 release-1930-x64-dev.zip\release-1930-x64\bin\gdal\java 目录下打成Maven依赖 mvn install:install-file -Dfilegdal-3.10.1.jar -DgroupIdorg.gdal -DartifactIdgdal -Dversion3.10.1 -Dpackagingjar -Dgener…...

编程日记 2025/6/2 23:09:53

基于Python机器学习、深度学习技术提升气象、海洋、水文领域实践应用-以ENSO预测为例讲解

1. 背景与目标 ENSO（El Nio-Southern Oscillation）是全球气候系统中最显著的年际变率现象之一，对全球气候、农业、渔业等有着深远的影响。准确预测ENSO事件的发生和发展对于减灾防灾具有重要意义。近年来，深度学习技术在气象领域…...

编程日记 2025/5/24 5:11:00

Java算法数据结构栈队列优先队列比较器

目录栈 Stack 性质构造方法代码示例队列 Queue 性质构造方法代码示例优先队列 PriorityQueue 性质构造方法代码示例比较器 1. Comparator 接口的方法 2. 常见的内置比较器 1. 自然排序比较器（naturalOrder()） 2. 逆序排…...

编程日记 2025/5/29 20:23:27

安装本地测试安装apache-doris

一、安装前规划我的服务器是三台麒麟服务器，2台跑不起来，这是我本地的，内存分配的也不多。 fe192.168.1.13 主数据库端口9030访问 8Gbe192.168.1.13内存4G 硬盘50be192.168.1.14内存4G 硬盘50be192.168.1.12内存4G 硬盘5013同时安装的fe和be 。原理：192.168.1.13 服…...

编程日记 2025/6/2 23:09:22

CSS | 实现三列布局（两边边定宽中间自适应，自适应成比）

目录示例1 （中间自适应示例2（中间自适应示例3（中间自适应示例4 （自适应成比示例5（左中定宽，右边自适应示例6（中间自适应示例7（中间自适应示例8（中间定宽…...

编程日记 2025/6/2 23:09:38

Centos8部署Redis Cluster

Redis Cluster 通过分片方式实现高可用，数据分布在多个节点，支持水平扩展。 1、环境准备一般建议准备六个节点（推荐 3 个主节点 + 3 个从节点） 2、配置Redis Cluster模式 2.1、配置文件修改 redis.conf：每个节点的配置应包括以下内容： port <port> …...

编程日记 2025/6/3 3:17:18

如何通过openssl生成.crt和.key

生成 .crt（证书文件）和 .key（私钥文件）的过程通常涉及使用加密工具或库来创建密钥对，并生成证书请求，最终由证书颁发机构（CA）或自签名生成证书。以下是生成 .crt 和 .key 文件的详细…...

编程日记 2025/6/2 18:23:02

Vue.js组件开发-使用地图绘制轨迹

在Vue.js中开发一个组件来展示地图并绘制轨迹，可以使用诸如Leaflet.js、Mapbox GL JS或百度地图等地图库。这些库提供了丰富的API来创建和定制地图，以及绘制路径、标记和其他地图元素。示例： 1. 安装Leaflet.js 首先，需要安装…...

编程日记 2025/5/28 14:41:06

大数据技术在智能制造中的应用前景

💖 欢迎来到我的博客！ 非常高兴能在这里与您相遇。在这里，您不仅能获得有趣的技术分享，还能感受到轻松愉快的氛围。无论您是编程新手，还是资深开发者，都能在这里找到属于您的知识宝藏，学习和成长…...

编程日记 2025/5/29 10:19:23

iOS 解决两个tableView.嵌套滚动手势冲突

我们有这样一个场景，就是页面上有一个大的tableView， 每一个cell都是和屏幕一样高的，然后cell中还有一个可以 tableView，比如直播间的情形，这个时候如果我们拖动 cell里面的tableView滚动的话，如果滚动到内…...

编程日记 2025/5/31 6:03:01

认识机器学习中的结构风险最小化准则

上一篇文章我们学习了关于经验风险最小化准则，其核心思想是通过最小化训练数据上的损失函数来优化模型参数，从而提高模型在训练集上的表现。但是这也会导致一个问题，经验风险最小化原则很容易导致模型在训练集上错误率很低，但在未…...

编程日记 2025/6/1 9:29:22

Java定时任务

在 Java 中，定时任务通常用于在特定时间或间隔执行某个操作。Java 提供了多种方式来实现定时任务，包括使用 Timer 类、ScheduledExecutorService 和 Spring 框架中的定时任务功能。下面将介绍这些常见的方法。 1. 使用 Timer 类 Timer 类可以用来安排任…...

编程日记 2025/6/2 20:16:54

[Effective C++]条款46 友元非成员函数

本文初发于 “天目中云的小站”，同步转载于此。条款46 : 需要类型转换时请为模板定义友元非成员函数本条款是条款24的延申讨论, 在引入模板的前提下, 如果我们想实现某些隐式类型转换的操作, 会需要比以往多一些额外的操作, 让我们通过本条款来理解. 前提引入还…...

编程日记 2025/6/2 20:52:09

Android Room 持久化库的介绍及使用方法

Android Room 是 Android Jetpack 组件之一，是 Google 官方推出的用于简化 SQLite 数据库操作的持久化库。它提供了一个抽象层，允许开发者在 SQLite 数据库上执行常见的 CRUD 操作，同时处理数据库连接、数据迁移和查询优化等底层细节。 Andr…...

编程日记 2025/6/2 20:16:05

《零基础Go语言算法实战》【题目 2-22】Go 调度器优先调度问题

《零基础Go语言算法实战》【题目 2-22】Go 调度器优先调度问题下面代码的输出是什么？请说明原因。 package main import ( "fmt" "runtime" "sync" ) func main() { runtime.GOMAXPROCS(1) wg : sync.WaitGroup{} wg.Add(10)…...

编程日记 2025/5/29 19:48:04

win10电脑定时关机

win10电脑定时关机 https://weibo.com/ttarticle/p/show?id2309405110707766296723 二、使用任务计划程序设置定时关机打开任务计划程序： 按下“Win S”组合键，打开搜索框。在搜索框中输入“任务计划程序”，然后点击搜索结果中的“任务…...

编程日记 2025/6/3 6:41:15

解决 VSCode 调试时 Python 文件出现相对路径报错问题‘FileNotFoundError’

文章目录 1. 问题描述2. 解决方法 1. 问题描述在使用 VSCode 进行 Python 开发时，遇到一个的问题：在调试模式下，程序无法读取文件或路径，导致File Not Found Error 错误。然而，当不使用调试模式而是直接运行 Python 文…...

编程日记 2025/6/2 20:16:22

四数相加力扣--454

目录题目思路代码题目给你四个整数数组 nums1、nums2、nums3 和 nums4 ，数组长度都是 n ，请你计算有多少个元组 (i, j, k, l) 能满足： 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1： 输…...

编程日记 2025/6/2 20:16:38

C# 下 SQLite 并发操作与锁库问题的 5 种解决方案

开篇：你是否被 SQLite 并发锁库困扰？ 在当今数字化的时代浪潮中，数据已然成为了企业与开发者们手中最为宝贵的资产之一。C# 作为一门广泛应用于各类软件开发的强大编程语言，常常需要与数据库进行紧密交互，以实现数据的…...

编程日记 2025/6/4 9:26:59

正则表达式基础

由于最近做的项目涉及到比较多的转义字符，转义字符长时间不用已经遗忘了，每次需要的时候就需要找到ai生成，或者网络上搜索，所以复习一遍。正则表达式（regular expression） 功能：字符串模式匹…...

编程日记 2025/6/4 9:26:43

QT在 MacOS X上，如何检测点击程序坞中的Dock图标

最近在开发MacOS的qt应用，在做到最小化系统托盘功能时，发现关闭窗口后再次点击程序坞中的Dock图标不能将主界面再显示出来。查询里很多资料，发现是QT自身的问题，没有做相关的点击Dock图标的处理。于是我参考了国内和国外的这两篇…...

编程日记 2025/6/4 9:29:07

Pgsql存储占用分析

基础命令 -- 查询表大小 SELECT pg_total_relation_size(table_name);-- 查询表大小（不带索引） SELECT pg_table_size(table_name);-- 查询表索引大小 SELECT pg_indexes_size(table_name);-- 查询表具体大小 SELECT pg_relation_size(table_name); SEL…...

编程日记 2025/6/4 9:28:19

【C语言】字符串函数详解

文章目录 Ⅰ. strcpy -- 字符串拷贝1、函数介绍2、模拟实现 Ⅱ. strcat -- 字符串追加1、函数介绍2、模拟实现 Ⅲ. strcmp -- 字符串比较1、函数介绍2、模拟实现 Ⅳ. strncpy、strncat、strncmp -- 可限制操作长度Ⅴ. strlen -- 求字符串长度1、函数介绍2、模拟实现&#xff08…...

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

前言