這是一份使用官方生產級整合模式在現代 JavaScript 框架中實現 Mapbox GL JS 的綜合指南。
安裝與下載
1. ClawHub CLI
從來源直接安裝技能的最快方式。
npx clawhub@latest install mapbox-web-integration-patterns
2. 手動安裝
將技能資料夾複製到以下位置之一
~/.openclaw/skills/ <project>/skills/ 優先級：工作區 > 本地 > 內建
3. 提示詞安裝
將此提示詞複製到 OpenClaw 即可自動安裝。
請幫我使用 Clawhub 安裝 mapbox-web-integration-patterns。如果尚未安裝 Clawhub，請先安裝（npm i -g clawhub）。
想要直接下載？
取得包含原生技能檔案的ZIP壓縮檔。
什麼是 Mapbox Web 整合模式？
本技能提供了將 Mapbox GL JS 整合到現代 Web 應用程式中的權威藍圖。基於 Mapbox create-web-app 鷹架工具，涵蓋了 React、Vue、Svelte 和 Angular 等框架的關鍵生命週期管理、安全 Token 處理和搜尋整合。透過遵循這些 Openclaw Skills 模式，開發者可以確保其地圖組件具有高效能、無洩漏且易於維護的特點。
其核心價值在於針對特定框架的實施細節，這些細節可以防止常見的陷阱，例如未清理的 WebGL 上下文導致的記憶體洩漏或響應式框架中的無限重渲染迴圈。無論您是在建置簡單的位置選擇器還是複雜的資料視覺化儀表板，這些模式都為 Mapbox GL JS v3.x 及更高版本提供了穩定的基礎。
Mapbox Web 整合模式 應用場景
- 使用 Mapbox create-web-app 工具搭建新的地圖專案。
- 將 Mapbox GL JS 整合到現有的 React、Vue、Svelte 或 Angular 應用程式中。
- 實現 Mapbox Search JS 以提供地址自動補全和地理編碼功能。
- 除錯地圖密集型 Web 應用程式中的記憶體洩漏和效能問題。
- 確保不同建置環境中存取 Token 的安全管理。
Mapbox Web 整合模式 運作原理
- 在適當的框架生命週期鉤子（例如 React 中的 useEffect 或 Svelte 中的 onMount）內初始化 Mapbox GL JS 函式庫。
- 將地圖實例分配給非響應式引用或持久屬性，以防止框架響應式系統導致的內部狀態損壞。
- 在注入環境變數中的存取 Token 的同時，配置地圖容器、中心座標和縮放層級。
- 在組件卸載時附加框架特定的清理監聽器以呼叫 map.remove() 方法，從而釋放系統記憶體。
- 加入 Mapbox Search JS 等額外模組，提供互動式地理編碼和基於鄰近度的結果。
Mapbox Web 整合模式 設定指南
要開始使用這些 Openclaw Skills 模式，請透過您的套件管理器安裝必要的相依性：
# 安裝核心 Mapbox GL JS 函式庫
npm install mapbox-gl@^3.0.0
# 安裝 React 的搜尋組件
npm install @mapbox/search-js-react@^1.0.0
# 安裝其他框架的搜尋組件
npm install @mapbox/search-js-web@^1.0.0
確保您的環境變數已配置了 Mapbox 存取 Token（例如 VITE_MAPBOX_ACCESS_TOKEN）。
Mapbox Web 整合模式 資料結構與分類體系
該技能遵循一種結構化的方法來管理地圖狀態和元資料：
| 物件 | 描述 | 關鍵屬性 |
|---|---|---|
| 地圖實例 | 由 mapboxgl.Map 建立的核心地圖物件 | container, style, center, zoom |
| 實例引用 | 非響應式容器（如 useRef） | current (持有地圖物件) |
| Token 設定 | 安全憑證管理 | accessToken, 環境變數 |
| 搜尋屬性 | 地理編碼配置 | proximity, marker, placeholder |
Mapbox Web 整合模式 進階特性
- 針對 Mapbox GL JS v3.x 的生產級模式，包括對 WebGL 2 的支援和改進的 TypeScript 型別定義。
- 用於建置通用地圖庫的框架無關 Web Component 整合。
- 針對 Next.js App Router 和 Pages Router 環境的專門處理。
- 針對 Vue 基於 Proxy 的響應式問題的詳細預防策略。
- 針對複雜儀表板式佈局的多地圖 Token 管理。
SKILL.md
加載中
Openclaw 相關技能
panda-git-commit
一款智慧 Git 提交訊息生成器，確保符合 Conventional Commits 規範，同時自動檢測 monorepo 範圍並拆分複雜變更。
BTC Momentum Trader
一種自動化交易技能，基於 Binance 的即時 BTC 價格動能執行 Polymarket 比特幣 5 分鐘短線投注。
精選*
