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();