jsp使用ECharts动态在地图上标识点
ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:'map')是如何实现的。
首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里,它是一个JS的字典对象,由键/值对组成,键表示点的名称,值则表达它的坐标,由经纬度组成,它是一个数组,如[136.00,32.00]它就表示了一个坐标.
地图类型的图表需要关注的元素
title:标题,显示这个地图所表示的名称
title:{ text:'清大云点亮中国', subtext:'Tsingda.Cloud', sublink:'http://www.eee114.com', x:'center', y:'top', textStyle:{ color:'#fff' } }
toolbox:工具栏,显示一些显示的工具,放大,缩小,查看数据集,下载图像等。
toolbox:{ show:true, feature:{ mark:{show:true}, dataView:{show:true,readOnly:false}, restore:{show:true}, saveAsImage:{show:true} } }
egend:图标显示,当series有多个地图时,这个值用到显示多个地图的图标,可以是横向显示和纵向显示
legend:{ x:'left', y:'top', data:['在线','离线'],//在线和离线对应的是series的名字 selectedMode:false,//选中悬浮 textStyle:{ color:'#fff' } }
series:地图显示,用来叠放显示地图,你可以定义多个,它们之间的关系是第一个在最上面,以此类推.
series:[ //默认 { name:'底层模版', type:'map', mapType:'china', data:provinceMap, geoCoord:source, itemStyle:{ normal:{ color:bgColor, borderColor:"#eee", label:{ show:true, textStyle:{ color:"#fff" } } },emphasis:{color:"rgba(128,128,128,0.5)"} }, }
markPoint:点标识,用来标识地图上的后,这些点通常是被存储在一个geoCoord对象上,这个对象是一个字典,这在文章开头已经介绍过.
markPoint:{//动态标记 large:true,//这个选项,悬浮自动失效 symbolSize:2, itemStyle:{ normal:{ shadowBlur:2, shadowColor:'rgba(37,140,249,0.8)', color:onColor } }, data:[] }
markPoint里的data对象是这个地图上需要显示的点,它是一个字符型数组,用来存储geoCoord里的键!
setOption:将地图对象添加到指定的地图对象上
varmyChart=echarts.init(document.getElementById('main')); varoption={}; myChart.setOption(option);
动态构建地图上的点标识markPoint
大概的思路是将要标记的点动态付给geoCoord和markPoint的data对象上,这样就可以动态在地图上标示点了
$.get("/map/GetOffMap",function(data){ for(variindata){ option.series[0].geoCoord[data[i].longitude+"_"+data[i].latitude]=[parseFloat(data[i].longitude),parseFloat(data[i].latitude)]; option.series[1].markPoint.data.push({name:data[i].longitude+"_"+data[i].latitude}); } myChart.setOption(option);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。