前一篇談及到了ECharts整合HT for Web的網絡拓撲圖應用，后來在ECharts的Demo中看到了有關空氣質量的相關報表應用，就想將百度地圖、ECharts和HT for Web三者結合起來也做一個類似空氣質量報告的報表+拓撲圖應用，于是有了下面的Demo：

在這個Demo中，將GraphView拓撲圖組件添加到百度地圖組件中，覆蓋在百度地圖組件之上，并且在百度地圖組件上和GraphView拓撲圖組件上分別添加事件監聽，相互同步經緯度和屏幕位置信息，從而來控制拓撲圖上的組件位置固定在地圖上，并在節點和節點之間的連線上加上了流動屬性。右下角的圖標框是采用HT for Web的Panel面板組件結合ECharts圖表組件完成的。

接下來我們來看看具體的代碼實現：

1.百度地圖是如何與HT for Web組件結合的；

map = new BMap.Map("map"); var view = graphView.getView(); view.className = 'graphView'; var mapDiv = document.getElementById('map'); mapDiv.firstChild.firstChild.appendChild(view);

首先需要在body中存在id為map的div，再通過百度地圖的api來創建一個map地圖對象，然后創建GraphView拓撲圖組件，并獲取GraphView組件中的view，最后將view添加到id為map的div的第二代孩子節點中。這時候問題就來了，為什么要將view添加到map的第二代孩子節點中呢，當你審查元素時你會發現這個div是百度地圖的遮罩層，將view添加到上面，會使view會是在地圖的頂層可見，不會被地圖所遮擋。

2.百度地圖和GraphView的事件監聽；

map.addEventListener('moveend', function(e){ resetPosition(); }); map.addEventListener('dragend', function(e){ resetPosition(); }); map.addEventListener('zoomend', function(e){ resetPosition(); }); graphView.handleScroll = function(){}; graphView.handlePinch = function(){}; function resetPosition(e){ graphView.tx(0); graphView.ty(0); dataModel.each(function(data){ var lonLat, position; if(data instanceof ht.HtmlNode){ if(data.getId() != 'chartTotal') { position = data.getHost().getPosition(); position = {x: position.x + 168, y: position.y + 158}; data.setPosition(position.x, position.y); } } else if(data instanceof ht.Node){ lonLat = data.lonLat; position = map.pointToPixel(lonLat); data.setPosition(position.x,position.y); } }); }

首先監聽map的三個事件：moveend、 dragend、 zoomend，這三個事件做了同一件事--修改DataModel中所有data的position屬性，讓其在屏幕上的坐標與地圖同步，然后將GraphView的Scroll和Pinch兩個事件的執行函數設置為空函數，就是當監聽到Scroll或者Pinch事件時不做任何的處理，將這兩個事件交給map來處理。

在resetPosition函數中，做的事情很簡單：遍歷DataModel中的data，根據它們各自在地圖上的經緯度來換算成屏幕坐標，并將坐標設置到相應的data中，從而達到GraphView中的節點能夠固定在地圖上的效果。

3.創建右下角的圖表組件：

ht.Chart = function(option){ var self = this, view = self._view = document.createElement('div'); view.style.position = 'absolute'; view.style.setProperty('box-sizing', 'border-box', null); self._option = option; self._chart = echarts.init(self.getView()); if(option) self._chart.setOption(option); self._FIRST = true; }; ht.Default.def('ht.Chart', Object, { ms_v: 1, ms_fire: 1, ms_ac: ['chart', 'option', 'isFirst', 'view'], validateImpl: function(){ var self = this, chart = self._chart; chart.resize(); if(self._FIRST){ self._FIRST = false; chart.restore(); } }, setSize: function(w, h){ var view = this._view; view.style.width = w + 'px'; view.style.height = h + 'px'; } }); function createPanel(title, width, height){ chart = new ht.Chart(option); var c = chart.getChart(); c.on(echarts.config.EVENT.LEGEND_SELECTED, legendSelectedFun); var chartPanel = new ht.widget.Panel({ title: title, restoreToolTip: "Overview", width: width, contentHeight: height, narrowWhenCollapse: true, content: chart, expanded: true }); chartPanel.setPositionRelativeTo("rightBottom"); chartPanel.setPosition(0, 0); chartPanel.getView().style.margin = '10px'; document.body.appendChild(chartPanel.getView()); }

首先定義了ht.Chart類，并實現了validateImpl方法，方法中處理的邏輯也很簡單：在每次方法執行的時候調用圖表的reset方法重新設定圖標的展示大小，如果該方法是第一次執行的話，就調用圖表的restore方法將圖表還原為最原始的狀態。會有這樣的設計是因為ht.Chart類中的view是動態創建的，在沒有添加到dom之前將一直存在于內存中，在內存中因為并沒有瀏覽器寬高信息，所以div的實際寬高均為0，因此chart將option內容繪制在寬高為0的div中，即使你resize了chart，如果沒用重置圖表狀態的話，圖表狀態將無法在圖表上正常顯示。

接下來就是創建panel圖表組件了，這是HT for Web的Panel組件的基本用法，其中content屬性的值可以是HT for Web的任何組件或div元素，如果是HT fro Web組件的話，該組件必須實現了validateImpl方法，因為在panel的屬性變化后將會調用content對應組件的validateImpl方法來重新布局組件內容。

4.ECharts和GraphView拓撲圖組件的交互：

legendSelectedFun = function(param) { if(chart._legendSelect){ delete chart._legendSelect; return; } console.info(param); var id = nodeMap[param.target], dm = graphView.dm(), data = dm.getDataById(id), sm = dm.sm(), selection = sm.getSelection(); if(param.selected[param.target]) { sm.appendSelection([data]); if(selectionData.indexOf(param.target) < 0){ selectionData.push(param.target); } }else { sm.removeSelection([data]); var index = selectionData.indexOf(param.target); if(index >= 0){ selectionData.splice(index, 1); } } sm.setSelection(selection.toArray()); }; graphView.mi(function(e){ console.info(e.kind, e.data); var c = chart.getChart(), legend = c.component.legend, selectedMap = legend.getSelectedMap(); if(e.kind === 'endRectSelect'){ chart._legendSelect = true; for(var name in notes){ legend.setSelected(name, false); } notes = {}; graphView.dm().sm().each(function(data){ var note = data.s('note'); if(note) notes[note] = 1; }); for(var name in notes){ legend.setSelected(name, true); } } else if(e.kind === 'clickData'){ chart._legendSelect = true; var data = e.data; if(data instanceof ht.Node){ var note = data.s('note'); if(note){ var selected = legend.isSelected(note); if(selected){ graphView.dm().sm().removeSelection([data]); } legend.setSelected(note, !selected); } } } });

legendSelectedFun函數是EChart圖表的legend插件選中事件監聽，其中處理的邏輯是：當legend插件中的某個節點被選中了，也選中在GraphView拓撲圖中對應的節點，當取消選中是，也取消選中GraphView拓撲圖中對應的節點。

在GraphView中添加交互監聽，如果在GraphView中做了框選操作，在框選結束后，將原本legend插件上被選中的節點取消選中，然后再獲取被選中節點，并在legend插件上選中對應節點；當GraphView上的節點被選中，則根據legend插件中對應節點選中情況來決定legend插件中的節點和graphView上的節點是否選中。

在GraphView交互中，我往chart實例中添加了_legendSelect變量，該變量的設定是為了阻止在GraphView交互中修改legend插件的節點屬性后回調legendSelectedFun回調函數做修改GraphView中節點屬性操作。

更多信息請查看IT技術專欄