openlayers与echarts3的结合使用

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问，echarts是百度的开源js图表库，下面简单讲解下如何在openlayers的地图‘贴’上echarts的图表。

• 示例下载地址:http://download.csdn.net/detail/u010430471/9772205

---

开始

首先在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();