ECHARTS+BAIDUMAP+HT for Web network topology diagram application

The previous article talked aboutEchartsIntegrationHT for Webof theNetwork topology Diagramapplication, and later inEchartsof theDemoSee the related Air Quality report application, you want to Baidu map,Echartsand theHT for Webthe three combine to make a report similar to the Air quality report+topology diagram application, so there is the followingDemo: http://www.hightopo.com/demo/blog_baidu_20150928/ht-baidu.html

in this Demo , you will Graphview The topology diagram component is added to the Baidu map component and is covered by the Baidu Map component , and on the Baidu map component and Graphview on the Topology diagram component, the event listener is added separately, the latitude and longitude and the screen position information are synchronized, so as to control the location of the component on the map and add the flow attribute to the connection between node and node. The icon box in the lower right corner is done using the HT for Web Panel component in conjunction with the echarts Chart Component.

Now let's take a look at the specific code implementation:

1. How Baidu Map is combined with the HT for Web component;

Map = new Bmap.map ("map"); var view = Graphview.getview (); view.classname = ' Graphview '; var mapdiv = document.getelementbyi D (' map '); MapDiv.firstChild.firstChild.appendChild (view);

First you need to have a DIV with ID map in the body, and then create a map object from the Baidu Map API, then create the Graphview topology diagram component and get the view from the Graphview component. Finally, add the view to the second generation child node of the DIV with the ID map. This is why the view is added to the second-generation child node of map, and when you examine the elements you will find that the div is the mask layer of the Baidu map, adding the view to it, which will make the view visible at the top of the map and not obscured by the map.

2. Baidu map and graphview event monitoring;

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);d Atamodel.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&Nbsp;= data.lonlat;position = map.pointtopixel (Lonlat);d ata.setposition (POSITION.X,POSITION.Y);});} 

First listen to the map's three events: MoveEnd, Dragend, Zoomend, these three events do the same thing--Modify the Position property of all data in Datamodel, so that it synchronizes the coordinates on the screen with the map, The execution function of the Graphview Scroll and pinch two events is then set to an empty function, that is, when the monitor hears the scroll or the pinch event, does not do any processing, the two events are given to map to handle.

in the resetposition function, the thing to do is simple: traverse Datamodel in the Data , which are converted to screen coordinates according to their respective latitude and longitude on the map, and the coordinates are set to the corresponding Data in order to achieve Graphview The effects of the nodes in the map can be fixed.

3. Create the Chart component in the lower right corner:

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 ';d ocument.body.appendChild (Chartpanel.getview ());}

first defines theht. Chartclass, and implements theValidateimplmethod, the logic that is handled in the method is also simple: call the chart at each time the method executesResetmethod to reset the display size of the icon, if the method is executed for the first time, call the chart'sRestoremethod to restore the chart to its original state. This is a design becauseht. Chartin the classViewis created dynamically, and is not added to theDomwill always exist in memory, in memory because there is no browser width information, soDivthe actual width and height are0, soChartwill beoptionthe content is plotted at a wide height of0of theDivin, even if youResizetheChart, if you do not reset the chart state, the chart status will not display properly on the chart.

The next step is to create the Panel diagram component, which is the basic use of the HT for Web Panel component, where the value of the content property can be any component or DIV element of the HT for Web, if it is a HT fro Web component. The component must implement the Validateimpl method, because the Validateimpl method of the content counterpart will be called after the panel's properties change to re-layout the component contents.

4. interaction of echarts and graphview topology diagram components:

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&NBSP;=&NBSP;{};GRAPHVIEW.DM (). SM (). each (function (data) {VAR&NBSP;NOTE&NBSP;=&NBSP;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 function is Echart of the chart legend plug-in check event listener, where the logic is: when legend one of the nodes in the plugin is selected, and the Graphview The corresponding node in the topology map, when unchecked yes, also unchecked Graphview the corresponding node in the topology diagram.

in graphview graphview legend The selected node on the plugin is deselected, then gets the selected node, and the legend graphview legend legend graphview

In the Graphview interaction, I added the _legendselect variable to the chart instance, The variable is set to prevent the legend plugin's node property from being modified in the Graphview interaction after the callback Legendselectedfun callback function is modified graphview the node property operation.

Write this today, I hope this article can help those who have maps, topology maps, charts, the combination of the needs of friends, in the design may not be mature enough, I hope you are not hesitate to enlighten us.

ECHARTS+BAIDUMAP+HT for Web network topology diagram application