2013年1月16日 星期三

使用 javascript 來畫路線圖

說明台北捷運路線圖這個網頁工具的地圖製作過程。
http://tw.piliapp.com/mrt-taiwan/taipei/

看到台北捷運地圖的 android app 被下架,原因是因為該 app 裡頭使用了台北捷運官網的地圖。

因為我也有用,覺得自己也在劫難逃,最好的解法就是自己畫!
那... 怎麼畫?我只會使用小畫家耶!
我是個沒藝術感的工程師,並不會photoshop等是什麼很貴的軟體。

因為之前有使用 html5 + css3 來製作 icon 的經驗,所以..
  • 最好的製圖平台就在眼前:Google Chrome
  • 最好的製圖工具就是 javascript
在此分享一下我怎麼做的。
為了避免侵權,所以我一開始就決定,不參考現有的捷運地圖,一切由「地圖」開始。
  1. 先到 Google Map 上,把地圖存下來,用了兩次 print screen,再用小畫家合併
  2. 把捷運站先用大紅點標出來
  3. 再把路線畫出來
  4. 最終結果是要用來畫一個路線示意圖


接下來用紙筆畫出示意圖,先思考幾個重點:
  1. 地理位置其實不太重要 (東門站其實繞了一大圈)
  2. 圖不能太大也很重要,必要時更改路線走向 (不然旁邊怎麼放廣告)
  3. 示意盡量簡單,能變直線就變直線,盡可能以 90 度或45度為單位
  4. 每一條線不能太近,不然標不上字

其實圖總共畫了第三次的版本。黑圈表示要轉變的站,線上的數字表示走了幾個站。(這個版本後來有補畫到動物園)


好,要開始用 javascript 畫,方法其實很直覺。先回顧剛剛怎麼用「筆」來畫的:
  1. 我從台北車站開始畫一個●
  2. 往東邊畫兩個站的距離到忠孝新生
  3. 再往東畫八個站到南港展覽館
  4. 再來往北向柵湖線畫,繞了一圈...
  5. 畫到南京東路站的時候,發現直接「連到」忠孝復興站即可。
功能都出來啦!我需要一隻像筆一樣的javascript class
  • class name DrawRouteMap
  • methods:
    • site(x, y)  //畫啟始站,或單一個站。回傳 站的 id (只是一個編號)
    • line(site_id, angle, distance, num) // 從台北車站往右畫兩個站的距離,要把路線畫出來。參數分別是:啟始車站 ID,路線往哪個方向,一站的距離多少,走幾個站
    • link(site_id_1, site_id_2)  // 連結兩個站的路線
    • set_line_style(...) // 在畫路徑的時候,要用什麼顏色
    • set_site_style(...) // 在畫車站的時候,要用什麼顏色
所以,這隻畫筆的class寫好之後,就可以用直覺的敘述方式,把圖給畫出來了。當然後來因為要加上站名,所以有再外加一些參數,就不細說了。



整個過程加上哩哩摳摳的東西花了快一個工作天(所以成本是?),Library建好後,再去畫高雄捷運也需要個半天的時間。成品如下: