Communitygithub.com

maverickmaltin/map-route

製作一支兩地之間的3D路線繪製影片(1080×1920 MP4)。適用於 /map-route 指令加上兩個地點,或任何要求動畫化路線、行程或導航的請求。

map-route 是什麼?

這項技能可將兩個地點之間的真實路線轉換為約4.5秒的3D地圖動畫影片(1080×1920 MP4)。使用者只需提供兩個地點名稱(如「時代廣場到帝國大廈」、「倫敦到巴黎」),技能便會自動搜尋地點、取得真實路線、檢查最終畫面,最後渲染成無聲影片。本技能適用於 Claude Code 等支援 SKILL.md 的 AI 代理平台,並可客製化路線模式(步行、單車、開車、飛行)、地圖樣式(淺色、深色、彩色)及影片長度。其核心運作依賴開放街圖(OpenStreetMap)資料、OpenFreeMap 圖磚與 OSRM 路線伺服器,需要網路連線才能正常運作。若使用者要求,也能直接以經緯度座標或街道地址作為地點輸入。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/maverickmaltin/claude-animate-skills/tree/HEAD/skills/map-route

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

/map-route: 兩個地點、一張3D地圖、路線自動繪製

使用者說出兩個地點(如「時代廣場到帝國大廈」、「倫敦到巴黎」、「我住的里斯本飯店到機場」)。你會找到它們、取得真實路線、檢查畫面、渲染影片,最後回傳一段無聲的 MP4 影片(約 4.5 秒)。

下方的 ${CLAUDE_SKILL_DIR} 是技能所在的資料夾(也就是這個 SKILL.md 所在的資料夾)。如果你的環境沒有自動填入,請使用該資料夾的路徑。所有檔案皆儲存於使用者當前資料夾或使用者指定的資料夾。此技能需要網路連線(地圖搜尋、路線及地圖圖磚)。

0. 檢查設定

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check

這個指令需要幾秒鐘;如果你不確定這台電腦是否已設定完成,請執行它。若輸出 "ready": true,表示一切就緒。否則請依其 "fix" 項目所列的指令來安裝(並告知使用者這是一次性安裝):python3 -m pip install playwright(瀏覽器驅動)、python3 -m playwright install chromium(僅在未安裝 Google Chrome 或 Edge 時需要,約 150 MB),以及 python3 -m pip install imageio-ffmpeg(僅在缺少 ffmpeg 時需要)。如果 pip 拒絕並顯示「externally managed environment」,請建立一個私有環境並在後續所有指令中使用它的 Python:python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg,然後在必要時執行 ~/.animate-skills/bin/python -m playwright install chromium。在 Windows 上,請用 py 取代 python3。

1. 找到地點與路線

讓每個地點精確到足以進行地圖搜尋:加上城市名稱(若國家不明確則加上國名): 「帝國大廈」→「Empire State Building, New York」。接著執行:

python3 "${CLAUDE_SKILL_DIR}/scripts/route.py" "Times Square, New York" "Empire State Building, New York" \
  --labels "Times Square" "Empire State Building" --out map-<from>-<to>.json
  • --labels:地圖圖釘與卡片上顯示的簡短名稱。
  • --mode:auto(預設:小於 4 公里且路線較直時使用步行;小於 900 公里時使用開車;更遠或無道路連接時使用飛行)、walk、bike、drive、fly。請根據使用者要求來選擇(例如「開車從……」「飛往……」)。同城市內的兩個景點通常為步行:若無特別說明,5 公里以內請傳入 --mode walk。
  • --style:light(預設)、dark、color。--title "…" 可取代卡片上的「A → B」文字。
  • --units:auto(兩地皆在美國或英國時使用英里)、metric、imperial。--size:1080x1920(預設)、1080x1080、1920x1080。

指令會輸出找到的結果。請確認 from 與 to 列中的地點是使用者想要的(正確的城市、正確的建築;博物館可能顯示為其某個入口,這沒關係)。如果不是,請讓搜尋文字更精確並重新執行,最多嘗試幾次:這些是免費的社群伺服器,一次只能處理一個請求。

地點也可以是經緯度座標(如 "40.7580,-73.9855")或街道地址。

2. 檢查最後一幀

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" map-<from>-<to>.json --still end --out map-<from>-<to>-check.png

檢視產生的圖片(約需 10 秒):兩個圖釘及其名稱是否都在畫面上、路線是否清晰、卡片資訊(距離、時間、模式)是否正確?

3. 渲染影片

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" map-<from>-<to>.json --out map-<from>-<to>.mp4

約需 30-60 秒:每一幀都會等待真實的地圖圖磚載入。如果渲染結果是全黑或空白,請加上 --no-gpu 參數。刪除檢查用的圖片。

4. 交付

將 MP4 檔案的路徑提供給使用者(若你的環境能顯示檔案,請直接顯示),並附上影片中顯示的距離與時間。此影片無聲音。提供一個變化版本(如深色樣式、不同模式、較長的版本)。

規格為純 JSON:你可以修改圖釘名稱(from.name、to.name)、title、subtitle(取代距離行)、style、color(路線顏色)或 duration(秒數,預設約 4.5 秒;較長的時間會讓整體移動變慢,例如 7 秒可營造較平緩的效果),然後不需重新搜尋即可再次渲染。

無網路連線時

地圖需要即時的地圖圖磚與路線伺服器。若在沒有網路(或瀏覽器)的沙盒環境中,請告知使用者此情況,而非繪製假地圖。

地圖資料 © OpenStreetMap 貢獻者(ODbL 授權),圖磚由 OpenFreeMap(OpenMapTiles 架構)提供,路線由 FOSSGIS 伺服器上的 OSRM 提供。影片上的標註文字會保留。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相關技能