前面介紹了上海地鐵圖的繪制，最近有客戶提出了新的需求：雙車道，并顯示路網狀态資訊。經過一番研究，在原地鐵圖基礎上做了擴充實作
交通圖介紹
路況狀态在gis系統中廣泛應用，谷歌地圖，百度地圖都有實時路況的功能，太複雜并非好事，就像地鐵圖，按真實經緯度呈現反而不夠直覺，交通圖、路網也是如此，去掉無關資訊，将有限的資料（路，收費站，路況）展現出來，成為一種解決方案
百度地圖中的路況資訊
baidu地圖路況資訊
**
雙車道的繪制
來看具體實作，原來的地鐵圖是一條線表示，改用雙線繪制，可表現來往的方向，canvas并沒有雙線線形，需要自己實作
三種連接配接點類型
雙線的算法類似2d中的stroke算法，stroke拐點有三種方式：尖的、圓角、斜面，考慮到路網拐角不會太尖，是以簡單實作，采用miter方式，沿線各個拐點左右偏移
繪制雙車道，計算拐點的法線和夾角
繪制連線
雙車道呈現效果
路況狀态繪制
路況狀态也是呈線條狀，與路網繪制相同，隻不過為單向，還是上面的繪制函數，參數linedirection表示車道方向，左側車道偏移50%，右側則偏移-50%，這樣可以實作兩側不同的狀态
**function drawdoubleline(path, points, isdoubleline, size, linedirection) {
}**
路況模拟資料
與原來的例子相同，路況資訊也可以通過json資料加載，整個為一個array，集合中每個元素為一條路的路況片段資訊，"line"屬性表示所在路線的編号，"fragments"表示路況片段集合，每個片段包含三個屬性，與路線的json表示相同，隻不過增加了"direction"屬性，表示片段的方向
**[{
}]**
路況運作效果