使用 JavaScript 在地圖上以曲線連接省份並實現右鍵資訊顯示

需求概述

需要在 Web 頁面繪製中國地圖，並以平滑曲線連接指定省份，同時支援右鍵點擊顯示該省份或連線的詳細資訊。

技術選型建議

現代瀏覽器原生支援 HTML5 Canvas 與 SVG，繪製複雜圖形不再需要插件。推薦使用成熟的視覺化函式庫，可大幅降低開發難度：

• D3.js： 數據驅動文檔，適合高度客製化的地理路徑繪製與交互。
• ECharts： 百度開源，內建地圖座標系，支援飛線圖、線條樣式配置，開箱即用。
• SpriteJS / Three.js： 若需 3D 或高性能動畫可考慮。

核心實現步驟

1. 獲取地理數據： 使用 GeoJSON 格式的中國省份邊界數據。
2. 計算曲線路徑： 利用貝茲曲線或弧線算法，根據兩省份中心點座標生成 path 數據。
3. 繪製與樣式： 在 Canvas/SVG 上繪製路徑，設定顏色、寬度、虛實線等。
4. 事件綁定： 監聽 contextmenu 事件，阻止預設右鍵選單，根據滑鼠座標碰撞檢測目標元素，彈出自定義資訊框。

代碼片段示例

// 以 ECharts 為例配置飛線圖
option = {
  geo: { map: 'china', roam: true },
  series: [{
    type: 'lines',
    coordinateSystem: 'geo',
    data: [{ coords: [[116.4, 39.9], [121.5, 31.2]] }], // 北京 -> 上海
    lineStyle: { curveness: 0.3, color: '#ff0000' }
  }]
};
myChart.on('contextmenu', params => { /* 顯示資訊 */ });

總結

善用成熟圖表庫能讓你專注於業務邏輯而非底層繪圖數學，配合 GeoJSON 與事件系統，即可優雅實現省份曲線連接與右鍵交互。