🗺️ 魔兽世界怀旧服地图标注工具

一个简单易用的在线地图工具，让普通玩家也能参与完善经典魔兽世界地图数据！

✨ 这是什么？

这是一个专门为《魔兽世界》经典怀旧服制作的地图标注工具。在这里，您可以：

· 🎮 查看高清游戏地图 - 浏览艾泽拉斯的每一寸土地 · 📍 添加标记点 - 标注城镇、副本、飞行点等重要位置 · 🗺️ 拼合区域地图 - 把详细的小地图块拼到完整大地图上 · 🌐 多语言支持 - 为不同语言的玩家提供便利 · 🎨 简单直观 - 不需要懂技术，像玩游戏一样操作！

🚀 快速开始

方法一：直接在线使用

直接打开浏览器就能使用，无需安装任何软件！

方法二：本地运行（推荐）

想要更好地控制和使用所有功能？请按照以下步骤在本地运行：

---

🛠️ VitePress 项目运行教程

📦 第一步：安装必要软件

在开始之前，请确保您的电脑上已安装：

1. Node.js（版本 16 或更高） · 访问 Node.js 官网 下载安装包 · 安装完成后，打开命令行输入 node -v 检查是否安装成功
2. Git（可选，用于获取代码） · 访问 Git 官网 下载安装

📥 第二步：获取项目文件

您可以通过以下任意一种方式获取项目文件：

方式 A：下载压缩包（最简单）

1. 点击页面上的 "Download ZIP" 按钮
2. 解压到您电脑的任意位置，比如 桌面/wow-map/

方式 B：使用 Git 克隆

# 打开命令行，输入以下命令方式二选一
# https
git clone https://github.com/hestiacn/wow-map
# ssh
git clone git@github.com:hestiacn/wow-map

cd wow-map

🚀 第三步：安装依赖

1. 打开命令行工具： · Windows：按 Win + R，输入 cmd 回车 · Mac：打开 "终端" 应用
2. 进入项目文件夹：

cd 您的文件夹路径/wow-map
# 例如：cd C:\Users\您的用户名\Desktop\wow-map

1. 安装项目所需依赖：

# 测试连接git
ssh -T git@github.com
# 执行策略通过
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

npm install -g pnpm

pnpm install
# 或者使用 yarn（如果已安装）
# yarn install

💡 说明：这个过程可能会花费几分钟时间，需要下载一些必要的组件，请耐心等待。

▶️ 第四步：启动开发服务器

安装完成后，运行以下命令启动项目：

pnpm run dev

看到类似以下信息表示启动成功：

  vitepress v1.2.2

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

🌐 第五步：在浏览器中访问

1. 打开您的浏览器（推荐 Chrome 或 Firefox）
2. 在地址栏输入：http://localhost:5173
3. 按回车键，您将看到地图工具页面！

🎉 恭喜！ 现在您可以在本地运行地图工具了！

📁 项目结构说明

了解项目文件结构有助于更好地使用：

