vue3-openlayers 图标闪烁、icon闪烁、marker闪烁

本篇介绍一下使用vue3-openlayers 图标闪烁、icon闪烁、marker闪烁

1 需求

  • 图标闪烁、icon闪烁、marker闪烁

2 分析

图标闪烁、icon闪烁、marker闪烁使用ol-animation-fade组件

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><ol-source-vector><ol-animation-fade :duration="1000" :repeat="Infinity"><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.5, 31]"></ol-geom-point><ol-style><ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon></ol-style></ol-feature></ol-animation-fade><ol-animation-fade :duration="2000" :repeat="Infinity"><ol-feature><ol-geom-point:coordinates="[111.3, 31]"></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="[115.5, 32]"></ol-geom-point><ol-style><ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon></ol-style></ol-feature></ol-animation-fade></ol-source-vector></ol-vector-layer></ol-map>
</template><script setup lang="ts">
import iconSrc from '@/assets/image/truck.png';const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const mapRef = ref();
const key = '替换为天地图key';
const sourceRef = ref(null);
</script>
<style scoped lang="scss"></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/39884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

读人工智能全传03分治策略

1. 黄金年代 1.1. 图灵在他发表的论文《计算机器与智能》中介绍了图灵测试&#xff0c;为人工智能学科迈出第一步做出了重大贡献 1.2. 美国在第二次世界大战后几十年里计算机技术发展的特色&#xff0c;也是美国在未来60年内确立人工智能领域国际领先地位的核心 1.3. 1955年…

lodash中flush的使用(debounce、throttle)

在项目的配置中&#xff0c;看到了一个请求&#xff0c;类似是这样的 import { throttle } from lodash-es// 请求函数 async function someFetch(){const {data} await xxx.post()return data }// 节流函数 async function throttleFn(someFetch,1000)// 执行拿到数据函数 a…

leetcode--二叉树中的最长交错路径

leetcode地址&#xff1a;二叉树中的最长交错路径 给你一棵以 root 为根的二叉树&#xff0c;二叉树中的交错路径定义如下&#xff1a; 选择二叉树中 任意 节点和一个方向&#xff08;左或者右&#xff09;。 如果前进方向为右&#xff0c;那么移动到当前节点的的右子节点&…

大数据开发中的数据生命周期管理

上班越久&#xff0c;发现有些数据一直放在那里&#xff0c;根本没有流动&#xff0c;完全没有发挥价值&#xff0c;数据是有生命周期的&#xff0c;而且生命周期管理得好&#xff0c;工作就会更轻松。 目录 引言数据创建示例代码 数据存储示例代码 数据使用示例代码 数据维护示…

JavaScript中闭包的理解

闭包&#xff08;Closure&#xff09;概念&#xff1a;一个函数对周围状态的引用捆绑在一起&#xff0c;内层函数中访问到其外层函数的作用域。简单来说;闭包内层函数引用外层函数的变量&#xff0c;如下图&#xff1a; 外层在使用一个函数包裹住闭包是对变量的保护&#xff0c…

学习python常用的英语单词,有音标,有音节划分,适合英语基础差的人来入门

if [ɪf] 如果 else [els] 否则 while [waɪl] 当...的时候 for [fɔ:r] “对于”或“遍历”&#xff0c;适合于 break [brek] 中断 continue [kəntɪnju:] 继续 con ti nue [kən tɪ nju:] pass [pɑ:s] 通过 height [haɪt] 高度 weight [weɪt] 重量 keyword [ki:w…

sping-10

什么是 bean 装配 在Java中&#xff0c;bean装配是一种将对象&#xff08;也称为bean&#xff09;与其他对象之间建立关联关系的方法。这种装配可以通过手动编写代码来实现&#xff0c;也可以使用依赖注入框架&#xff08;如Spring&#xff09;来自动完成。 在bean装配中&…

【计算机视觉系列实战教程 (实战02)】:基于特征点匹配的图像配准

这里写目录标题 1、特征点提取(1)GFTT算法提取特征点A.What&#xff08;什么是GFTT&#xff09;B.GFTT的优势C.How&#xff08;如何使用GFTT算法提取图像特征点&#xff09; (2)FAST算法提取特征点A.What&#xff08;什么是FAST角点&#xff09;B.FAST角点的强度值C.How&#x…

每日Attention学习8——Rectangular self-Calibration Attention

模块出处 [ECCV 24] [link] [code] Context-Guided Spatial Feature Reconstruction for Efficient Semantic Segmentation 模块名称 Rectangular self-Calibration Attention (RCA) 模块作用 空间注意力 模块结构 模块代码 import torch import torch.nn as nn import tor…

