Chinaunix首页 | 论坛 | 博客

xhload3d

首页　| 　博文目录　| 　关于我

xhload3d

  • 博客访问： 938488
  • 博文数量： 110
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 1997
  • 用 户 组： 普通用户
  • 注册时间： 2013-12-15 22:39
个人简介

HT for Web 3D. HT for modern web and mobile app development. www.hightopo.com

文章分类

全部博文（110）

文章存档

2020年（1）

2018年（28）

2017年（21）

2016年（10）

2015年（28）

2014年（19）

2013年（3）

我的朋友
最近访客
推荐博文
百度地图、ECharts整合HT for Web网络拓扑图应用

分类： HTML5

2015-03-23 02:22:20

前一篇谈及到了整合的应用，后来在ECharts的Demo中看到了有关空气质量的相关报表应用，就想将百度地图、ECharts和HT for Web三者结合起来也做一个类似空气质量报告的报表+拓扑图应用，于是有了下面的Demo：


在这个Demo中，将拓扑图组件添加到百度地图组件中，覆盖在百度地图组件之上，并且在百度地图组件上和GraphView拓扑图组件上分别添加事件监听，相互同步经纬度和屏幕位置信息，从而来控制拓扑图上的组件位置固定在地图上，并在节点和节点之间的连线上加上了流动属性。右下角的图标框是采用的Panel面板组件结合ECharts图表组件完成的。

接下来我们来看看具体的代码实现：

1.百度地图是如何与HT for Web组件结合的；

点击(此处)折叠或打开

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

首先需要在body中存在id为map的div，再通过百度地图的api来创建一个map地图对象，然后创建拓扑图组件，并获取GraphView组件中的view，最后将view添加到id为map的div的第二代孩子节点中。这时候问题就来了，为什么要将view添加到map的第二代孩子节点中呢，当你审查元素时你会发现这个div是百度地图的遮罩层，将view添加到上面，会使view会是在地图的顶层可见，不会被地图所遮挡。

2.百度地图和GraphView的事件监听；

点击(此处)折叠或打开

  1. map.addEventListener('moveend', function(e){
  2.    resetPosition();
  3. });
  4. map.addEventListener('dragend', function(e){
  5.    resetPosition();
  6. });
  7. map.addEventListener('zoomend', function(e){
  8.     resetPosition();
  9. });

  11. graphView.handleScroll = function(){};
  12. graphView.handlePinch = function(){};

  14. function resetPosition(e){
  15.     graphView.tx(0);
  16.     graphView.ty(0);
  17.     dataModel.each(function(data){
  18.         var lonLat, position;
  19.         if(data instanceof ht.HtmlNode){
  20.             if(data.getId() != 'chartTotal') {
  21.                 position = data.getHost().getPosition();
  22.                 position = {x: position.x + 168, y: position.y + 158};
  23.                 data.setPosition(position.x, position.y);
  24.             }
  25.         } else if(data instanceof ht.Node){
  26.             lonLat = data.lonLat;
  27.             position = map.pointToPixel(lonLat);
  28.             data.setPosition(position.x,position.y);
  29.         }
  30.     });
  31. }

首先监听map的三个事件：moveend、 dragend、 zoomend，这三个事件做了同一件事--修改DataModel中所有data的position属性，让其在屏幕上的坐标与地图同步，然后将GraphView的Scroll和Pinch两个事件的执行函数设置为空函数，就是当监听到Scroll或者Pinch事件时不做任何的处理，将这两个事件交给map来处理。

在resetPosition函数中，做的事情很简单：遍历DataModel中的data，根据它们各自在地图上的经纬度来换算成屏幕坐标，并将坐标设置到相应的data中，从而达到中的节点能够固定在地图上的效果。


3.创建右下角的图表组件：

点击(此处)折叠或打开
  1. ht.Chart = function(option){
  2.     var self = this,
  3.             view = self._view = document.createElement('div');
  4.     view.style.position = 'absolute';
  5.     view.style.setProperty('box-sizing', 'border-box', null);
  6.     self._option = option;
  7.     self._chart = echarts.init(self.getView());
  8.     if(option)
  9.         self._chart.setOption(option);
  10.     self._FIRST = true;
  11. };
  12. ht.Default.def('ht.Chart', Object, {
  13.     ms_v: 1,
  14.     ms_fire: 1,
  15.     ms_ac: ['chart', 'option', 'isFirst', 'view'],
  16.     validateImpl: function(){
  17.         var self = this,
  18.                 chart = self._chart;
  19.         chart.resize();
  20.         if(self._FIRST){
  21.             self._FIRST = false;
  22.             chart.restore();
  23.         }
  24.     },
  25.     setSize: function(w, h){
  26.         var view = this._view;
  27.         view.style.width = w + 'px';
  28.         view.style.height = h + 'px';
  29.     }
  30. });

  32. function createPanel(title, width, height){
  33.     chart = new ht.Chart(option);
  34.     var c = chart.getChart();
  35.     c.on(echarts.config.EVENT.LEGEND_SELECTED, legendSelectedFun);
  36.     var chartPanel = new ht.widget.Panel({
  37.         title: title,
  38.         restoreToolTip: "Overview",
  39.         width: width,
  40.         contentHeight: height,
  41.         narrowWhenCollapse: true,
  42.         content: chart,
  43.         expanded: true
  44.     });
  45.     chartPanel.setPositionRelativeTo("rightBottom");
  46.     chartPanel.setPosition(0, 0);
  47.     chartPanel.getView().style.margin = '10px';

  49.     document.body.appendChild(chartPanel.getView());
  50. }