wow-map/
├── docs
│   ├── .vitepress
│   │   ├── font
│   │   │   ├── iconfont.css
│   │   │   ├── iconfont.js
│   │   │   └── iconfont.ttf
│   │   ├── nav
│   │   │   └── index.js
│   │   ├── plugins
│   │   │   └── localSearchPlugin.js
│   │   ├── theme
│   │   │   ├── components
│   │   │   │   ├── BackToTop.vue
│   │   │   │   ├── CopyToClipboardInput.vue
│   │   │   │   ├── LegendGenerator.vue
│   │   │   │   ├── MapViewer.vue
│   │   │   │   └── NotFound.vue
│   │   │   ├── styles
│   │   │   │   ├── custom.scss
│   │   │   │   ├── map.css
│   │   │   │   ├── rainbow.css
│   │   │   │   └── vars.css
│   │   │   ├── utils
│   │   │   │   ├── regionUtils.js
│   │   │   │   └── tileMerger.js
│   │   │   └── index.js
│   │   └── config.js
│   ├── docs
│   │   ├── help
│   │   │   ├── dev.md
│   │   │   └── use.md
│   │   ├── map
│   │   │   ├── 60-vanilla.md
│   │   │   ├── 70-tbc.md
│   │   │   └── 80-wotlk.md
│   │   ├── CHANGELOG.md
│   │   ├── contribute.md
│   │   ├── Legend.md
│   │   ├── LICENSE.md
│   │   └── map.md
│   ├── public
│   │   ├── data
│   │   │   ├── map-data.json
│   │   │   └── region-subnames.json
│   │   ├── favicon.pub
│   │   │   ├── android-chrome-192x192.png
│   │   │   ├── android-chrome-512x512.png
│   │   │   ├── apple-touch-icon-152x152.png
│   │   │   ├── apple-touch-icon-167x167.png
│   │   │   ├── apple-touch-icon-180x180.png
│   │   │   ├── apple-touch-icon.png
│   │   │   ├── favicon-16x16.png
│   │   │   ├── favicon-32x32.png
│   │   │   ├── favicon-48x48.png
│   │   │   ├── favicon.ico
│   │   │   ├── favicon.svg
│   │   │   ├── README.txt
│   │   │   ├── safari-pinned-tab.svg
│   │   │   └── site.webmanifest
│   │   ├── fonts
│   │   │   └── XiHei.woff2
│   │   ├── images
│   │   │   ├── demo
│   │   │   │   ├── demo.webp
│   │   │   │   ├── dungeon.cdr
│   │   │   │   ├── dungeon.tga
│   │   │   │   ├── ljf.cdr
│   │   │   │   ├── merged.cdr
│   │   │   │   ├── merged.tga
│   │   │   │   ├── NotFound.webp
│   │   │   │   ├── raid.cdr
│   │   │   │   └── raid.tga
│   │   │   ├── map-icons
│   │   │   │   ├── druid.webp
│   │   │   │   ├── dungeon.webp
│   │   │   │   ├── merged.webp
│   │   │   │   ├── raid.webp
│   │   │   │   ├── ship.webp
│   │   │   │   ├── special.webp
│   │   │   │   └── zeppelin.webp
│   │   │   └── maps
│   │   │       ├── regions
│   │   │       │   ├── 005.jpg
│   │   │       │   ├── 006.jpg
│   │   │       │   ├── cn-logo.webp
│   │   │       │   ├── compass.webp
│   │   │       │   ├── darkshore.webp
│   │   │       │   ├── en-logo.webp
│   │   │       │   ├── hyjal.webp
│   │   │       │   ├── legend.webp
│   │   │       │   ├── stonetalon.webp
│   │   │       │   ├── teldrassil.webp
│   │   │       │   └── theramore.webp
│   │   │       └── fullmap.webp
│   │   ├── favicon.ico
│   │   ├── image.png
│   │   ├── logo.webp
│   │   ├── logo1.webp
│   │   └── nav.webp
│   └── index.md
├── .gitignore
├── package.json
├── pnpm-lock.yaml
├── README.md
├── Tree2Utf8.bat
├── yarn.lock

📦 构建生产版本（用于发布）

如果您想将项目部署到网站上，可以构建生产版本：

# 2选1即可
pnpm run build
npm run build

构建完成后，会生成 docs/.vitepress/dist 文件夹，将这个文件夹的内容上传到您的网站空间即可。

---

🎮 基本操作指南

浏览地图

· 移动地图：按住鼠标左键拖拽 · 缩放地图：使用鼠标滚轮或点击右上角的 + - 按钮 · 重置视图：点击 ↺ 按钮 · 切换显示：勾选/取消勾选各种标记的显示开关

添加标记点

1. 点击 "添加标记" 按钮
2. 在地图上您想标注的位置点击一下
3. 在弹出的窗口中填写信息： · 名称：位置的中文和英文名 · 类型：选择城镇、副本、飞行点等 · 阵营：联盟、部落或中立
4. 点击 "确认" 完成添加

💡 提示：添加后会显示坐标数据，可以复制保存！

🗺️ 地图拼合教程（重点！）

为什么要拼合地图？

魔兽世界的大地图是由很多小区域地图组成的。通过拼合，我们可以：

· 让完整大地图显示更详细的区域信息 · 点击区域名称时能看到该区域的放大图 · 让地图导航更加精准

拼合步骤（超简单！）

第一步：准备区域图片

1. 找到您想添加的游戏区域截图（比如"死亡矿井"副本入口区域）
2. 图片格式：建议用 .webp（文件小、质量好）
3. 图片命名：英文名，比如 theramore.webp