Ubuntu 22.04.1 LTS 离线安装Docker

确定linux版本 cat /etc/lsb-release DISTRIB_IDUbuntuDISTRIB_RELEASE22.04DISTRIB_CODENAMEjammyDISTRIB_DESCRIPTION"Ubuntu 22.04.1 LTS"确定dpkg版本 sudo dpkg --print-architecture amd64下载地址 https://download.docker.com/linux/ubuntu/dists/jamm…

C++ | Leetcode C++题解之第216题组合总和III

题目&#xff1a; 题解&#xff1a; class Solution { private:vector<vector<int>> res;void backtracking(int k, int n, vector<int> ans){if(k 0 || n < 0){if(k 0 && n 0){res.emplace_back(ans);}return;}int start (ans.size() 0 ?…

深入解析Transformer中的多头自注意力机制:原理与实现

深入解析Transformer中的多头自注意力机制&#xff1a;原理与实现 Transformer模型自2017年由Vaswani等人提出以来&#xff0c;已经成为自然语言处理&#xff08;NLP&#xff09;领域的一个里程碑。其核心机制之一——多头自注意力&#xff08;Multi-Head Attention&#xff0…

字节一年,人间三年

想来字节做研发&#xff0c;可以先看我这三年的体会和建议。 大家好&#xff0c;我是白露啊。 今天和大家分享一个真实的故事&#xff0c;是关于字节网友分享自己三年的工作经历和感受。 由于白露也曾在字节待过两年&#xff0c;可以说&#xff0c;说的都对。 你有没有想过来…

javascript url 传递参数中文乱码问题解决方案

在 JavaScript 中&#xff0c;传递 URL 参数时&#xff0c;如果参数包含中文字符&#xff0c;可能会出现乱码问题。解决这一问题可以使用 encodeURIComponent 和 decodeURIComponent 函数。这些函数会对 URL 参数进行编码和解码&#xff0c;确保特殊字符&#xff08;包括中文字…

填报高考志愿,怎样正确地选择大学专业?

大学专业的选择&#xff0c;会关系到未来几年甚至一辈子的发展方向。这也是为什么很多人结束高考之后就开始愁眉苦脸&#xff0c;因为他们不知道应该如何选择大学专业&#xff0c;生怕一个错误的决定会影响自己一生。 毋庸置疑&#xff0c;在面对这种选择的时候&#xff0c;我…

全网最简单的Java设计模式【三】工厂方法模式详解

Java工厂方法模式详解 一、概念介绍 1. 什么是工厂方法模式&#xff1f; 工厂方法模式&#xff08;Factory Method Pattern&#xff09;是一种创建型设计模式&#xff0c;它允许定义一个接口或抽象类来创建对象&#xff0c;但将实际对象的实例化延迟到子类中实现。工厂方法模…

mybatis mapper.xml 比较运算符(大于|小于|等于)的写法: 转义和<![CDATA[]]>

文章目录 引言I 使用xml 原生转义的方式进行转义II 使用 <![CDATA[ 内容 ]]>引言 应用场景:查询时间范围 背景:在 *.xml 中使用常规的 < > = <= >= 会与xml的语法存在冲突 <![CDATA[]]> 比 转义符 来的繁琐 <![CDATA[]]> 表示xml解析器忽略…

c++ 联合(Union)的特性和使用

联合&#xff08;Union&#xff09;是一种特殊的数据结构&#xff0c;允许在同一内存位置存储不同的数据类型。一个 union 可以有多个数据成员&#xff0c;但是在任意时刻只有一个数据成员可以有值。当某个成员被赋值后其他成员变为未定义状态。以下是联合的主要特点和使用方式…

工程安全监测仪器振弦采集仪提升工程质量和安全水平

工程安全监测仪器振弦采集仪提升工程质量和安全水平 振弦采集仪是一种重要的工程安全监测仪器&#xff0c;可以用来监测建筑物、桥梁、隧道等工程结构的振动情况。它通过测量结构物的振动频率和振幅&#xff0c;可以提供关键的数据用于评估结构的安全性和稳定性。振弦采集仪在…

无法解析的外部符号 _imp_XXX

问题解决&#xff1a;无法解析的外部符号 _imp_XXXXXXXXX-CSDN博客 解决方法 1. 打开网站&#xff0c;搜索相关函数&#xff0c;找到其关联库lib 2. 程序指定链接到库。注意该语法是msvc编译器特有特性。 #pragma comment(lib, "xxxx.lib")