【vue】echarts地图添加蒙版图片,多图层地图实现天气信息展示

 实现原理:多层图层叠加实现复杂的信息展示。

<template><div class="wrapper"><el-drawertitle="天气信息":modal="iszz":visible.sync="weatherinfo":direction="direction"><drawer:labelname="labelname":coordinates="coordinates":selectcityid="selectcityid":pdate="pdate":radio="radio"></drawer></el-drawer><div style="background-image: url(/img/map/bjditu.jpg); height: 100%">
<!--    <div style="background: white; height: 100%">--><div><el-radio-group v-model="radio" style="margin: 30px 100px;" ref="radio" @input="changeRadio"><el-radio :label="3" border style="color: white;">国内气象源</el-radio><el-radio :label="6" border style="color: white;">国外气象源</el-radio><el-radio :label="9" border style="color: white;">城市气象院</el-radio></el-radio-group></div><div ref="myEchart" :style="{width: '100%', height: height}"></div><imgref="mapSvg"id="mapSvg"v-show="false"style="width: 500px; height: 100%"src="/img/map/wl.png"alt=""/></div><divclass="time-slide"@mouseenter="changeActive($event)"@mouseleave="removeActive($event)"><el-sliderv-model="timepid":step="1":min="1":max="96":marks="marks":show-stops="true"@change="valueChange":format-tooltip="formatToolTip"></el-slider></div></div>
</template>

资源包:点这里

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

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

相关文章

100+SCI科研绘图系列教程(R和python)

科研绘图系列&#xff1a;箱线图加百分比点图展示组间差异-CSDN博客科研绘图系列&#xff1a;箱线图加蜜蜂图展示组间数据分布-CSDN博客科研绘图系列&#xff1a;小提琴图和双侧小提琴图展示组间差异-CSDN博客科研绘图系列&#xff1a;组间差异的STAMP图的ggplot2实现-CSDN博客…

QT鼠标事件

QT鼠标事件 1.概述 这篇文章介绍如何使用事件和获取事件的信号 2.创建项目 创建一个widget类型项目&#xff0c;在widget.ui文件中添加一个label控件 然后在项目名称上右键选择Add new... 添加文件&#xff0c;选择 C Class 自定义类名Mylabel&#xff0c;选择基类Base …

“双十一”电商狂欢进行时,在AI的加持下看网易云信IM、RTC如何助力商家!

作为一年一度的消费盛会&#xff0c;2024年“双十一”购物狂欢节早已拉开帷幕。蹲守直播间、在主播热情介绍中点开链接并加购&#xff0c;也已成为大多数人打开“双11”的重要方式。然而&#xff0c;在这火热的购物氛围背后&#xff0c;主播频频“翻车”、优质主播稀缺、客服响…

深入浅出rust内存对齐

在 Rust 中&#xff0c;内存对齐是一个重要的概念&#xff0c;它涉及到数据在内存中的存储方式&#xff0c;以及如何优化内存访问的效率。往往一门语言的内存布局以及对齐方式决定了一门语言的性能&#xff0c;因此学会并深入理解rust中内存布局会让我们写出高性能的rust代码&a…

C++的起源与发展

一、C的起源与初期发展 C的起源可以追溯到1979年&#xff0c;当时丹麦计算机科学家比雅尼斯特劳斯特鲁普&#xff08;Bjarne Stroustrup&#xff09;在贝尔实验室从事计算机科学和软件工程的研究工作。面对项目中复杂的软件开发任务&#xff0c;特别是模拟和操作系统的开发工作…

SDL渲染器和纹理

文章目录 渲染器 (SDL_Renderer)纹理 (SDL_Texture)代码 渲染器 (SDL_Renderer) &#xff1a;它是渲染内容的接口&#xff0c;负责将内容绘制到窗口中。通过SDL_CreateRenderer创建&#xff0c;可以设置渲染器的背景颜色、绘图颜色、透明度等。所有绘图操作&#xff08;如绘制…

题目练习之二叉树那些事儿(续集)

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨个人…

go语言 分布式一致

