TRAVEL · JOURNAL

AIRPORT MAPS

平面图使用说明

添加图片与切换楼层

打开标注工具，选择或新增机场、航站楼、楼层。楼层名称可以填写 3F、B1 等任意名称。点击“选择 / 替换本层图片”，使用 PNG、JPEG、WebP 或 SVG。每张图小于 25 MiB，原图内容保持不变。

编辑时通过左侧“楼层”切换；正常查看时使用图上方的楼层按钮。测试素材会明确显示“非真实机场”，请在真实出行前替换。

绘制和调整标记

  1. 先选“大门 / 值机柜台 / 登机口”。
  2. 选择点位后点击图片；线段、矩形用鼠标按住拖出；多边形逐个点击顶点，双击或点击“完成多边形”收尾。
  3. 填写编号或范围，例如 42、C12-C18、B213，点击“保存标记”。

“选择 / 调整”模式下，点击标记后可改类型和编号、拖动整个标记，或拖白色控制点调整端点、矩形角点、多边形顶点。“拖动底图”模式用于移动视野，滚轮或加减按钮用于缩放。手机查看支持单指拖动、双指缩放。

绘制多边形时可用“撤销上一点”或 Ctrl/Cmd+Z；Esc 或“取消绘制”放弃尚未完成的绘制。“查找标记”支持按类型、编号及范围内编号查找，点击结果自动切换楼层并聚焦。

保存与再次编辑

先保存当前标记，再点击“导出 JSON”，得到完整的 airport-maps.json。新选图片会在左侧提供独立下载链接，请一起保存。JSON 只记录图片路径和标注，不会嵌入图片。

编辑内容仅在当前页面内。刷新或关闭前请导出并下载新增图片。“导入 JSON”可继续编辑已有库；导入前会检查格式，错误文件不会替换当前数据。未放入网站目录的本机图片，重新打开后需先复制到对应路径才能显示。

发布到现有网站

  1. 用导出的 airport-maps.json 替换项目根目录同名文件：G:\旅行\travel-plan-page\airport-maps.json。
  2. 把下载的新增图片放进 G:\旅行\travel-plan-page\assets\airports\，保留下载时的文件名。它与 JSON 中的图片路径对应。
  3. 在项目中执行现有构建命令 npm run build，或 node scripts/build-static.mjs。
  4. 使用 GitHub Desktop 或 Git 将 JSON 和新增图片提交、推送至现有仓库 main。Cloudflare Pages 会自动部署。

也可以直接在 GitHub 仓库上传：JSON 放根目录，图片放 assets/airports/，提交到 main。工具里的“保存标记”和“导出 JSON”均不会自动提交 GitHub。

替换不同裁切、比例的底图时，工具会提醒你核对原有标记。新图片使用独立文件名，避免旧图片缓存影响发布；原图片文件不会被删除。

航班如何自动定位

主页航班使用 departure.airportCode、departure.terminal 和 procedures.door / counter / gate 查找标注库。目前示例仍由 home-flight-demo.js 提供，例如 CAN + T2 + counter: "C15" 会匹配同航站楼中 C12-C18 的区域。

机场、航站楼、类型都必须一致。优先匹配完整编号，其次查找范围；多个匹配会提示歧义。编号中的英文不区分大小写，连字符与短横线按同一种范围处理。

有已配置平面图时，航班下方自动显示对应楼层。同层的三个区域同时高亮；点击机场办理中的编号或地图上方的编号，可切换楼层并聚焦，其他楼层的标记不会叠加。未配置的编号保留文字信息。地图加载失败会显示原因。

数据关联以“机场 → 航站楼 → 楼层 → 标记”嵌套保存。每个标记包含 id、type、number 及 geometry；geometry.type 为 point / line / rect / polygon，points 为原图 0—1 坐标对。航班本身无需保存任何图片坐标。