遊客痛點：戶外園區，遊客站在岔路口找不到方向
大型戶外園區的導覽，一直卡在幾個現實問題：
- 沒人願意下載 App：為了逛一次園區特地安裝 App，是勸退遊客的第一道門檻。
- 戶外沒有街景覆蓋：園區位於山區，主流的實景導航（街景 VPS）無法使用。
- 靜態地圖看不懂方向：一張手繪地圖再漂亮，站在現場的人仍難以對應「我現在該往哪走」。
- 場館資訊分散：遊客到了定點，缺少即時的場館介紹與互動。
產品策略：以 WebAR 打造「免下載、掃碼即用」的導覽
在無街景覆蓋的前提下，本專案改以原生技術自建一套輕量 WebAR 導覽：
- 免安裝：掃 QR 或點連結即開，走網頁而非原生 App，消除下載門檻。
- 官方手繪圖為底圖：以園區官方手繪地圖為底，用相對座標定位各場館，不依賴街道圖。
- GPS + 羅盤實景箭頭：以手機定位與方位感測，於相機畫面疊出指向目標的箭頭，補上戶外無街景的缺口。
- 到點掃碼互動：抵達場館掃碼帶出介紹，作為未來合照等互動的錨點。
商業價值與影響力
- 提升遊園體驗：讓遊客抬頭即知方向，降低迷路與詢問服務台的頻率。
- 零安裝門檻：以 WebAR 取代原生 App，最大化活動與導覽的觸及率。
- 可自主維運：地圖與場館資料以設定檔管理，園區行銷可自行更新，不受外部平台限制。
- 可延伸互動：掃碼錨點預留合照等 Phase 3 互動，為後續行銷活動鋪路。
核心功能
已可運作
- 手繪地圖總覽：以 Leaflet CRS.Simple 貼合官方手繪圖，19 個場館依相對座標定位。
- 分類篩選：動物區 / 館舍 / 餐飲 / 出入口分類切換。
- 場館詳情底卡：點選場館帶出介紹與資訊卡片。
開發中
- AR 實景箭頭導航：相機串流 + 裝置方位 + Haversine 距離計算，於實景疊出指路箭頭（待灌真實座標與現場實測）。
- 到點掃碼互動：BarcodeDetector 掃碼骨架，正式版將換用相容性更佳的方案。
- Phase 3 合照：規劃以 Canvas 疊合去背角色圖，作為到點互動與社群分享素材。
技術亮點
- 無街景解法：捨棄依賴街景 VPS，改以 GPS + 羅盤 + 手繪圖相對座標自建戶外導航。
- 原生 WebAR 實作：相機串流搭配 DeviceOrientation 與 Haversine 計算，不引入 three.js / LocAR 等重量級依賴。
- 相對座標定位：場館以
fx/fy相對座標標定，不必等 GPS 校正即可先上線地圖總覽。 - 設定檔驅動內容：場館資料集中於
pois.json，含分類、座標、介紹與掃碼錨點。
系統架構
遊客手機（掃 QR / 開連結，免安裝）
│
├── 地圖總覽：Leaflet CRS.Simple + 手繪底圖 + 場館 Pin
│
├── AR 導航：相機串流 + GPS 定位 + 羅盤方位 + Haversine 箭頭
│
└── 到點掃碼：QR 錨點 → 場館詳情 →（未來）合照互動
│
└── pois.json（場館座標 / 分類 / 介紹 / 錨點）
技術棧
- 前端：HTML, CSS, Vanilla JavaScript
- 地圖：Leaflet（CRS.Simple 手繪圖疊圖）
- AR / 感測：MediaDevices 相機串流, DeviceOrientation, Geolocation
- 資料：JSON 設定檔（場館座標與內容）
- 部署：純靜態，需 HTTPS（相機 / 羅盤硬性要求）
成果證明
「本專案示範了在沒有街景覆蓋的戶外園區，如何不靠原生 App、不靠外部實景平台，僅以手繪地圖搭配手機 GPS 與羅盤，自建一套掃碼即用的 WebAR 導覽，把一張靜態地圖變成會替遊客指路的實景工具。」
💡 AI 協作筆記：本專案之 [無街景導航方案設計 / Leaflet 手繪圖定位 / 原生 WebAR 實作 / 場館資料建模] 係透過與 AI 深度對話共同完成，展現了高效能的 AI 輔助開發模式。