🗺️ 魔兽世界经典旧世地图编辑器 - 开发使用手册

🎮 项目简介

魔兽世界经典旧世地图编辑器是一个基于Web的交互式地图工具，专为《魔兽世界：经典旧世》版本设计。它提供了完整的地图查看、标记点管理、区域编辑和数据导出功能。

✨ 核心特性

🗺️ 完整艾泽拉斯地图：支持缩放、拖拽、区域切换
📍 智能标记系统：城镇、副本、飞行点、交通系统等
🎨 可视化编辑：直接在画布上添加、编辑、删除标记
🌐 多语言支持：中文/英文界面和标记名称
💾 数据可移植：JSON格式导入导出，便于协作
🖼️ 高质量导出：支持导出为WebP图片格式

🚀 快速开始

环境要求

Node.js 20.0.0 或更高版本
pnpm 8.7.1 或更高版本（也可使用npm/yarn）

安装步骤

bash

# 克隆项目
git clone https://github.com/hestiacn/wow-map.git

# 进入项目目录
cd wow-map

# 安装依赖（推荐使用pnpm）
pnpm install

# 启动开发服务器
pnpm run dev

访问地址

启动成功后，在浏览器中打开：http://localhost:5173

🗺️ 地图查看功能

基础操作

操作	说明	快捷键
缩放地图	鼠标滚轮向上/向下滚动	滚轮
移动地图	按住鼠标左键拖拽	拖拽
重置视图	恢复到默认大小和位置	`0` 键
快速缩放	放大/缩小地图	`+` / `-` 键

显示控制

在控制面板中可以切换以下图层的显示：

✅ 飞行路线：显示各飞行点间的连接路线
✅ 标记点：显示所有城镇、主城、飞行点
✅ 副本：显示5人副本和团队副本
✅ 区域名称：显示地图上的区域文本标注
✅ 交通系统：显示轮船、飞艇、地铁等交通点
✅ 交通路线：显示交通线路和方向指示

地图切换

在顶部下拉菜单中选择：
- 完整地图：查看整个艾泽拉斯
- 区域地图：查看特定区域（如暴风城、奥格瑞玛等）
系统会自动加载对应区域的地图和标记点

📍 标记点管理

添加标记点

点击 “添加标记” 按钮，进入标注模式
在地图上点击想要添加标记的位置
在弹出的对话框中填写信息：
- 名称：中英文名称（必填）
- 类型：选择标记类型
- 阵营：联盟/部落/中立
- 等级：副本等级（如“15-20”）
- 备注：额外说明信息

标记点类型

类型	图标	说明	阵营
🏠 城镇	圆形标记	小型定居点	联盟/部落/中立
🏰 主城	圆形标记	主要城市	联盟/部落
✈️ 飞行点	圆形标记	飞行管理员	联盟/部落/中立
⚔️ 5人副本	剑图标	5人地下城	中立
🏰 团队副本	城堡图标	团队地下城	中立
🚢 港口航线	船图标	轮船交通点	联盟/部落/中立
🚁 飞艇航线	飞艇图标	飞艇交通点	部落
🚇 特殊交通	地铁图标	地铁等特殊交通	中立
📝 名称标注	文本	区域名称标注	中立

编辑与删除

查看信息：点击地图上的标记点，右侧会显示详细信息面板
编辑标记：点击面板中的“编辑”按钮，修改信息后确认
删除标记：点击面板中的“删除”按钮，确认后删除
复制坐标：在信息面板中可一键复制坐标JSON数据

区域文本标注

用于在地图上添加区域名称或说明文字：

添加文本标注：
- 选择类型为“名称标注”
- 输入多语言文本（至少一种语言）
- 设置文本颜色、描边、字体大小
- 支持中文、英文、韩文、日文
样式定制：
- 文本颜色：设置文字颜色（默认金色）
- 描边颜色：设置文字描边颜色（默认淡绿色）
- 描边宽度：1-6px可调
- 字体大小：18-48px可调
数据保存：
- 区域文本标注单独保存到 region-subnames.json
- 添加后会提示下载更新后的文件
- 需要手动替换 docs/public/data/region-subnames.json

🗺️ 区域地图管理

添加区域地图块

用于在完整地图上叠加高清区域地图：

