SharpMap 表現層控件擴展：滑鼠拖曳模式 (平移/縮放/選取)

擴展目標

SharpMap.Web.UI 控制項預設未暴露滑鼠拖曳行為自訂。專案需支援三種模式切換：

• Pan (平移)：拖曳移動地圖視野。
• Zoom (框選縮放)：拉框放大指定區域。
• Select (框選查詢)：拉框選取圖層要素。

擴展步驟

1. 新增 MouseMode 列舉與屬性

public enum eMouseMode { Pan, Zoom, Select }

private eMouseMode _MouseMode;
[Category("Behavior")]
[DefaultValue(0)]
[Description("設定滑鼠拖曳模式：Pan/Zoom/Select。預設 Pan。")]
public eMouseMode MouseMode {
    get { return _MouseMode; }
    set { _MouseMode = value; }
}

2. 將屬性暴露給客戶端腳本

修改 GenerateClientScripts()，加入 setvarsScript 讓 JavaScript 讀取 MouseMode 值。

3. 新增 HTML 框選框控制項

• 在 GenerateMapBox() 中動態建立 <div> 作為框選視覺框，加入 Controls 集合。
• 修改 SharpMap_Init (JS) 與 GenerateClientScripts (CS)，將新 div 註冊為客戶端變數供操作。

4. 實作滑鼠事件處理邏輯

在客戶端 JavaScript SharpMap_MouseDown、SharpMap_MouseMove、SharpMap_MouseUp 中依 MouseMode 分派：

function SharpMap_MouseDown(e) {
    var mode = mapControl.MouseMode; // 從伺服器同步的模式值
    if (mode == "Zoom") {
        // 記錄起始點、顯示框選 div
        startX = e.clientX; startY = e.clientY;
        zoomBox.style.display = "block";
    } else if (mode == "Select") {
        // 類似 Zoom，但滑鼠釋放時送出範圍查詢
    }
    // Pan 模式通常由 Map 控制項內建處理 (按住滑鼠中鍵或 Shift+左鍵)
}

function SharpMap_MouseMove(e) {
    if (mode == "Zoom" || mode == "Select") {
        // 更新框選 div 寬高/位置
        zoomBox.style.left = Math.min(startX, e.clientX) + "px";
        zoomBox.style.top = Math.min(startY, e.clientY) + "px";
        zoomBox.style.width = Math.abs(e.clientX - startX) + "px";
        zoomBox.style.height = Math.abs(e.clientY - startY) + "px";
    }
}

function SharpMap_MouseUp(e) {
    if (mode == "Zoom") {
        // 計算地圖座標範圍，呼叫伺服器端 ZoomToBox 方法
        var box = getMapCoordinatesFromScreen(zoomBox);
        mapControl.ZoomToBox(box.minX, box.minY, box.maxX, box.maxY);
        zoomBox.style.display = "none";
    } else if (mode == "Select") {
        // 送出空間查詢請求
        var box = getMapCoordinatesFromScreen(zoomBox);
        mapControl.QueryFeaturesByBox(box);
        zoomBox.style.display = "none";
    }
}

關鍵點總結

1. 伺服器端屬性 MouseMode 需正確序列化至客戶端變數。
2. 框選視覺回饋 (div) 需在伺服器端建立、客戶端操作，確保座標系統一致。
3. 實際地圖操作 (平移、縮放、查詢) 最終透過回發或 AJAX 呼叫伺服器端 Map 方法完成。
4. 修改 SharpMap.UI.dll 原始碼重新編譯是最直接方式，若不想動原始碼可考慮繼承 MapControl 覆寫相關方法。

總結

透過擴展伺服器端屬性、客戶端腳本註冊、HTML 視覺元素與滑鼠事件分派，可為 SharpMap Web 控制項增加靈活的滑鼠互動模式，滿足專業 GIS 操作需求。