【可视化大屏开发】4.大屏配置之地球模块配置

已于 2023-07-02 14:30:07 修改
阅读量1.3k 收藏 7
点赞数 1
分类专栏： 可视化大屏 文章标签： css css3 html
于 2023-06-12 11:24:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pblh123/article/details/131165060
版权

map球体模块制作

一、需求

  1. 地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
  2. 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3

二、代码实现

在index.html文件的no盒子下面，增加map盒子

<div class="column">  
    <!--        数字模块-->  
    <div class="no">  
        <div class="no-hd">  
            <ul>                <li>1693798</li>  
                <li>1329646</li>  
            </ul>        </div>        <div class="no-bd">  
            <ul>                <li>总职位需求人数</li>  
                <li>当前有效需求人数</li>  
            </ul>        </div>    </div>    <div class="map"></div>  
</div>

在index.less文件夹中，增加一下代码

.no-bd{  
  ul {  
    display: flex;  
    li {  
      flex: 1;  
      text-align: center;  
      color: rgba(255, 255, 255, 0.7);  
      font-size: 0.225rem;  
      height: 0.5rem;  
      line-height: 0.5rem;  
      padding-top: 0.125rem;  
    }  
    li{  
      list-style: none;  
    }  
  }  
}  
// map模块配置  
.map{  
  height: 10.125rem;  
  background-color: pink;  
}

验证效果
在这里插入图片描述

需求2：球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3

在index.html中，map盒子中增加map1

<div class="column">  
    <!--        数字模块-->  
    <div class="no">  
        <div class="no-hd">  
            <ul>                <li>1693798</li>  
                <li>1329646</li>  
            </ul>        </div>        <div class="no-bd">  
            <ul>                <li>总职位需求人数</li>  
                <li>当前有效需求人数</li>  
            </ul>        </div>    </div>    <div class="map">  
        <div class="map1"></div>  
    </div></div>

球体不居中，采用相对定位，在map中增加以下代码：
index.less

// map模块配置  
.map{  
  position: relative;  
  height: 10.125rem;  
}  
.map1 {  
  width: 6.475rem;  
  height: 6.475rem;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  background: url(../images/map.png);  
  background-size: 100% 100%;  
  opacity: 0.3;  
}

在这里插入图片描述

map2模块旋转球体制作

一、需求

旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体

二、代码实现

index.html文件的map模块内，增加map2模块

<div class="column">  
    <!--        数字模块-->  
    <div class="no">  
        <div class="no-hd">  
            <ul>                <li>1693798</li>  
                <li>1329646</li>  
            </ul>        </div>        <div class="no-bd">  
            <ul>                <li>总职位需求人数</li>  
                <li>当前有效需求人数</li>  
            </ul>        </div>    </div>    <div class="map">  
        <div class="map1"></div>  
        <div class="map2"></div>  
    </div></div>

在less文件中的map模块内，增加map2模块

// map模块配置  
.map{  
  position: relative;  
  height: 10.125rem;  
}  
.map1 {  
  width: 6.475rem;  
  height: 6.475rem;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  background: url(../images/map.png);  
  background-size: 100% 100%;  
  opacity: 0.3;  
}  
.map2{  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 8.0375rem;  
  height: 8.0375rem;  
  background: url(../images/lbx.png);  
  background-size: 100% 100%;  
}

测试效果如下
在这里插入图片描述

制作动画
在index.less文件中，map2代码修改

// map模块配置  
.map{  
  position: relative;  
  height: 10.125rem;  
}  
.map1 {  
  width: 6.475rem;  
  height: 6.475rem;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  background: url(../images/map.png);  
  background-size: 100% 100%;  
  opacity: 0.3;  
}  
.map2{  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 8.0375rem;  
  height: 8.0375rem;  
  background: url(../images/lbx.png);  
  background-size: 100% 100%;  
  animation: rotate1 15s linear infinite;  
}  
@keyframes rotate1 {  
  from{  
    transform: translate(-50%, -50%) rotate(0deg);  
  }  
  to {  
    transform: translate(-50%, -50%) rotate(360deg);  
  }  
}

效果
在这里插入图片描述

map3选择处理

一、需求

  1. 旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
  2. 制作地图部分（只制作部分，最后用Echarts完成地图制作）

二、代码实现

需求1：旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针

在index.html文件中，map部分增加map3盒子

