首页 > 科技 >

ECharts+BaiduMap+HT for Web网络拓扑图应用(2)

2019-01-30 02:45:08 网络整理 阅读:175 评论:0

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中的节点能够固定在地图上的效果。

ECharts+BaiduMap+HT for Web网络拓扑图应用(2)

ECharts+BaiduMap+HT for Web网络拓扑图应用(2)

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

ht.Chart = function(option){

var self = this,

view = self._view = document.createElement('div');

相关文章