# earthToMap

**Repository Path**: math_span/earth-to-map

## Basic Information

- **Project Name**: earthToMap
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-29
- **Last Updated**: 2025-12-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 3D地球转场动画

这是一个基于Vue3和ECharts GL的炫酷3D地球转场动画项目。

## 功能特点

- 🌍 3D地球从远处缓缓转场到视口
- 🗺️ 平滑过渡到3D地图展示
- ✨ 炫酷的视觉效果和动画
- 🚀 流畅自然的转场动画，无卡顿

## 技术栈

- Vue 3
- ECharts 5.x
- ECharts-GL 2.x
- Vite

## 安装和运行

1. 安装依赖：
```bash
npm install
```

2. 启动开发服务器：
```bash
npm run dev
```

3. 构建生产版本：
```bash
npm run build
```

## 动画说明

整个动画流程：

1. **初始阶段**（0-1秒）：3D地球从800px距离开始
2. **接近阶段**（1-5秒）：地球缓缓飞近到200px距离，同时自转
3. **转场阶段**（5-8秒）：地球淡出，3D地图淡入
4. **展示阶段**（8秒后）：3D地图自动旋转展示

## 自定义配置

可以通过修改 `src/components/EarthToMapTransition.vue` 中的参数来调整：

- 动画时间：修改 `setTimeout` 的时间值
- 地球距离：调整 `viewControl.distance` 
- 自转速度：修改 `autoRotateSpeed`
- 颜色主题：调整渐变色和材质颜色

## 浏览器兼容性

- Chrome 80+
- Firefox 75+
- Safari 14+
- Edge 80+

需要支持WebGL的现代浏览器。