<div class="map">  
    <div class="map1"></div>  
    <div class="map2"></div>  
    <div class="map3"></div>  
</div>

在index.less文件中，添加map代码

.map2{  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 8.0375rem;  
  height: 8.0375rem;  
  background: url(../images/lbx.png);  
  background-size: 100% 100%;  
  animation: rotate1 15s linear infinite;  
}  
@keyframes rotate1 {  
  from{  
    transform: translate(-50%, -50%) rotate(0deg);  
  }  
  to {  
    transform: translate(-50%, -50%) rotate(360deg);  
  }  
}  
.map3 {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 7.075rem;  
  height: 7.075rem;  
  background: url(../images/jt.png);  
  background-size: 100% 100%;  
}

在这里插入图片描述

制作动画，逆时针选择

.map2{  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 8.0375rem;  
  height: 8.0375rem;  
  background: url(../images/lbx.png);  
  background-size: 100% 100%;  
  animation: rotate1 15s linear infinite;  
}  
@keyframes rotate1 {  
  from{  
    transform: translate(-50%, -50%) rotate(0deg);  
  }  
  to {  
    transform: translate(-50%, -50%) rotate(360deg);  
  }  
}  
.map3 {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 7.075rem;  
  height: 7.075rem;  
  background: url(../images/jt.png);  
  background-size: 100% 100%;  
  animation: rotate2 10s linear infinite;  
}  
@keyframes rotate2 {  
  form {  
    transform: translate(-50%, -50%) rotate(0deg);  
  }  
  to {  
    transform: translate(-50%, -50%) rotate(-360deg);  
  }  
}

在这里插入图片描述

把map2和map3的透明度调整成0.6。在index.less文件中的map2和map3中添加如下代码

// map模块配置  
.map{  
  position: relative;  
  height: 10.125rem;  
}  
.map1 {  
  width: 6.475rem;  
  height: 6.475rem;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  background: url(../images/map.png);  
  background-size: 100% 100%;  
  opacity: 0.3;  
}  
.map2{  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 8.0375rem;  
  height: 8.0375rem;  
  background: url(../images/lbx.png);  
  background-size: 100% 100%;  
  animation: rotate1 15s linear infinite;  
  opacity: 0.6;  
}  
@keyframes rotate1 {  
  from{  
    transform: translate(-50%, -50%) rotate(0deg);  
  }  
  to {  
    transform: translate(-50%, -50%) rotate(360deg);  
  }  
}  
.map3 {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 7.075rem;  
  height: 7.075rem;  
  background: url(../images/jt.png);  
  background-size: 100% 100%;  
  animation: rotate2 10s linear infinite;  
  opacity: 0.6;  
}  
@keyframes rotate2 {  
  form {  
    transform: translate(-50%, -50%) rotate(0deg);  
  }  
  to {  
    transform: translate(-50%, -50%) rotate(-360deg);  
  }  
}

需求2：制作地图部分（只制作部分，最后用Echarts完成地图制作）

index.html文件中增加chart代码

<div class="map">  
    <div class="map1"></div>  
    <div class="map2"></div>  
    <div class="map3"></div>  
    <div class="echart">地图模块</div>  
</div>

设置less代码
index.less

.map3 {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 7.075rem;  
  height: 7.075rem;  
  background: url(../images/jt.png);  
  background-size: 100% 100%;  
  animation: rotate2 10s linear infinite;  
  opacity: 0.6;  
}  
@keyframes rotate2 {  
  form {  
    transform: translate(-50%, -50%) rotate(0deg);  
  }  
  to {  
    transform: translate(-50%, -50%) rotate(-360deg);  
  }  
}  
.echart{  
  position: absolute;  
  top: 0;  
  left: 0;  
  background-color: pink;  
  width: 100%;  
  height: 10.125rem;  
}

效果
在这里插入图片描述

把pink色注释掉，后期用Echarts地图完成

.map3 {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 7.075rem;  
  height: 7.075rem;  
  background: url(../images/jt.png);  
  background-size: 100% 100%;  
  animation: rotate2 10s linear infinite;  
  opacity: 0.6;  
}  
@keyframes rotate2 {  
  form {  
    transform: translate(-50%, -50%) rotate(0deg);  
  }  
  to {  
    transform: translate(-50%, -50%) rotate(-360deg);  
  }  
}  
.echart{  
  position: absolute;  
  top: 0;  
  left: 0;  
  //background-color: pink;  
  width: 100%;  
  height: 10.125rem;  
}

