在 Google Maps 上繪製曲線 (Curved Lines) 風格新穎又省錢!


本篇原文(標題:Creating Curved Lines in Google Maps)刊登於作者 Medium,由 Ryan NHP 所著,並授權翻譯及轉載。

你知道嗎?當你在 Google Maps 使用 Google Directions APIs 繪製從位置 A 到位置 B 的路線時,費用非常高昂。

目前有些公司將真實路線轉換為像 Uber 那樣的直線,或者像 Deliveree 那樣的曲線

因此,我認為本篇文章對以下讀者有所幫助:

  • 想要畫出新風格的路線
  • 不想付錢到 Google Maps 的口袋裡

如何繪製一條曲線?

如果要畫一條直線將 A 點連接到 B 點,我們需要知道 A 點和 B 點的座標。

而繪製曲線,就是連結許多以直線相結合的微小點。因此,要繪製一條曲線,方法就是找尋該曲線上每個點的座標

讓我們這樣命名不同的點:

name-the-points

首先,通過以下方式創建初始路徑

create-initial-path

步驟 1:計算 S 與 E 兩點的距離

SE-distance

Google Maps 可支援我們透過 GMSGeometryDistance 函式,獲取地圖上 2 個點之間的距離(單位為公尺)。

步驟二:定義合適的角度

我們必須選擇一個合適的角度,如果角度太大,O(中心點)與 S 或 E 的距離可能會很遠,這樣曲線看起來就會像一條直線,所以我建議的角度是小於 Pi / 2。角度越小,曲線就可以更彎曲。

步驟三:計算 M 與 O 點距離

因為我們還需要知道半徑,所以讓我們來透過公式計算半徑和 M 與 O 點的距離。

MO-distance

下列幾行程式碼可以幫你計算半徑和 M 與 O 點的距離:

MO-distance-2

步驟四:計算 O 的座標

Google Maps 有兩個方法可以支援我們:

  1. GMSGeometryHeading
    這個方法可以回傳從 from 以最短路徑航向 to 的初始 heading(從北往順時針方向的度數)。而回傳值在 [0, 360) 的範圍內。
  2. GMSGeometryOffset
    當從 from 的初始 heading 開始,沿地球的大圓弧前進特定 distance 後,這個方法會回傳目的地座標。而回傳的經度在 [-180, 180) 範圍內。

我們結合 GMSGeometryHeadingGMSGeometryOffset,來找到 M 的座標。

從開始位置到結束位置:

startlocation-to-endlocation

由於 S、M、E 在同一條線上,因此我們可以透過以下方式找到 M 的座標:

m-coordinate

下一步,我們要找 O 的座標。

如下圖所示,O 會有兩個座標,我們有藍色 O 和紅色 O。為了簡單起見,我們可以選擇其中一個。

o-coordinate

我想透過一個基於 S 經度和 E 經度的公式來選擇方向,如下圖所示:

o-coordinate-2

現在,我們可以這樣計算 O 的座標:

o-coordinate-3

步驟五:在曲線上找到不同角度 (a1、a2、⋯ an) 的各個位置

這一步是繪製曲線最重要的一步,你需要將角度分割成 n 個較小的角度,然後結合 半徑O 座標 的資料,來找到曲線上每個點的座標。

在本篇文章的範例中,這條曲線需要有 100 個座標點。

以下是我編寫的程式碼,用於定義曲線上的每個位置:計算每個位置座標,並將它們添加到上面創建的初始路徑中。

define-location

步驟六:將 GMSMutablePath 轉換為 GMSPolyline

convert-GMSMutablePath-to-GMSPolyline

我將 GMSMutablePath 轉換為 GMSPolyline,並將其添加到地圖視圖中,然後設置線的寬度和顏色。

完成了!現在我們有了畫一條曲線所需的所有程式碼。

curved-lines-full-code

現在可以運行看看,我將嘗試繪製一條從倫敦到劍橋的曲線,並對其進行客製呈現,讓我們看看結果如何:

curved-lines-demo

總結

curved lines conclusion

我把專案上載到了 GitHub,有興趣的話可以參考看看!

本篇原文(標題:Creating Curved Lines in Google Maps)刊登於作者 Medium,由 Ryan NHP 所著,並授權翻譯及轉載。

作者簡介:Ryan,Deliveree On-Demand Logistics 的 iOS 開發人員。

譯者簡介:陳奕先-過去為平面財經記者,專跑產業新聞,2015 年起跨進軟體開發世界,希望在不同領域中培養新的視野,於新創學校 ALPHA Camp 畢業後,積極投入 iOS 程式開發,目前任職於國內電商公司。

聯絡方式:電郵:che[email protected] FB : https://www.facebook.com/yishen.chen.54 Twitter : https://twitter.com/YeEeEsS


此文章為客座或轉載文章,由作者授權刊登,AppCoda編輯團隊編輯。有關文章詳情,請參考文首或文末的簡介。

blog comments powered by Disqus
Shares
Share This