手把手教你做出数据可视化项目(三)3D地球旋转

数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789
项目最终效果图:
在这里插入图片描述
此篇博客为自己学习pink老师的课后完成的项目的总结与记录,仅供交流参考。版权所有,转载请标注原作者!
使用echarts技术做的可视图,此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。
echarts相关概念:https://blog.csdn.net/diviner_s/article/details/115934089

手把手教你做出数据可视化项目(四)地球上方动态航线效果传送门

3D大地球旋转

在这里插入图片描述
看这个炫酷的3D大地球帅不!

直接上代码~~~,可以直接做模板放在js文件中使用!!!!
JS代码:(注释很详细,看不懂功能的看注释)

 /****************** 3D地球 ********************/
    //初始化echart实例
    const globe3D = echarts.init(document.getElementById("globe3D"));
    //配置项
    const globeOpt = {
      globe: {
        zoom: 0.9,
        environment: 'images/bg01.jpg', //环境贴图
        baseTexture: "images/globe.jpg", //地球的纹理
        heightTexture: "images/globe.jpg", //地图的高度纹理
        displacementScale: 0, //地球顶点位移的大小
        shading: 'realistic', //着色效果,真实感渲染
        realisticMaterial: { //真实感渲染配置
          roughness: 0.8 //材质的粗糙度
        },
        postEffect: { //后处理特效配置
          enable: true
        },
        // viewControl: {   //控制地球是否自转
        //     autoRotate: false
        // },
        light: { //光照设置
          main: { //场景主光源设置,在globe设置中就是太阳光
            intensity: 4, //主光源强度
            shadow: true //是否投影
          },
          ambientCubemap: { //使用纹理作为光源的环境光, 会为物体提供漫反射和高光反射
            texture: 'images/pisa.hdr', //环境光贴图
            diffuseIntensity: 0.1 //漫反射强度
          }
        }
      }
    };
    //渲染图表
    globe3D.setOption(globeOpt);

这个效果是echarts库中自带的globe属性,我们在echarts官网上可以找到实例
在这里插入图片描述

实际上就是两张大贴纸!一张是环境贴纸,一张是地球贴纸。贴纸奉上!拿走不送~~

在这里插入图片描述

在这里插入图片描述

将地球放置于首页中央

在项目一中页面布局代码中有,我们将对象实例化在id为globe3D中。
在这里插入图片描述
引入echarts库中globe的js文件:

  <script type="text/javascript" src="js/echarts-gl.min.js"></script>
  • 240
    点赞
  • 615
    收藏
    觉得还不错? 一键收藏
  • 222
    评论
### 回答1: 粮仓3D可系统是一种用于实时监控和管理粮仓的软件系统。其代码主要包括前端和后端两部分。 前端代码主要负责用户界面的展示和交互。可以使用HTML、CSS和JavaScript等技术来完成。通过调用相关的前端框架,可以实现用户友好的操作界面。例如,使用Three.js库可以创建粮仓的3D模型并实现旋转、缩放等操作。使用WebSocket技术可以实现实时数据的推送和接收,将传感器数据显示在界面上。此外,还可以通过前端技术来实现用户权限管理、数据、报表生成等功能。 后端代码主要负责处理前端发送的请求并与数据库进行交互。常用的后端开发语言有Java、Python、C#等。通过搭建服务器,可以接受前端请求并返回相应的数据。后端代码可以包括数据库操作、API接口的开发、数据处理和分析等功能。例如,使用MySQL数据库可以存储粮仓的相关数据;使用Django等后端框架可以搭建服务器并实现数据的增删改查操作;使用数据分析库(如Pandas、NumPy等)可以对粮仓数据进行统计和分析。 粮仓3D可系统的代码编写需要结合具体的开发工具和技术栈,也需要根据实际的需求进行功能设计和编程实现。通过前端和后端代码的协同工作,可以实现对粮仓的实时监控、数据管理和分析等功能。同时,注重代码的可维护性和扩展性,可以使系统更加稳定、可靠和易于维护。 ### 回答2: 粮仓3D可系统代码是用于实现粮仓三维可展示的程序代码。这个系统能够将粮仓内部的情况呈现出来,包括粮食的存储情况、粮仓结构、湿度、温度等信息。下面是一个简单的代码示例: ```python import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D # 创建粮仓数据 grain_bin = np.zeros((10, 10, 10)) # 假设粮仓大小为 10x10x10 # 随机生成一部分粮食的存储情况 for _ in range(50): # 生成50个随机坐标 x = np.random.randint(0, 10) y = np.random.randint(0, 10) z = np.random.randint(0, 10) grain_bin[x, y, z] = 1 # 可粮仓 fig = plt.figure() ax = fig.add_subplot(111, projection='3d') # 遍历粮仓数据,绘制已存储粮食的立方体 for x in range(10): for y in range(10): for z in range(10): if grain_bin[x, y, z] == 1: ax.bar3d(x, y, z, dx=1, dy=1, dz=1, color='b') # 设置坐标轴标签 ax.set_xlabel('X') ax.set_ylabel('Y') ax.set_zlabel('Z') # 设置坐标轴范围 ax.set_xlim(0, 10) ax.set_ylim(0, 10) ax.set_zlim(0, 10) # 显示可结果 plt.show() ``` 以上代码实现了一个简单的粮仓3D可系统。通过生成随机坐标模拟了粮食的存储情况,并使用matplotlib库的3D功能进行可展示。用户可以根据实际需要修改粮仓大小、存储情况等参数来适应不同的场景。
评论 222
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值