在这里插入图片描述

后续模块进入Echarts相关的开发，推荐大家提前学习Echarts相关开发

可视化大屏项目参考链接

【可视化大屏开发】1.基础开发环境准备_pblh123的博客-CSDN博客
【可视化大屏开发】2.基础项目配置及大屏布局_pblh123的博客-CSDN博客
【可视化大屏开发】3.大屏配置之数字模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】4.大屏配置之地球模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】5.大屏配置之Echarts入门学习_pblh123的博客-CSDN博客
【可视化大屏开发】6.可视化大屏配置之静态图柱形图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】7.可视化大屏配置之静态图条形图定制_pblh123的博客-CSDN博客
【可视化大屏开发】8. 可视化大屏配置之静态图折线图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】9. 可视化大屏配置之静态图折线图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】12. 可视化大屏配置之静态图中国地图定制_pblh123的博客-CSDN博客
【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据_pblh123的博客-CSDN博客
【可视化大屏开发】14. Maven打包可视化大屏项目-发布jar包_pblh123的博客-CSDN博客
【可视化大屏开发】15.可视化大屏项目-网络访问静态数据无法更新问题修复_pblh123的博客-CSDN博客
【可视化大屏开发】16. 可视化大屏项目共性优化问题_pblh123的博客-CSDN博客
17.可视化大屏配置之代码整理资源-CSDN文库
可视化大屏项目动态数据样例资源-CSDN文库

