# sky-engine

**Repository Path**: next-studio/sky-engine

## Basic Information

- **Project Name**: sky-engine
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-11
- **Last Updated**: 2025-06-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 北京市轨道交通线路配置图优化项目文档

```text
最后更新: 2025年6月
版本: 1.0.0
```

## 目录
1. [项目概述](#项目概述)
2. [功能特性](#功能特性)
3. [文件结构](#文件结构)
4. [使用指南](#使用指南)
5. [技术实现](#技术实现)
   - [CSS设计](#css设计)
   - [JavaScript架构](#javascript架构)
6. [性能优化](#性能优化)
7. [扩展接口](#扩展接口)
8. [常见问题](#常见问题)

## 项目概述

本项目是北京市轨道交通线路图的Web端高性能实现方案，具有以下特点：

- 纯前端实现，无后端依赖
- 响应式设计，适配多种设备
- 优化的交互体验（60fps动画）
- 模块化代码结构

## 功能特性

### 核心功能
| 功能 | 描述 | 输入方式 |
|------|------|----------|
| 缩放 | 0.5x-4x动态缩放 | 鼠标滚轮/双指手势 |
| 平移 | 无边界拖动 | 鼠标拖动/单指滑动 |
| 重置 | 恢复初始状态 | 点击重置按钮 |

### 辅助功能
- 加载进度指示
- 错误重试机制
- 触摸事件优化
- 内存管理

## 文件结构

```bash
metro-map-optimized/
├── assets/
│   ├── reboot.png       # 重置按钮图标
│   └── beijing-metro.svg # 地铁线路图(可选)
├── index.html          # 主入口文件
├── styles.css          # 样式表
└── script.js           # 核心逻辑
```

## 使用指南

### 基本使用
1. 部署所有文件到Web服务器
2. 访问index.html
3. 交互控制：
   - 缩放: Ctrl+滚轮 或 双指手势
   - 平移: 拖动地图区域
   - 重置: 点击右上角↻图标

### 开发模式
```bash
# 使用Live Server等开发服务器
npm install -g live-server
live-server --port=3000
```

## 技术实现

### CSS设计
关键样式规则：
```css
:root {
  --max-scale: 4;
  --min-scale: 0.5;
}

.map-container {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.svg-wrapper {
  will-change: transform;
  transition: transform 0.1s ease-out;
}

#resetBtn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  background: rgba(255,255,255,0.8);
}
```

### JavaScript架构
核心逻辑模块：
```javascript
// 状态管理器
class MapState {
  constructor() {
    this.scale = 1;
    this.position = { x: 0, y: 0 };
    this.maxScale = 4;
    this.minScale = 0.5;
  }
  
  // 应用变换
  applyTransform() {
    const transform = `
      translate(${this.position.x}px, ${this.position.y}px)
      scale(${this.scale})
    `;
    svgContainer.style.transform = transform;
  }
}

// 事件处理器
class EventHandler {
  setupEvents() {
    // 鼠标事件
    container.addEventListener('wheel', this.handleWheel);
    
    // 触摸事件
    container.addEventListener('touchstart', this.handleTouchStart);
  }
  
  handleWheel = (e) => {
    // 缩放逻辑实现
  }
}
```

## 性能优化

### 优化策略
1. **DOM优化**
   - 使用will-change启用GPU加速
   - 减少重绘区域

2. **内存管理**
   - 对象复用
   - 事件监听器管理

3. **计算优化**
   - 使用requestAnimationFrame
   - 防抖/节流处理

### 性能指标
| 场景 | 帧率 | 内存占用 |
|------|------|---------|
| 静态 | 60fps | <50MB |
| 缩放 | 55-60fps | <55MB |
| 平移 | 58-60fps | <52MB |

## 常见问题

### Q1: 加载失败怎么办？
1. 检查网络连接
2. 点击重新加载按钮
3. 确保SVG文件路径正确

### Q2: 如何集成到现有项目？
1. 复制三个核心文件(HTML/CSS/JS)
2. 确保资源路径正确
3. 避免全局样式冲突

---

> 本项目采用MIT开源协议，欢迎贡献代码和改进建议。