重庆市建设网站公司,大学生网站设计作品成品代码,烟台公司做网站,智慧校园信息门户网站建设前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用#xff0c;后来在ECharts的Demo中看到了有关空气质量的相关报表应用#xff0c;就想将百度地图、ECharts和HT for Web三者结合起来也做一个类似空气质量报告的报表拓扑图应用#xff0c;于是有了下面的Demo#xff1a…前一篇谈及到了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