pblh123
关注
专栏目录
基于threejs开发的3D地球大屏可视化，支持2D地图模式，飞线，涟漪，配置简单易上手
qq81650984的博客
08-10 2791
基于threejs开发的地球大屏可视化纯js组件,适用所有前端js项目
一个简单的动态3d地图demo可以拿来做大屏展示
08-10
一个简单的动态3d地图demo，可以拿来做大屏展示
【可视化大屏开发】7.可视化大屏配置之静态图条形图定制
pblh123的专栏
06-27 1267
Echarts,条形图定制，idea
可视化大屏C位图：​地理信息—地球焦点图
贝格前端工场的博客
04-14 482
Hello，我是大千UI工场，本期可视化大屏的焦点图（C位）分享将地球作为焦点图的情形，欢迎友友们关注、评论，如果有订单可私信。
threejs三维地图大屏项目分享
netcy的专栏
11-09 7624
上面分享的三维地图大屏。echart使用json解析生成地图projection投影svg 解析生成三维地图模型动态材质修改贴图的offset和repeat算法等经纬度定位，双线性差值三维的三维坐标转平面坐标的投影算法最终多个技术的融合，做出了文章开头的效果。其中比较难的是中间三维地图的生成和效果优化方案，如果有类似需求的读者可以参考。如果你有好的经验，也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。
关于css/animation写动画,老是忘记.写个博客记录下
weixin_47705597的博客
08-21 547
1.创建动画@keyframes 动画名 {from {} to{}} 2.谁用谁调用 animation: 动画名 执行一遍时间S为单位 执行速度linear匀速 执行次数infinite无限; 如下: 上代码 .div { //当前元素调用下边定义的动画 adnimation: rotate1 15s linear infinite; } //当前动画为原位不动旋转360度 @keyframes rotate1 { //开始 form { transform: translate(-5
基于JavaScript、CSS、HTML的three可视化智慧大屏设计源码
最新发布
09-28
该项目是一款基于JavaScript、CSS和HTML的three.js库驱动的智慧...源码集成了地球地图展示、操作仓界面，并具备环境监测、紧急管理、首页总览、能量管理以及综合能源监控中心等功能模块，适用于展示各类数据和信息。
三维地球-使用React+Three.js开发的三维地球前端-优质项目实战.zip
02-18
4. **设置相机和光照**：配置一个透视相机，使其能随用户的视角移动。添加不同类型的光照（如环境光、点光源等）以模拟真实的光照效果。 5. **实现交互**：添加事件监听器，使用户可以通过鼠标或触摸设备旋转、缩放...
用flask+echarts打造一个数据可视化大屏幕
热门推荐
凯哥大数据——刘凯的博客
10-14 2万+
文章目录1. big_screen项目说明2. big_screen项目文件布局3. 四大模块核心代码分析3.1 数据准备模块3.2 flask网页服务模块3.3 网页视图模块a. 网页大标题b. 左右两栏的图表c. 中间一栏的图表d. 图表echarts属性设置3.4 static静态元素分析a. 显示时间的函数b. 页面淡入和视图自适应的函数4. 总结 1. big_screen项目说明 源自github上逛到的一个项目，用flask和echarts实现了一个大屏幕显示，运行app.py后，在网页上输入
python基础教程：python实现3D地图可视化
12-21
在3D地图可视化中，matplotlib的Axes3D模块特别有用，它可以创建3D坐标系，并绘制3D散点图或表面。 代码示例中，首先通过gdal打开并读取TIFF地图文件，提取各个波段的信息，然后使用cv2.merge合并这些波段以得到...
基于React+Koa实现一个h5页面可视化编辑器－Dooring
趣谈前端
08-24 3393
前言前段时间笔者一直忙于数据可视化方面的工作，比如如何实现拖拽式生成可视化大屏，如何定制可视化图表交互和数据导入方案等，这块需求在B端企业中应用非常大，所以非常有探索价值。本篇文章并非和...
CSS添加图形旋转动画
liu5282828的博客
09-22 436
添加旋转图形动画 .boll { width: 48px; height:48px; position: absolute; top: 4.5%; left: 35%; transform: translate(-50%, -50%); background: url(img/BNM.png) no-repeat; background-size: 100% 100%; opacity: 0.3; animation: rota
css3 animation关键帧和transform转换实现旋转动画
weixin_42254016的博客
04-03 1715
css3 animation关键帧和transform转换实现旋转动画 效果：内环顺时针旋转，外环逆时针旋转 思路：用两张图片（内圈和外圈各一张），使用keyframes定义两组动画，内环使用transform:rotate定义顺时针转换，外环定义逆时针转换 代码： @-webkit-keyframes rotation1 { from { -webkit-transform: ro...
给元素添加动画实现旋转的效果
hope_lucky的博客
04-17 129
旋转动画如此简单 如果爱她就让她学敲代码吧
使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-25 2880
声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。背景近期工作有涉及到数字大屏的需求，于是利用业余时间，结合 Three.js 和 CSS实现赛博朋克2077风格视觉效果[2] 实现炫酷 3D 数字地球大屏页面。页面使用 React + Three.js + Echarts + stylus 技术栈，本文涉及到的主要知识点包括：T...
前端大屏展示可视化——地图的绘制（Echarts）
weixin_46115723的博客
01-29 2253
大屏展示可视化，echarts
手把手教你做出数据可视化项目（三）3D地球旋转_大数据旋转动态是怎么做的
2401_84181253的博客
05-04 311
这个效果是echarts库中自带的globe属性，我们在echarts官网上可以找到实例。实际上就是两张大贴纸！一张是环境贴纸，一张是地球贴纸。JS代码：（注释很详细，看不懂功能的看注释），可以直接做模板放在js文件中使用！
可视化大屏设计尺寸_可视化大屏设计避坑指南
weixin_39593718的博客
01-10 774
最近做个几个可视化大屏的设计，过程中踩了一下坑，也有一些经验和大家分享。当我们拿到一个可视化大屏的需求时，往往它是模糊的，所以我们可以通过Why、Who、Where、What等角度将需求明确。WHY首先我们要明确为什么要设计可视化大屏，是辅助决策还是信息展示，如果是辅助决策我们可能要更多的去展示一下总结判断性的信息来辅助用户进行判断，更看重信息传达的有效性，如果是展示型大屏则更倾向于视觉...
css动画效果
m0_51431448的博客
03-23 1万+
动画1（沿着椭圆转动） 其实是个2D转动，只不过咱们设置椭圆，然后加上scale缩放（近大远小），看上去就是3D效果 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...
cesium可视化大屏
08-03
Cesium是一个开源的JavaScript库，专用于创建高度交互式的三维地球、地图和空间场景。它特别适合于构建大规模的数据可视化大屏应用，比如地理信息系统（GIS）、虚拟现实（VR）体验、实时飞行模拟等。Cesium支持高度详细的地形数据、卫星图像、3D模型以及丰富的用户交互功能，能够提供沉浸式的大屏视觉体验。 使用Cesium进行大屏可视化，开发者可以轻松加载全球范围的地图数据，动态展示地理位置信息、天气变化、城市规划等复杂数据，并通过动画效果和交互控件增强观众的理解。它还提供了高效的性能优化，能够在大型显示器上流畅运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值