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

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

效果圖

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

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

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

單擊“站點(diǎn)”顯示紅色標(biāo)注，雙擊節(jié)點(diǎn)自適應(yīng)放置到拓?fù)鋱D中央以及雙擊空白處將紅色標(biāo)注隱藏的內(nèi)容都是通過對拓?fù)浣M件 gv 的事件監(jiān)聽來控制的，非常清晰易懂，代碼如下：

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

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

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