摘要：前言前兩天在上尋找靈感的時候，看到了很多有關地圖類似的例子，地圖定位等等，但是好像就是沒有地鐵線路圖，就自己花了一些時間搗鼓出來了這個交互式地鐵線路圖的，地鐵線路上的點是在網上隨便下載了一個，這篇文章記錄自己的一些收獲畢竟我還是個菜鳥以及代

前兩天在 echarts 上尋找靈感的時候，看到了很多有關地圖類似的例子，地圖定位等等，但是好像就是沒有地鐵線路圖，就自己花了一些時間搗鼓出來了這個交互式地鐵線路圖的 Demo，地鐵線路上的點是在網上隨便下載了一個，這篇文章記錄自己的一些收獲（畢竟我還是個菜鳥）以及代碼的實現，希望能夠幫到一些朋友。當然，如果有什么意見的可以直接跟我說，大家一起交流才會進步。

效果圖

form 表單的聲明部分我好像還沒有解釋。。。就是通過 new 一個 ht.widget.FomePane 類創建一個 form 表單組件，通過 form.getView() 獲取表單組件的底層 div，將這個 div 擺放在 body 右下角，然后通過 addRow 函數向 form 表單中添加一行的表單項，可以在這行中添加任意多個項，通過 addRow 函數的第二個參數（一個數組），對添加進的表單項進行寬度的設置，通過第三個參數設置這行的高度：

function createForm() {//創建右下角的form表單
    var form = new ht.widget.FormPane();
    form.setWidth(200);//設置表單寬度
    form.setHeight(416);//設置表單高度
    let view = form.getView();
    document.body.appendChild(view);//將表單添加進body中
    view.style.zIndex = 1000;
    view.style.bottom = "10px";//ht組件幾乎都設置絕對路徑
    view.style.right = "10px";
    view.style.background = "rgba(211, 211, 211, 0.8)";

    names.forEach(function(nameString) {
        form.addRow([//向表單中添加行
            {//這一行中的第一個表單項
                button: {//向表單中添加button按鈕
                    icon: "images/Line"+nameString.value+".json",//設置按鈕的圖標
                    background: "",//設置按鈕的背景
                    borderColor: "",//設置按鈕的邊框顏色
                    clickable: false//設置按鈕不可點擊
                }
            },
            {//第二個表單項
                button: {
                    label: nameString.name,
                    labelFont: "bold 14px arial, sans-serif",
                    labelColor: "#fff",
                    background: "",
                    borderColor: "",
                    onClicked: function() {//按鈕點擊回調事件
                        gv.sm().ss(dm.getDataByTag(nameString.value));//設置選中按下的按鈕對應的線路
                        gv.fitData(gv.sm().ld(), true, 5);//將選中的地鐵線路顯示在拓撲圖的中央
                    }
                }
            }
        ], [0.1, 0.2], 23);//第二個參數是設置第一參數中的數組的寬度，小于1是比例，大于1是實際寬度。第三個參數是該行的高度
    });
}

單擊“站點”顯示紅色標注，雙擊節點自適應放置到拓撲圖中央以及雙擊空白處將紅色標注隱藏的內容都是通過對拓撲組件 gv 的事件監聽來控制的，非常清晰易懂，代碼如下：

var node = createRedLight();//創建一個新的節點，顯示為“紅燈”的樣式
gv.mi(function(e) {//ht 中拓撲組件中的事件監聽
    if(e.kind === "clickData" && (e.data.a("tpNode") || e.data.a("npNode"))) {//e.kind獲取當前事件類型，e.data獲取當前事件下的節點
        node.s("2d.visible", true);//設置node節點可見
        node.setPosition(e.data.getPosition().x, e.data.getPosition().y);//設置node的坐標為當前事件下節點的位置
    }
    else if(e.kind === "doubleClickData") {//雙擊節點
        gv.fitData(e.data, false, 10);//將事件下的節點自適應到拓撲圖的中央，參數1為自適應的節點，參數2為是否動畫，參數3為gv與邊框的padding
    }
    else if(e.kind === "doubleClickBackground") {//雙擊空白處
        node.s("2d.visible", false);//設置node節點不可見 查看 HT for Web 樣式手冊（http://www.hightopo.com/guide/guide/core/theme/ht-theme-guide.html#ref_style）
    }
});

注意 s（style） 和 a（attr） 定義是這樣的，s 是 ht 預定義的一些樣式屬性，而 a 是我們用戶來自定義的屬性，一般是通過調用字符串來調用結果的，這個字符串對應的可以是常量也可以是函數，還是很靈活的。

最后還做了一個小小的部分，選中“站點”，則該“站點”的上方會顯示一個紅色的會“呼吸”的用來注明當前選中的“站點”。