Android 開發：實現百度地圖式圖片拼接與拖動縮放功能

專案背景與需求分析

公司計劃開發一款電子海圖手機 App，核心需求是將從海圖服務獲取的大量小圖片拼接顯示在手機螢幕上。拼接後的圖片尺寸可能遠超螢幕範圍，使用者需能像操作百度地圖一樣進行左右拖動、雙指縮放等交互操作。這是一個典型的大圖瀏覽場景，涉及圖片分塊載入、手勢識別、矩陣變換等核心技術點。

技術方案選型

方案一：自定義 View + Canvas 繪製（推薦）

繼承 View 類，重寫 onDraw() 方法，使用 Canvas.drawBitmap() 繪製可見區域的圖片塊。通過 Matrix 矩陣實現平移、縮放變換，在 onTouchEvent() 中處理手勢事件。此方案效能最高，記憶體佔用可控，適合海量圖片拼接場景。

方案二：WebView 載入 HTML 地圖

將圖片拼接邏輯放在前端（如 Leaflet、OpenLayers），App 僅作為容器載入。優點是開發快、跨平台；缺點是效能受限於 WebView，原生手勢體驗較差。

方案三：使用現成庫（PhotoView、BigImageViewer）

適合單張大圖瀏覽，但多圖拼接需自行擴展，靈活性受限。

核心實現要點

1. 圖片分塊載入策略

根據當前可見區域（ViewPort）計算需顯示的圖片索引範圍，僅載入可見塊及周邊預載塊。使用 LruCache 緩存 Bitmap，避免重複解碼導致 OOM。

2. 手勢處理與矩陣變換

private Matrix matrix = new Matrix();
private float[] matrixValues = new float[9];

@Override
public boolean onTouchEvent(MotionEvent event) {
    // 處理單指拖動、雙指縮放
    // 更新 matrix，調用 invalidate() 重繪
    return gestureDetector.onTouchEvent(event) || scaleGestureDetector.onTouchEvent(event);
}

@Override
protected void onDraw(Canvas canvas) {
    canvas.save();
    canvas.concat(matrix);
    // 繪製可見區域的圖片塊
    canvas.restore();
}

3. 邊界檢查與慣性滑動

縮放時需限制最小/最大縮放比；拖動時防止圖片移出可視區域外留白。可引入 Scroller 實現慣性滑動效果。

Demo 程式碼結構建議

• TileProvider：抽象圖片塊獲取介面，支援網路/本地/資料庫多源
• TileMapView：核心自定義 View，處理繪製、手勢、緩存
• MainActivity：初始化配置，設置 TileProvider 實例

常見坑點與優化

• OOM 風險：必須使用 inSampleSize 縮放解碼，及時 recycle() 不再使用的 Bitmap
• 畫面撕裂：雙緩衝機制或開啟硬體加速（setLayerType(LAYER_TYPE_HARDWARE, null)）
• 首屏載入慢：預載關鍵區域圖片，顯示佔位圖/載入動畫

完整 Demo 可參考 GitHub 開源專案 BigMapView 或 TileMapView，根據業務需求二次開發即可快速落地。