🗺️ 魔兽世界怀旧服地图标注工具
一个简单易用的在线地图工具，让普通玩家也能参与完善经典魔兽世界地图数据！
✨ 这是什么？
这是一个专门为《魔兽世界》经典怀旧服制作的地图标注工具。在这里，您可以：
· 🎮 查看高清游戏地图 - 浏览艾泽拉斯的每一寸土地 · 📍 添加标记点 - 标注城镇、副本、飞行点等重要位置 · 🗺️ 拼合区域地图 - 把详细的小地图块拼到完整大地图上 · 🌐 多语言支持 - 为不同语言的玩家提供便利 · 🎨 简单直观 - 不需要懂技术，像玩游戏一样操作！
🚀 快速开始
方法一：直接在线使用
直接打开浏览器就能使用，无需安装任何软件！
方法二：本地运行（推荐）
想要更好地控制和使用所有功能？请按照以下步骤在本地运行：
🛠️ VitePress 项目运行教程
📦 第一步：安装必要软件
在开始之前，请确保您的电脑上已安装：
- Node.js（版本 16 或更高） · 访问 Node.js 官网 下载安装包 · 安装完成后，打开命令行输入 node -v 检查是否安装成功
- Git（可选，用于获取代码） · 访问 Git 官网 下载安装
📥 第二步：获取项目文件
您可以通过以下任意一种方式获取项目文件：
方式 A：下载压缩包（最简单）
- 点击页面上的 "Download ZIP" 按钮
- 解压到您电脑的任意位置，比如 桌面/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
🚀 第三步：安装依赖
- 打开命令行工具： · Windows：按 Win + R，输入 cmd 回车 · Mac：打开 "终端" 应用
- 进入项目文件夹：
cd 您的文件夹路径/wow-map
# 例如：cd C:\Users\您的用户名\Desktop\wow-map
- 安装项目所需依赖：
# 测试连接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
🌐 第五步：在浏览器中访问
- 打开您的浏览器（推荐 Chrome 或 Firefox）
- 在地址栏输入：http://localhost:5173
- 按回车键，您将看到地图工具页面！
🎉 恭喜！ 现在您可以在本地运行地图工具了！
📁 项目结构说明
了解项目文件结构有助于更好地使用：
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 文件夹，将这个文件夹的内容上传到您的网站空间即可。
🎮 基本操作指南
浏览地图
· 移动地图：按住鼠标左键拖拽 · 缩放地图：使用鼠标滚轮或点击右上角的 + - 按钮 · 重置视图：点击 ↺ 按钮 · 切换显示：勾选/取消勾选各种标记的显示开关
添加标记点
- 点击 "添加标记" 按钮
- 在地图上您想标注的位置点击一下
- 在弹出的窗口中填写信息： · 名称：位置的中文和英文名 · 类型：选择城镇、副本、飞行点等 · 阵营：联盟、部落或中立
- 点击 "确认" 完成添加
💡 提示：添加后会显示坐标数据，可以复制保存！
🗺️ 地图拼合教程（重点！）
为什么要拼合地图？
魔兽世界的大地图是由很多小区域地图组成的。通过拼合，我们可以：
· 让完整大地图显示更详细的区域信息 · 点击区域名称时能看到该区域的放大图 · 让地图导航更加精准
拼合步骤（超简单！）
第一步：准备区域图片
- 找到您想添加的游戏区域截图（比如"死亡矿井"副本入口区域）
- 图片格式：建议用 .webp（文件小、质量好）
- 图片命名：英文名，比如 theramore.webp
第二步：开始拼合
- 点击 "添加区域" 按钮
- 填写基本信息： · 区域ID：英文标识，如 theramore · 区域名称：中英文名称 · 图片文件名：您准备好的图片名
- 检查图片： · 输入文件名后点击 "检查文件" · 如果图片存在，会显示预览 · 如果提示文件不存在，请确保图片放在正确位置
第三步：放置区域
- 点击 "开始区域放置"
- 回到大地图，您会看到鼠标变成十字准星 ✝️
- 第一次点击：确定区域的左上角位置
- 拖拽调整： · 拖拽边角点调整大小 · 拖拽区域内部移动位置 · 按住 Shift 拖拽可以等比例缩放
- 使用调整面板（如果觉得拖拽不准）： · 右侧会显示调整控制面板 · 可以输入精确的数字调整位置和大小 · 有"居中区域"、"适应画布"等快捷按钮
第四步：确认保存
- 调整满意后，点击 "确认区域调整"
- 检查显示的信息是否正确
- 点击 "确认保存"
✅ 完成！ 新区域就拼合到大地图上了！
拼合小贴士
· 图片从哪里来：可以在游戏中截图，或者找现成的游戏地图资源 · 大小要合适：区域不要太大或太小，参考已有区域的大小 · 位置要对齐：尽量让区域边界和大地图的地形对齐 · 可以先练习：用测试图片多试几次，熟悉了再正式添加
📝 标记点类型说明
图标 类型 说明 保存位置 🏰 主城 暴风城、奥格瑞玛等主要城市 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：检查：
- 图片文件名是否拼写正确
- 图片是否真的放到了指定文件夹
- 浏览器缓存（可以按F5刷新试试）
Q：拼合时位置对不准怎么办？
A：
- 使用调整面板输入精确坐标
- 放大视图仔细调整
- 参考周围已有区域的位置
Q：数据会丢失吗？
A：记得定期点击"导出数据"备份您的工作！
🤝 如何参与贡献？
给普通玩家的建议：
- 从简单的开始：先练习添加几个标记点
- 分工合作： · 擅长找位置的：负责标注坐标 · 有图片资源的：提供区域截图 · 细心耐心的：负责拼合对齐
- 互相校对：添加完后可以请其他人检查一下
给有点技术基础的玩家：
· 可以协助整理数据文件 · 帮忙优化区域图片 · 完善多语言翻译
🎯 我们的目标
通过大家的共同努力，我们希望打造一个：
· ✅ 最完整的经典旧世地图数据库 · ✅ 最准确的坐标标记系统 · ✅ 最友好的多语言游戏助手 · ✅ 持续更新的玩家社区项目
💖 感谢参与
每一处标记、每一块拼图、每一次校对，都是对艾泽拉斯世界的热爱！
让我们一同重现经典的荣光！
有任何问题或建议，欢迎反馈！
荣耀属于每一位参与者！ ⚔️🛡️
📞 获取帮助
如果您在运行过程中遇到任何问题：
- 查看上面的"常见问题"部分
- 检查控制台错误信息（按F12）
- 在项目讨论区提问
- 联系项目维护者
快乐地图标注！ 🎮🗺️
