vue3-openlayers marker 光晕扩散(光环扩散)(postrender 事件和 render 方法)
本篇介绍一下使用 vue3-openlayers marker 光晕扩散(光环扩散)(postrender 事件和 render 方法)
1 需求
- marker 光晕扩散(光环扩散)
2 分析
marker 光晕扩散(光环扩散)使用 postrender 事件和 render 方法
关于即时渲染的知识点请看上篇《openlayers marker 光晕扩散(光环扩散)(postrender 事件和 render 方法)》
3 实现

<template><ol-map:loadTilesWhileAnimating="true":loadTilesWhileInteracting="true"style="width: 100%; height: 100%"ref="mapRef"><ol-view ref="view" :center="center" :zoom="zoom" :projection="projection" /><ol-tile-layer><ol-source-tianditulayerType="img":projection="projection":tk="key":hidpi="true"ref="sourceRef"></ol-source-tianditu></ol-tile-layer><ol-tile-layer><ol-source-tianditu:isLabel="true"layerType="img":projection="projection":tk="key":hidpi="true"></ol-source-tianditu></ol-tile-layer><ol-vector-layer ref="vectorLayerRef" @postrender="handlePostRender"><ol-source-vector><ol-feature><ol-geom-point :coordinates="[110, 30]"></ol-geom-point><ol-style><ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon></ol-style></ol-feature><ol-feature><ol-geom-point :coordinates="[112, 31]"></ol-geom-point><ol-style><ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon></ol-style></ol-feature></ol-source-vector></ol-vector-layer></ol-map><div class="toolbar"><el-button type="primary" @click="handleClick">{{ animationFlag ? '停止' : '开始' }}</el-button></div>
</template><script setup lang="ts">
import iconSrc from '@/assets/image/truck.png';
import { getVectorContext } from 'ol/render.js';
import { easeOut } from 'ol/easing.js';
import { Circle, Stroke, Style } from 'ol/style';const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const mapRef = ref();
const key = '替换为天地图key';
const sourceRef = ref(null);
const vectorLayerRef = ref(null);
const animationFlag = ref(false);
const duration = ref([3000, 1000]);
const start = ref([0, 0]);const handleClick = () => {if (!animationFlag.value) {start.value = start.value.map(i => Date.now());vectorLayerRef.value.vectorLayer.changed();}animationFlag.value = !animationFlag.value;
};const handlePostRender = e => {if (animationFlag.value) {const time = e.frameState.time;vectorLayerRef.value.vectorLayer.getSource().getFeatures().forEach((f, idx) => {// 时间戳差(毫秒)let elapsedTime = time - start.value[idx];if (elapsedTime >= duration.value[idx]) {start.value[idx] = Date.now();elapsedTime = duration.value[idx];}// 获取矢量上下文const vectorContext = getVectorContext(e);// elapsedRatio值0到1之间const elapsedRatio = elapsedTime / duration.value[idx];const radius = easeOut(elapsedRatio) * 25 + 5;const opacity = easeOut(1 - elapsedRatio);const style = new Style({image: new Circle({radius: radius,stroke: new Stroke({color: 'rgba(255, 0, 0, ' + opacity + ')',width: 1 + opacity})})});// 将feature渲染到画布中。vectorContext.drawFeature(f.clone(), style);});mapRef.value.map.render();}
};
</script>
<style scoped lang="scss">
.toolbar {position: absolute;top: 20px;left: 100px;display: flex;justify-content: center;align-items: center;
}
</style>相关文章:
vue3-openlayers marker 光晕扩散(光环扩散)(postrender 事件和 render 方法)
本篇介绍一下使用 vue3-openlayers marker 光晕扩散(光环扩散)(postrender 事件和 render 方法) 1 需求 marker 光晕扩散(光环扩散) 2 分析 marker 光晕扩散(光环扩散)使用 post…...
新型防勒索病毒方案分享无需依靠病毒库
MCK具备可信系统,数据库保护,场景白名单,文件保护四大功能。如何运用在防勒索病毒中 在防勒索病毒的问题上,MCK主机的加固功能显得尤为重要。MCK的四大功能——可信系统、数据库保护、场景白名单以及文件保护,为我们在…...
《Mybatis-Plus》系列文章目录
什么是 MyBatis-Plus? Mybatis-Plus是一个在MyBatis基础上进行增强和扩展的开源Java持久层框架。 Mybatis-Plus(简称MP)旨在简化开发、提高效率,通过提供一系列便捷的功能和工具,大幅度减少开发人员编写重复代码的时…...
在Matplotlib中,`xlim()` 函数用于设置x轴的显示范围,原因和作用如下:
在Matplotlib中,xlim() 函数用于设置x轴的显示范围,原因和作用如下: 1. **控制显示范围**: xlim() 允许用户指定x轴的最小值和最大值,从而控制图表显示的数据范围。 2. **改善可视化**: 通过设置x轴的范围…...
win7使用vue-cli创建vue3工程
1.创建名为test的项目 vue create test 回车以后选择第三个,进行手动选择 2.选择配置 向下箭头表示下一个,空格表示*选中,按照我的选择来选即可,选完后回车 3.选择vue.js版本 上线箭头进行选择,选择后回车 4.选择不同的配置&#…...
为何云原生是未来?企业IT架构的颠覆与重构
🐇明明跟你说过:个人主页 🏅个人专栏:《未来已来:云原生之旅》🏅 🔖行路有良友,便是天堂🔖 目录 一、引言 1、什么是云原生 2、云原生的背景和起源 背景 起源 关…...
构建家庭NAS之三:在TrueNAS SCALE上安装qBittorrent
本系列文章索引: 构建家庭NAS之一:用途和软硬件选型 构建家庭NAS之二:TrueNAS Scale规划、安装与配置 构建家庭NAS之三:在TrueNAS SCALE上安装qBittorrent 大部分家庭NAS用户应该都会装一个下载工具。本篇以qBittorrent为例&…...
Matplotlib中文显示解决方案:字体渲染机制与font.sans-serif设置
在Matplotlib中,设置font.sans-serif参数为中文字体如SimHei,可以使图表支持中文显示的原因在于Matplotlib的字体渲染机制。以下是详细解释: 1. **字体支持**: Matplotlib默认使用的字体可能不支持中文字符。大多数西方字体只包含…...
docker +tmux 远程本地gdb调试
文章目录 远程调试docker pull失败docker上容器运行程序失败宿主机远程调试docker中运行的程序环境准备调试步骤 本地调试bugpwngdbtmuxTmux复制粘贴到其他地方pwngdb和tmux优化~~感觉用了大佬的镜像后宿主机来做pwn题都不香了~~ 远程调试 但目前不知道如何实现可以边跟着脚本…...
计算机视觉全系列实战教程 (十三):图像形态学操作
1.基本概述 (1)What 图像的形态学操作的本质:集合间的运算 几何学 (2)Why(有什么用途) 消除噪声、边缘提取、区域填充、细化和粗化、分割独立的图像元素、求图像梯度、求极大值区域或极小值区域等。 (3)Which(有哪些常见的形态学操作) A.膨胀 使得…...
python的 pyside2 安装
pip install pyside2 pip install pyqt5-tools pycharm 在pychar 的Main Menu--setings--tool--External-tools 点击 新增自定义工具 1)自定义 QtDesigner 目的:用于生成.ui文件Name :QtDesigner Group :Qt Program &a…...
R语言——数据与运算
练习基本运算: v <- c(2,4,6,9)t <- c(1,4,7,9)print(v>t)print(v < t)print(v t)print(v!t)print(v>t)print(v<t) v <- c(3,1,TRUE,23i)t <- c(4,1,FALSE,23i)print(v&t)print(v|t)print(!v)v <- c(3,0,TRUE,22i)t <- c(1,3,T…...
非强化学习的对齐方法
在文章《LLM对齐“3H原则”》和《深入理解RLHF技术》中,我们介绍了大语言模型与人类对齐的“3H原则”,以及基于人类反馈的强化学习方法(RLHF),本文将继续介绍另外一种非强化学习的对齐方法:直接偏好优化&am…...
写一个坏越的个人天地(三)
昨天卡巴卡巴还是投出了学习代码以来的第一份简历,遇到好的岗位还是想争取下的吧,虽然我觉得大概率还是gg了。 昨天完成了首页的上半部分 下半部分我的构思是左右栏,左侧为菜单栏,右侧为业务栏,左侧调整右侧router进行切换内容 可以用来展示js css的小demo 稍微调整下ro…...
【学习笔记】CSS
CSS 1、 基础篇 1.1、选择器 1.2、长度单位 1.3、CSS2 常用属性 1.4、盒模型 1.5、浮动 1.6、定位 position2、 CSS3 2.1、新增长度单位 2.2、新增颜色表示 2.3、新增选择器 2.4、新增盒子属性 2.5、新增背景属性 …...
与亚马逊云科技深度合作,再获WAPP、ISV认证
上半年,VERYCLOUD睿鸿股份加入亚马逊云科技的WAPP(Well-Architected Partner Programs)和ISV加速计划(ISV Accelerate Program),为客户带来更坚实优质的海外云服务。 Well-Architected 获得WAPP这项认证代表…...
idea 如何查看项目启动的端口号
方式一:查看Run/Debug Configurations: 打开IntelliJ IDEA,点击菜单栏的Run,然后选择Edit Configurations...,或者直接使用快捷键(通常是Shift Alt F10然后选择Edit Configurations)。 在打开的Run/Debug…...
年薪超过30万的网工,需要具备什么技能?
网工是一个各行各业都需要的职业,工作内容属性决定了它不会只在某一方面专精,需要掌握网络维护、设计、部署、运维、网络安全等技能。 那么,网络工程师的技术水平体现在哪些方面?今天就跟你唠唠这个。 01 先来测测你的网络设计能力…...
【杂记-浅谈OSPF协议中的邻居关系与邻接关系】
OSPF协议中的邻居关系与邻接关系 1、邻居关系2、邻接关系3、DR-other之间的邻居关系 在OSPF协议中,Neighbor relationship 邻居关系和Adjacency 邻接关系是两个核心概念,它们在路由器之间建立正确的路由信息传递机制方面起着关键作用。 1、邻居关系 邻…...
白银价格行情分析兼顾基本面和技术面
许多投资者在进行白银交易时都非常喜欢看技术指标和技术分析。他们浏览不同的网站,看各种各样的白银行情分析信息。网上的白银分析信息网站非常的多,讲解白银交易技巧的书籍也数不胜数,有翻译国外的,也有国人自己编写的。有的讲的…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天,数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具,在大规模数据获取中发挥着关键作用。然而,传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时,常出现数据质…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
