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

【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.lryc.cn/news/482152.html

相关文章:

  • MyBatis几种SQL写法
  • 蓝牙音响音频功放:【矽源特HAA9809 AB+D类自动切换】
  • Webpack知识点—publicPath
  • 【JAVA】Java基础—面向对象编程:构造方法的重载
  • 科研绘图系列:R语言多图形组合(barplot boxplot stacked plots)
  • 诡异的win11远程桌面连接一闪而过
  • 基因组编辑与CRISPR技术:基因治疗的革命性突破
  • 智能检测技术与传感器(热电传感器四个定律)
  • C# WPF FontDialog字体对话框,ColorDialog颜色对话框 引用
  • 在unity中实现把普通的照片,图片 变成油画风格的shader实现
  • 使用elementUI实现表格行拖拽改变顺序,无需引入外部库
  • PySpark 数据处理实战:从基础操作到案例分析
  • 恒源云使用手册记录:从服务器下载数据到本地
  • 【大咖云集 | IEEE计算智能学会广州分会支持】第四届信息技术与当代体育国际学术会议(TCS 2024,12月13-15日)
  • 【AI声音克隆整合包及教程】第二代GPT-SoVITS V2:技术、应用与伦理思考
  • 利用AI制作《职业生涯规划PPT》,10分钟完成
  • 【Java多线程】线程安全及解决方案(详解)
  • 【前端基础】Javascript取整函数以及向零取整方式
  • 禅道与Jira与Ones对比:哪个更适合你的项目管理需求?
  • Linux I/O编程:I/O多路复用与异步 I/O对比
  • Spark Plan 之 SQLMetric
  • 基于YOLOv5模型的火焰识别系统
  • 多模态AI:开启人工智能的新纪元
  • 麒麟信安支撑2024年电力监控系统网络安全加固培训护航电力网络安全!
  • 横表和纵表 中的横表
  • 7个常用的JavaScript数组操作进阶用法
  • Spark的Standalone集群环境安装
  • Android Glide动态apply centerCropTransform(),transition withCrossFade动画,Kotlin
  • shukla方差和相对平均偏差
  • 双指针(二)双指针到底是怎么个事