openlayers与echarts3的结合使用

ゝ一纸荒年。 2022-05-10 07:48 505阅读 0赞

来源：[https://blog.csdn.net/u010430471/article/details/60594208][https_blog.csdn.net_u010430471_article_details_60594208]

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

*  **示例下载地址:[http://download.csdn.net/detail/u010430471/9772205][http_download.csdn.net_detail_u010430471_9772205]**

--------------------

## **开始** ##

首先在html界面上添加两个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的饼状图,具体配置项代码：

配置项里的具体参数大家可以参考我的博文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相结合起来了，无图无真相：  
![这里写图片描述][SouthEast]

## **结尾（示例里没有）** ##

多提一句吧，我们把echarts加到openlayers以后又需要删除，该怎么删除呢？

openlayers已经给我们提供好参数了，通过getOverlays()可以获取到map上的所有overlays 代码如下

map.getOverlays().clear();

\--------------------- 本文来自 续汉冕 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/u010430471/article/details/60594208?utm\_source=copy

[https_blog.csdn.net_u010430471_article_details_60594208]: https://blog.csdn.net/u010430471/article/details/60594208
[http_download.csdn.net_detail_u010430471_9772205]: http://download.csdn.net/detail/u010430471/9772205
[SouthEast]: /images/20220510/9591a47e72ea4eefaf3c92edfb18bde5.png