# micro-app-map-demo

**Repository Path**: L_three/micro-app-map-demo

## Basic Information

- **Project Name**: micro-app-map-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-21
- **Last Updated**: 2025-09-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🗺️ Micro-App 地图缩放演示

这个项目演示了使用 micro-app 框架实现主应用和子应用之间的微前端通信，具体实现地图缩放控制功能。

## 📁 项目结构

```
micro-app-map-demo/
├── main-app/          # 主应用 (Vue 3)
│   ├── src/
│   │   ├── components/
│   │   │   └── ControlButtons.vue    # 地图控制按钮组件
│   │   ├── views/
│   │   │   └── Home.vue              # 主页面
│   │   ├── utils/
│   │   │   └── communication.js      # 通信工具
│   │   ├── App.vue
│   │   ├── main.js
│   │   └── micro-app.js              # micro-app 配置
│   └── package.json
├── sub-app/           # 子应用 (Vue 3 + Cesium)
│   ├── src/
│   │   ├── App.vue                   # Cesium 地图组件
│   │   └── main.js
│   └── package.json
├── start-apps.sh      # 启动脚本
└── README.md
```

## ✨ 功能特性

### ✅ 已实现功能

1. **主应用控制中心**：
   - 🎛️ 地图控制按钮（放大/缩小）
   - 📊 系统状态监控
   - 🔗 子应用链接
   - ⌨️ 键盘快捷键支持

2. **子应用地图**：
   - 🌍 Cesium 3D 地球渲染
   - 🔍 响应缩放控制命令
   - 📡 多重通信监听

3. **通信机制**：
   - 📨 localStorage 主要通信
   - 🔄 定期轮询备用机制
   - 📱 postMessage 跨窗口通信
   - ✅ 通信状态实时监控

4. **用户体验**：
   - 🎨 现代化毛玻璃界面
   - 📱 响应式设计
   - ⚡ 实时状态反馈
   - 🎯 智能错误处理

## 🚀 快速开始

### 1. 安装依赖

```bash
# 安装主应用依赖
cd main-app
npm install

# 安装子应用依赖
cd ../sub-app
npm install
```

### 2. 启动应用

```bash
# 在项目根目录执行
./start-apps.sh
```

### 3. 访问应用

- **主应用**: http://localhost:8080
- **子应用**: http://localhost:8081

## 🎮 使用说明

### 🎮 控制方式

1. **按钮控制**：
   - 点击主应用中的 "🔍 放大" 按钮
   - 点击主应用中的 "🔍 缩小" 按钮

2. **键盘快捷键**：
   - `Ctrl/Cmd + +` : 放大地图
   - `Ctrl/Cmd + -` : 缩小地图

3. **查看地图**：
   - 点击 "打开Cesium地图" 链接在新窗口查看地图
   - 在子应用窗口中观察缩放效果

### 📊 状态监控

- **绿色指示器** ✅ : 子应用连接正常
- **红色指示器** ❌ : 子应用连接异常
- **通信状态** : 实时显示最后一次通信时间

## 🔧 技术实现

### 主应用 (main-app)

- **框架**: Vue 3 + micro-app
- **端口**: 8080
- **功能**:
  - 提供地图控制中心界面
  - 包含放大/缩小控制按钮
  - 通过隐藏的micro-app与子应用通信
  - 显示系统状态和连接信息
- **通信方式**: 使用 `microApp.dispatch()` 发送消息

```javascript
// 发送缩放指令
microAppElement.dispatch({
  type: 'MAP_ZOOM',
  action: 'in', // 'in' 或 'out'
  timestamp: Date.now()
})
```

### 子应用 (sub-app)

- **框架**: Vue 3 + Cesium
- **端口**: 8081
- **功能**:
  - 独立运行的Cesium 3D地图应用
  - 接收主应用的缩放指令
  - 执行地图缩放操作
  - 向主应用回传状态信息
  - 可独立访问和使用
- **通信方式**: 使用 `microApp.addDataListener()` 监听消息

```javascript
// 监听主应用消息
window.microApp.addDataListener((data) => {
  if (data.type === 'MAP_ZOOM') {
    this.handleZoom(data.action)
  }
})
```

### 通信流程

```
用户点击按钮 → 主应用发送消息 → micro-app传递 → 子应用接收 → 执行地图缩放 → 回传状态
```

3. Open http://localhost:8080 in your browser

## Communication Flow

1. User clicks zoom buttons in main-app
2. Main-app sends zoom commands to sub-app via micro-app
3. Sub-app receives commands and controls Cesium camera
4. Sub-app sends map status back to main-app

## Fixed Issues

- ✅ Vue component warnings (resolveComponent, ref)
- ✅ Micro-app lifecycle management
- ✅ Router configuration conflicts
- ✅ Communication between apps
- ✅ Favicon 404 error
- ✅ Control buttons visibility
- ✅ Ref usage in micro-app environment
- ✅ Component registration issues

## Testing

### 方法1: 使用启动脚本
```bash
./start-apps.sh
```

### 方法2: 手动启动
```bash
# 终端1 - 启动主应用
cd main-app
npm run serve

# 终端2 - 启动子应用  
cd sub-app
npm run serve
```

### 方法3: 使用测试页面
打开 `test-communication.html` 进行完整测试

### 方法4: 浏览器控制台测试
```javascript
// 检查micro-app元素
const microAppElement = document.querySelector('micro-app[name="sub-map"]');
console.log('Micro-app element:', microAppElement);

// 测试缩放功能
microAppElement.dispatch({ type: 'zoom', payload: 'in' });
microAppElement.dispatch({ type: 'zoom', payload: 'out' });
```

## 调试信息

### 控制台日志
应用运行时会输出详细的调试信息：
- `主应用发送缩放命令: in/out`
- `sendToSubApp called with: sub-map {type: 'zoom', payload: 'in/out'}`
- `找到micro-app元素，发送数据`
- `子应用收到消息: {type: 'zoom', payload: 'in/out'}`
- `执行缩放命令: in/out`
- `App handleZoom called with type: in/out`
- `执行放大/缩小操作`
- `地图状态已发送给主应用`

### 常见问题排查
1. **按钮不可见**: 
   - 已添加强制显示机制
   - 使用`!important`确保样式优先级
   - 定时检查并修复按钮状态
2. **通信失败**: 检查micro-app元素是否存在
3. **Vue警告**: 已修复组件解析问题
4. **地图不显示**: 检查Cesium token和网络连接
5. **按钮一闪而过**: 
   - 已添加定时修复机制
   - 强制设置按钮尺寸和显示属性
   - 使用测试页面验证修复效果