首先定义了ht.Chart类，并实现了validateImpl方法，方法中处理的逻辑也很简单：在每次方法执行的时候调用图表的reset方法重新设定图标的展示大小，如果该方法是第一次执行的话，就调用图表的restore方法将图表还原为最原始的状态。会有这样的设计是因为ht.Chart类中的view是动态创建的，在没有添加到dom之前将一直存在于内存中，在内存中因为并没有浏览器宽高信息，所以div的实际宽高均为0，因此chart将option内容绘制在宽高为0的div中，即使你resize了chart，如果没用重置图表状态的话，图表状态将无法在图表上正常显示。

接下来就是创建panel图表组件了，这是的Panel组件的基本用法，其中content属性的值可以是HT for Web的任何组件或div元素，如果是HT fro Web组件的话，该组件必须实现了validateImpl方法，因为在panel的属性变化后将会调用content对应组件的validateImpl方法来重新布局组件内容。

 

4.ECharts和的交互：

点击(此处)折叠或打开

  1. legendSelectedFun = function(param) {
  2.     if(chart._legendSelect){
  3.         delete chart._legendSelect;
  4.         return;
  5.     }
  6.     console.info(param);
  7.     var id = nodeMap[param.target],
  8.             dm = graphView.dm(),
  9.             data = dm.getDataById(id),
  10.             sm = dm.sm(),
  11.             selection = sm.getSelection();

  13.     if(param.selected[param.target]) {
  14.         sm.appendSelection([data]);
  15.         if(selectionData.indexOf(param.target) < 0){
  16.             selectionData.push(param.target);
  17.         }
  18.     }else {
  19.         sm.removeSelection([data]);
  20.         var index = selectionData.indexOf(param.target);
  21.         if(index >= 0){
  22.             selectionData.splice(index, 1);
  23.         }
  24.     }
  25.     sm.setSelection(selection.toArray());
  26. };

  28. graphView.mi(function(e){
  29.     console.info(e.kind, e.data);
  30.     var c = chart.getChart(),
  31.             legend = c.component.legend,
  32.             selectedMap = legend.getSelectedMap();

  34.     if(e.kind === 'endRectSelect'){
  35.         chart._legendSelect = true;
  36.         for(var name in notes){
  37.             legend.setSelected(name, false);
  38.         }
  39.         notes = {};
  40.         graphView.dm().sm().each(function(data){
  41.             var note = data.s('note');
  42.             if(note)
  43.                 notes[note] = 1;
  44.         });
  45.         for(var name in notes){
  46.             legend.setSelected(name, true);
  47.         }
  48.     } else if(e.kind === 'clickData'){
  49.         chart._legendSelect = true;
  50.         var data = e.data;
  51.         if(data instanceof ht.Node){
  52.             var note = data.s('note');

  54.             if(note){
  55.                 var selected = legend.isSelected(note);
  56.                 if(selected){
  57.                     graphView.dm().sm().removeSelection([data]);
  58.                 }
  59.                 legend.setSelected(note, !selected);
  60.             }
  61.         }
  62.     }
  63. });

legendSelectedFun函数是EChart图表的legend插件选中事件监听，其中处理的逻辑是：当legend插件中的某个节点被选中了，也选中在拓扑图中对应的节点，当取消选中是，也取消选中GraphView拓扑图中对应的节点。

在GraphView中添加交互监听，如果在GraphView中做了框选操作，在框选结束后，将原本legend插件上被选中的节点取消选中，然后再获取被选中节点，并在legend插件上选中对应节点；当GraphView上的节点被选中，则根据legend插件中对应节点选中情况来决定legend插件中的节点和graphView上的节点是否选中。

在GraphView交互中，我往chart实例中添加了_legendSelect变量，该变量的设定是为了阻止在GraphView交互中修改legend插件的节点属性后回调legendSelectedFun回调函数做修改GraphView中节点属性操作。


今天就写到这吧，希望这篇文章能够帮到那些有地图、、图表相结合需求的朋友，在设计上可能想法还不够成熟，希望大家不吝赐教。
阅读(3224) | 评论(0) | 转发(0) |
0

上一篇：ECharts整合HT?for?Web的网络拓扑图应用

下一篇：Zip 压缩、解压技术在 HTML5 浏览器中的应用

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6