第二步：开始拼合

1. 点击 "添加区域" 按钮
2. 填写基本信息： · 区域ID：英文标识，如 theramore · 区域名称：中英文名称 · 图片文件名：您准备好的图片名
3. 检查图片： · 输入文件名后点击 "检查文件" · 如果图片存在，会显示预览 · 如果提示文件不存在，请确保图片放在正确位置

第三步：放置区域

1. 点击 "开始区域放置"
2. 回到大地图，您会看到鼠标变成十字准星 ✝️
3. 第一次点击：确定区域的左上角位置
4. 拖拽调整： · 拖拽边角点调整大小 · 拖拽区域内部移动位置 · 按住 Shift 拖拽可以等比例缩放
5. 使用调整面板（如果觉得拖拽不准）： · 右侧会显示调整控制面板 · 可以输入精确的数字调整位置和大小 · 有"居中区域"、"适应画布"等快捷按钮

第四步：确认保存

1. 调整满意后，点击 "确认区域调整"
2. 检查显示的信息是否正确
3. 点击 "确认保存"

✅ 完成！ 新区域就拼合到大地图上了！

拼合小贴士

· 图片从哪里来：可以在游戏中截图，或者找现成的游戏地图资源 · 大小要合适：区域不要太大或太小，参考已有区域的大小 · 位置要对齐：尽量让区域边界和大地图的地形对齐 · 可以先练习：用测试图片多试几次，熟悉了再正式添加

📝 标记点类型说明

图标 类型 说明 保存位置 🏰 主城 暴风城、奥格瑞玛等主要城市 map-data.json 🏠 城镇 闪金镇、十字路口等小型据点 map-data.json ✈️ 飞行点 飞行管理员位置 map-data.json ⚔️ 副本 地下城和团队副本入口 map-data.json 🚢 港口航线 轮船交通路线和码头 map-data.json 🚁 飞艇航线 飞艇路线和塔楼 map-data.json 🚇 特殊交通 地铁等特殊交通工具 map-data.json 📝 区域名称标注 地图上的文字说明 region-subnames.json

💾 数据管理

导出数据

· 导出图片：点击"导出图片"保存当前视图为图片 · 导出数据：点击"导出数据"保存您添加的所有标记和区域

导入数据

· 点击"导入数据"选择之前导出的JSON文件 · 可以恢复之前的工作进度

🆘 常见问题

Q：图片放哪里？

A：区域图片需要预先放在：docs/public/images/maps/regions/ 文件夹里。不然检测不到文件无法进行下一步。

Q：为什么添加的区域不显示？

A：检查：

1. 图片文件名是否拼写正确
2. 图片是否真的放到了指定文件夹
3. 浏览器缓存（可以按F5刷新试试）

Q：拼合时位置对不准怎么办？

A：

1. 使用调整面板输入精确坐标
2. 放大视图仔细调整
3. 参考周围已有区域的位置

Q：数据会丢失吗？

A：记得定期点击"导出数据"备份您的工作！

🤝 如何参与贡献？

给普通玩家的建议：

1. 从简单的开始：先练习添加几个标记点
2. 分工合作： · 擅长找位置的：负责标注坐标 · 有图片资源的：提供区域截图 · 细心耐心的：负责拼合对齐
3. 互相校对：添加完后可以请其他人检查一下

给有点技术基础的玩家：

· 可以协助整理数据文件 · 帮忙优化区域图片 · 完善多语言翻译

---

🎯 我们的目标

通过大家的共同努力，我们希望打造一个：

· ✅ 最完整的经典旧世地图数据库 · ✅ 最准确的坐标标记系统 · ✅ 最友好的多语言游戏助手 · ✅ 持续更新的玩家社区项目

💖 感谢参与

每一处标记、每一块拼图、每一次校对，都是对艾泽拉斯世界的热爱！

让我们一同重现经典的荣光！

---

有任何问题或建议，欢迎反馈！

荣耀属于每一位参与者！ ⚔️🛡️

📞 获取帮助

如果您在运行过程中遇到任何问题：

1. 查看上面的"常见问题"部分
2. 检查控制台错误信息（按F12）
3. 在项目讨论区提问
4. 联系项目维护者

快乐地图标注！ 🎮🗺️