openlayers与echarts3的结合使用
目录
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问,echarts是百度的开源js图表库,下面简单讲解下如何在openlayers的地图‘贴’上echarts的图表。
开始
首先在html界面上添加两个div,一个装载地图,一个装载表格:
<div id="map"></div>
<div id="chart"></div>
定义style:
#map{
height: 70%;
width: 90%;
}
#chart{
height: 200px;
width: 200px;
}
加载地图我就不说了,要用openlayers开始就要学会如何加载地图。
准备图表
然后是准备要显示的数据,我们的数据很简单
var data = [{name:'第一类',value:20},{name:'第二类',value:23},{name:'第三类',value:45},{name:'第四类',value:34},{name:'第五类',value:14}];
接下来指定图表的配置项和数据,我们这里配置echarts的饼状图,具体配置项代码:
var option = {
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
toolbox:{
show:true,
feature : {
mark : {show: true},
magicType : {
show: true,
type: ['pie', 'funnel']
},
}
},
calculable: true,
series: [{
type: 'pie',
radius: '60%',
startAngle:'45',
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle:{
color: '#000000',
fontWeight:'bold',
fontSize:16
}
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
data:data
}]
};
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);
配置项里的具体参数大家可以参考我的博文echarts力导向图里的详细注释,这里就不多加解释了,大家根据自己的需要去调整图表显示吧。
结合
其实以上两个步骤相信有很多人已经非常熟练了,关键是如何将两个结合起来,这也是这篇博文的重点。
这里我们将图表作为openlayers里的Overlay叠加上去,这是一种比较传统的方式,实际上与html要素显示图片类似。
var pt = [103.980167,30.770697];
var pie = new ol.Overlay({
position: pt,
positioning: 'center-center',
element: document.getElementById('chart')
});
map.addOverlay(pie);
其中position是叠加的图表显示的坐标,positioning是将坐标与图表的对应方式,代码里的’center-center’是将其以中心点的方式将坐标与图标对应,其他的对应方式还有’bottom-left’, ‘bottom-center’, ‘bottom-right’, ‘center-left’, ‘center-center’, ‘center-right’, ‘top-left’, ‘top-center’, ‘top-right’。element是对应的html要素。
这样我们就将openlayers与echarts相结合起来了,无图无真相:
结尾(示例里没有)
多提一句吧,我们把echarts加到openlayers以后又需要删除,该怎么删除呢?
openlayers已经给我们提供好参数了,通过getOverlays()可以获取到map上的所有overlays 代码如下
map.getOverlays().clear();
转载自:https://blog.csdn.net/u010430471/article/details/60594208