准备区域图片：
- 图片格式：WebP（推荐）、PNG、JPG
- 放置位置：docs/public/images/maps/regions/
- 建议尺寸：与游戏内区域实际比例相符
添加区域：
- 点击 “添加区域” 按钮
- 填写区域信息：
  - 区域ID：英文标识（如theramore）
  - 区域名称：中英文名称
  - 图片文件名：如theramore.webp
- 点击“检查文件”验证图片可用性
放置区域：
- 在完整地图上点击确定区域左上角位置
- 拖拽角点调整大小
- 拖拽内部移动位置
- Shift+拖拽保持比例缩放
- 使用调整面板进行精确控制
确认保存：
- 调整满意后点击“确认区域调整”
- 复制生成的边界JSON数据
- 区域数据会自动添加到地图中

区域调整技巧

操作	方法	说明
移动	拖拽区域内部	实时预览位置
缩放	拖拽角点手柄	8个调整点
等比例缩放	Shift+拖拽角点	保持宽高比
精确调整	使用调整面板	输入具体数值
居中	点击“居中区域”	自动居中到画布
适应画布	点击“适应画布”	自动调整到合适大小

💾 数据导入导出

数据文件结构

项目使用两个主要数据文件：

主地图数据 (map-data.json)
- 存储：标记点、区域定义、配置信息
- 位置：docs/public/data/map-data.json
- 包含：飞行点、副本、交通点、区域边界
区域文本数据 (region-subnames.json)
- 存储：区域名称标注的多语言文本
- 位置：docs/public/data/region-subnames.json
- 包含：文本内容、样式、坐标

导出功能

导出数据：
- 点击 “导出数据” 按钮
- 下载 wow-map-new-regions.json
- 包含所有新添加的区域数据
导出图片：
- 点击 “导出图片” 按钮
- 以WebP格式保存当前视图
- 文件名包含区域名称和时间戳
复制坐标：
- 在标记点或区域信息面板中
- 使用复制按钮一键复制坐标JSON
- 可直接粘贴到数据文件中

导入功能

导入数据：
- 点击 “导入数据” 按钮
- 选择本地的JSON数据文件
- 系统会合并导入的数据
刷新数据：
- 点击 “刷新” 按钮
- 重新加载所有地图数据文件
- 用于手动修改JSON文件后的更新

⚡ 高级功能

飞行路线系统

智能连接：自动连接相同阵营的飞行点
颜色区分：联盟（蓝色）、部落（红色）、中立（金色）
跨区域限制：东部王国和卡利姆多之间不连接

交通系统

方向指示：显示交通线路和行进方向
文本说明：悬停显示“船舶开往XXX”等信息
阵营标识：标注交通点的阵营归属

键盘快捷键

快捷键	功能	说明
`+` / `=`	放大地图	视图放大
`-`	缩小地图	视图缩小
`0`	重置视图	恢复默认
`Esc`	取消操作	退出标注或区域放置模式
`Shift`	等比例缩放	区域调整时保持比例

开发工具脚本

项目包含两个实用脚本：

生成地图切片：

bash

pnpm run tiles
# 运行 scripts/generate-tiles.js

启动切片服务器：

bash

pnpm run serve-tiles
# 运行 scripts/tile-server.js
# 访问 http://localhost:3000

❓ 常见问题

Q1: 添加的标记点为什么不见了？

检查：确认当前显示的地图区域是否正确
原因：标记点有区域归属，可能不在当前显示区域
解决：切换到“完整地图”或标记点所在区域

Q2: 区域图片无法加载怎么办？

检查：图片是否放在正确目录
路径：docs/public/images/maps/regions/
格式：推荐使用WebP格式，支持透明通道

Q3: 导出的数据如何使用？

主数据：合并到 map-data.json 的对应部分
区域文本：替换 region-subnames.json 文件
区域定义：添加到 regions 对象中

Q4: 如何自定义图标？

准备图标图片（32×32像素，WebP格式）
放置到 docs/public/images/map-icons/
在代码中引用对应的图标名称
支持的类型：dungeon、raid、ship、zeppelin、special

Q5: 地图加载缓慢怎么办？

优化图片：使用WebP格式，适当压缩
分区域加载：只在需要时加载区域地图
浏览器缓存：启用HTTP缓存头

🔧 开发者指南

项目结构

