# three可视化

**Repository Path**: gzhou/three-visualization

## Basic Information

- **Project Name**: three可视化
- **Description**: threejs的大屏可视化项目的第一次尝试
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-04-03
- **Last Updated**: 2024-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目整体架构
 核心：react18+vite+ts+threejs^0.153.0+echarts^5.4.2以及antDesign的一个表格，设计采用DataV，但是并没有直接使用，因为版本不支持，DataV最近一次更新应该是在几年前，直接复制其部分源代码进行封装或直接应用
# 找不到相应的类型声明
 若为node内置模块应该使用npm i @type/node添加声明
# 找不到二级模块声明
 对应以下代码
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 暂未找到解决方式，只能给摄像机找到一个合适的位置或者强行忽略报错
 6/29：在模块后面加上.js后缀即可解决，感谢李嘉图大佬的指导
# 支持
 地图数据来源于阿里云可视化平台，手动解析数据
 由于对geojson的格式规范不算熟悉，可能实际渲染的效果并不是我国的法定边界，如果有专业的朋友可以尝试重现将数据解析渲染然后与我联系
 边框样式来自于DataV，但是开发时(3023/7/1)react版本为18，DataV不支持，将其中部分代码重新封装之后应用了过来
 航线数据由爬虫爬取整理而来，基础网站为[https://gj.aizhan.com/feiji.html](https://gj.aizhan.com/feiji.html)，请勿将数据用于商业用途，否则对方可能会追求法律责任，爬虫代码有未知错误，因此有一两个城市的航线是空的，有意愿可以尝试自己补充
 客流数据以及发往城市数据均为随机生成，不具有代表性，只用于展示效果
# 地图的配置
 不同省份的颜色是随机生成，在鼠标悬浮的时候只设置了不透明度为完全不透明，没有单独设置颜色，如果需要设置颜色可以在china.features.forEach地图处理逻辑中将材质的color: Math.random() * 0xffffff修改为固定的值，同时在animation函数中group.children.forEach逻辑下修改材质参数，这里只是修改了材质的opacity为1
# 航线表格更新遇到的问题
 在react当中，状态管理是异步更新，只会取最后一次更新的状态，因此如果存在连续更新，刷新的时候清空添加新航线信息，则清空信息的那一次更新会失效，航线会叠加而不是刷新，处理办法是使用一个中介变量，中介变量是实时更新，每次更新状态时将中介变量的值更新到状态当中，每次刷新航线没有保存，因此重复刷新会有性能浪费，这是一个可以优化的点
# 联系方式
 QQ:2212986062
 邮箱:2212986062@qq.com/Yang_gm1314@outlook.com
 合作可以与我联系
# 效果示例
![](page.png)
# 运行方式/run
```
npm i
npm run dev
```
# 赞助
![](subsidize.jpg)