echarts label固定位置_ECharts+百度地图网络拓扑应用
前一篇谈及到了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
echarts label固定位置_ECharts+百度地图网络拓扑应用相关推荐
- 【echarts tooltip 固定位置】
echarts tooltip 固定位置 改之前 改之后 实现代码 今天遇到一个需求,就是echarts 柱状图tooltip 要显示的数据较多,当鼠标移动的时候,上面的信息可能会被看不到,所以给出固 ...
- 微信JS-SDK坐标位置转换为百度地图坐标
原文:微信JS-SDK坐标位置转换为百度地图坐标 微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转 ...
- 指定位置签到-百度地图
1.引用百度地图js <script src="http://api.map.baidu.com/api?v=2.0&ak=ak" type="text/j ...
- QT5百度地图开发学习——qt调用输入位置坐标位置进行百度地图定位
系列文章目录 上一章: QT5百度地图开发学习--JavaScript调用qt函数并传参给qt 文章目录 系列文章目录 前言 一.界面设计 二.槽函数 总结 前言 本文实现输入坐标然后在地图上显示位置 ...
- vue点击定位到指定位置_百度地图vue-baidu-map自动定位,鼠标选点并进行逆解析,地区检索,使用案列以及解决方案...
店铺信息 size="large" placeholder="请输入店铺名称" v-decorator="['openShopData.shopNam ...
- echarts label加边框_echarts 添加自定义label标签
1.echarts 自定义标签 注:当设置visualMap的后,给覆盖regions单独定义的值(如果data 中没有regions的地区 则无妨,我这个是从data中删除'青岛',但是lable ...
- echarts label加边框_ECharts官方教程(十三)【富文本标签】
富文本标签 在许多地方(如图.轴的标签等)都可以使用富文本标签.例如: 其他一些例子: Map Labels, Pie Labels, Gauge. 原先 echarts 中的文本标签,只能对整块统一 ...
- echarts中toolbox位置_echarts toolbox 扩展
前言## echarts是百度前端团队推出的一个非常强大的开源图表库,我最近在重构的一个内部后台系统也用到了echarts,但是梳理老代码的时候发现有人居然改了node_modules/echarts ...
- echarts 仪表盘 文字位置_ECharts 使用series.title.offsetCenter设置仪表盘标题位置
ECharts 使用series.title.offsetCenter设置仪表盘标题位置 ECharts 使用series.title.offsetCenter设置仪表盘标题位置 1 使用详解 ser ...
最新文章
- eclipse中使用svn提交,更新代码。
- 计算机专业推荐表自我介绍,就业推荐表-自我介绍
- 中文整合包_案例 | 美研市场营销和整合营销专业1620Fall 580+申请实例(含MS+PHD)...
- 虚拟linux系统首次登入,第一次在虚拟机启动我们的Linux系统
- 推荐 18 个终端命令行工具
- 力扣买卖股票系列总结
- 我最喜欢的ORM工具—Simple Data(转)
- pythotn基础篇——条件分支与循环--4
- 天视通ipc地址修改工具_远程运行小工具PsExec
- vc6.0垃圾文件清理工具_C盘空间逐渐被垃圾文件填满,详细清理方法介绍
- nmap扫描端口命令详解linux网络探测之网络安全
- [STM32学习笔记]野火MINI开发板ISP一键下载电路
- 操作系统——进程调度
- 09 在ubuntu中切换多终端的方法
- 预测大盘最准确的指标_一辈子死记一个指标,完全弄透彻,即可预测一个月的股市升跌!...
- 揭秘京东城市时空数据引擎—JUST如何助力交通流量预测
- 自定义表单开发过程及思路笔记
- AS608 指纹模块驱动代码
- android开发论坛!原生Android开发的路该怎么走?系列篇
- x64驱动:DKOM 实现进程隐藏
热门文章
- java框架白话_Java NIO框架Netty教程(二) 白话概念
- openssl不是内部或外部命令_OpenSSL新架构蓝图
- mybatis源码_Mybatis源码之SqlSession
- mac你没有权限打开应用程序_如何管理Mac的隐私权限控制
- java 如何去掉http debug日志_你居然还去服务器上捞日志,搭个日志收集系统难道不香吗?...
- 计算机科学研究生规划,2019计算机考研备考:计算机科学与技术研究方向及复习规划...
- hprose for java 教程_hprose for java源码分析-4
- 字节流转化为文件流_C#文件转换为字节流及字节流转换为文件
- 统计文件中有多少个单词amp;c语言实现
- Java BigDecimal plus()方法与示例