wow-map/
├── docs/                    # 文档和静态文件
│   ├── .vitepress/         # VitePress配置
│   │   └── theme/
│   │       └── components/
│   │           └── MapViewer.vue  # 主组件
│   └── public/             # 静态资源
│       ├── data/           # JSON数据文件
│       └── images/         # 图片资源
├── scripts/                # 工具脚本
└── package.json           # 项目配置

数据格式示例

json

{
  "points": {
    "flightPoints": [
      {
        "id": "stormwind",
        "name": { "zh": "暴风城", "en": "Stormwind" },
        "type": "capital",
        "faction": "alliance",
        "position": { "x": 1000, "y": 1500 },
        "region": "eastern-kingdoms"
      }
    ],
    "regionTexts": [
      {
        "id": "elwynn-text",
        "languages": { "zh": "艾尔文森林", "en": "Elwynn Forest" },
        "position": { "x": 1200, "y": 1400 },
        "textColor": "#f5d20bff",
        "fontSize": 24
      }
    ]
  },
  "regions": {
    "theramore": {
      "name": { "zh": "塞拉摩", "en": "Theramore" },
      "bounds": { "x": 3000, "y": 2000, "width": 800, "height": 600 },
      "image": "/images/maps/regions/theramore.webp"
    }
  }
}

扩展开发

添加新标记类型：
- 在 pointTypes 配置中定义
- 准备对应的图标图片
- 更新类型选择下拉框
自定义样式：
- 编辑 docs/.vitepress/theme/styles/map.css
- 可调整颜色、字体、布局等
- 支持SCSS变量
添加新功能：
- 在 MapViewer.vue 中添加组件和方法
- 遵循Vue 3组合式API规范
- 确保响应式数据正确更新

贡献指南

查看贡献指南

Fork项目并创建特性分支
遵循现有代码风格
添加或更新测试用例
提交清晰的commit信息
创建Pull Request说明变更

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

许可说明

✅ 允许：自由使用、修改、分发、商用
📝 要求：保留原始版权声明和许可证
❌ 免责：作者不承担任何使用风险

🌟 致谢

感谢所有魔兽世界玩家和开源贡献者的支持！

如有问题或建议，请访问项目GitHub仓库提交Issue。

🗺️ 魔兽世界经典旧世地图编辑器 - 开发使用手册 ​

🎮 项目简介 ​

✨ 核心特性 ​

🚀 快速开始 ​

环境要求 ​

安装步骤 ​

访问地址 ​

🗺️ 地图查看功能 ​

基础操作 ​

显示控制 ​

地图切换 ​

📍 标记点管理 ​

添加标记点 ​

标记点类型 ​

编辑与删除 ​

区域文本标注 ​

🗺️ 区域地图管理 ​

添加区域地图块 ​

区域调整技巧 ​

💾 数据导入导出 ​

数据文件结构 ​

导出功能 ​

导入功能 ​

⚡ 高级功能 ​

飞行路线系统 ​

交通系统 ​

键盘快捷键 ​

开发工具脚本 ​

❓ 常见问题 ​

Q1: 添加的标记点为什么不见了？ ​

Q2: 区域图片无法加载怎么办？ ​

Q3: 导出的数据如何使用？ ​

Q4: 如何自定义图标？ ​

Q5: 地图加载缓慢怎么办？ ​

🔧 开发者指南 ​

项目结构 ​

数据格式示例 ​

扩展开发 ​

贡献指南 ​

📄 许可证 ​

许可说明 ​

🌟 致谢 ​

🗺️ 魔兽世界经典旧世地图编辑器 - 开发使用手册

🎮 项目简介

✨ 核心特性

🚀 快速开始

环境要求

安装步骤

访问地址

🗺️ 地图查看功能

基础操作

显示控制

地图切换

📍 标记点管理

添加标记点

标记点类型

编辑与删除

区域文本标注

🗺️ 区域地图管理

添加区域地图块

区域调整技巧

💾 数据导入导出

数据文件结构

导出功能

导入功能

⚡ 高级功能

飞行路线系统

交通系统

键盘快捷键

开发工具脚本

❓ 常见问题

Q1: 添加的标记点为什么不见了？

Q2: 区域图片无法加载怎么办？

Q3: 导出的数据如何使用？

Q4: 如何自定义图标？

Q5: 地图加载缓慢怎么办？

🔧 开发者指南

项目结构

数据格式示例

扩展开发

贡献指南

📄 许可证

许可说明

🌟 致谢