flowchart TDStart([接收 key]) --> CheckCache{检查是否被缓存}CheckCache -->|是| ReturnCache1[返回缓存值 ⑴]CheckCache -->|否| CheckRemote{是否应当从远程节点获取}CheckRemote -->|是| HashSelect[使用一致性哈希选择节点]HashSelect --> IsRemote{是否…

【STL栈和队列】:高效数据结构的应用秘籍

前言&#xff1a; C 标准模板库&#xff08;STL&#xff09;为我们提供了多种容器&#xff0c;其中 stack&#xff08;栈&#xff09;和 queue&#xff08;队列&#xff09;是非常常用的两种容器。 根据之前C语言实现的栈和队列&#xff0c;&#xff08;如有遗忘&#xff0c;…

Zabbix 7 最新版本安装 Rocky Linux 8

前言 本实验主要在Rocky Linux 中安装Zabbix&#xff0c;其他centos8、Debian、Ubuntu、Alma Linux都可以安装&#xff0c;就是在中间件有点不同。Nginx就要配置一下&#xff0c;官网给的教程也算是很规范的&#xff0c;就是在MySQL上要自己安装&#xff0c;他没有告诉我们&am…

docker里rtsp推流+同一个docker接受流进行部署

1.参考&#xff1a; https://blog.csdn.net/m0_57609406/article/details/140323327 2.dockerfile命令 # 使用官方 Python 基础镜像 FROM python:3.8.18-slim# 设置工作目录 WORKDIR /usr/src/app# 安装必要的软件包&#xff08;FFmpeg、OpenCV、lsof、RTSP工具&#xff09;…

主进程main.js打印中文时终端显示乱码解决方案

{"name": "aaa","version": "1.0.0","description": "first electron app","main": "main.js","scripts": {// 解决乱码的问题"start": "chcp 65001 && no…

git新手使用教程

git新手使用教程 一、安装和初始化配置2、新建仓库3.工作区域和文件状态4.添加和提交文件5 git reset回退版本6 使用git diff查看差异7 使用git rm删除文件8 .gitignore忽略文件9 注册GitHub账号10 SSH配置和克隆仓库11 关联本地仓库和远程仓库12 Gitee的使用 由B站视频教程整理…

【GPTs】Email Responder Pro:高效生成专业回复邮件

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 &#x1f4af;GPTs指令&#x1f4af;前言&#x1f4af;Email Responder Pro主要功能适用场景优点缺点 &#x1f4af;小结 &#x1f4af;GPTs指令 中文翻译&#xff1a; Email Craft 是一款专门用于…

使用yarn,如何编译打包electron?

要使用yarn编译打包Electron应用&#xff0c;可以按照以下步骤操作&#xff1a; 安装Electron Forge或Electron Builder&#xff1a; Electron Forge是一个一体化工具&#xff0c;可以处理Electron应用程序的打包与分发。可以通过yarn安装Electron Forge CLI工具包到项目的devD…

2024下半年软考系统架构师案例分析题试题与答案--ROS机器人操作系统

一、知识点回顾 ROS(Robot Operating System)是一个用于编写机器人软件的框架。它提供了一系列的工具和库,帮助开发者创建复杂的、可以在多种操作系统上运行的机器人应用程序。 ROS的主要特点包括: 分布式计算能力:ROS提供了一种方式让多个计算机或设备协同工作,通过…

uni-app表格带分页,后端处理过每页显示多少条

uni-app表格带分页&#xff0c;后端处理过每页可以显示多少条&#xff0c;一句设置好了每页显示的数据量&#xff0c;不需要钱的在进行操作&#xff0c;在进行对数据的截取 <th-table :column"column" :listData"data" :checkSort"checkSort"…

安川电源模块:YASKAWA CPS-IONB或CPS-I0NB

‌安川电源模块‌是一种直接贴装在印刷电路板上的电源供应器&#xff0c;主要用于为专用集成电路&#xff08;ASIC&#xff09;、数字信号处理器&#xff08;DSP&#xff09;、微处理器、存储器、现场可编程门阵列&#xff08;FPGA&#xff09;及其他数字或模拟负载提供供电。这…

探索Copier:Python项目模板的革命者

文章目录 **探索Copier&#xff1a;Python项目模板的革命者**1. 背景介绍&#xff1a;为何Copier成为新宠&#xff1f;2. Copier是什么&#xff1f;3. 如何安装Copier&#xff1f;4. 简单库函数使用方法4.1 创建模板4.2 从Git URL创建项目4.3 使用快捷方式4.4 动态替换文本4.5 …

密码学知识点整理二:常见的加密算法

常用的加密算法包括对称加密算法、非对称加密算法和散列算法。 对称加密算法 AES&#xff1a;高级加密标准&#xff0c;是目前使用最广泛的对称加密算法之一&#xff0c;支持多种密钥长度&#xff08;128位、192位、256位&#xff09;&#xff0c;安全性高&#xff0c;加密效率…