vue+openlayer+echarts 在地图点位上添加柱状图

**

vue+openlayer+echarts 给地图点位添加柱状图

**

重点在方法addColumnChart()里，三步实现

在网上百度了很多相关文章，最终都无疾而终，只能硬着头皮自己摸索，好在功夫不负有心人，最终还是实现了在地图上，鼠标放上点位，显示对应的柱状图信息
鼠标放到点位上，会在左上角显示柱状图的数据，位置可调整

HTML

<div id="map" ref="mapRef"></div>  地图容器
<div id="chart" ref="chart"></div>  监测点的柱状图容器（  写完这篇博文之后发现了一个小问题，<div id="chart" ref="chart"></div>该div会在页面上占位置，会出现在地图容器下方，页面会有滚动条，解决办法就是给该div加一个display：none就OK了，并不会影响柱状图的定位和显示）

JS
1、引入地图跟echarts

import Map from 'ol/Map';
import Overlay from 'ol/Overlay';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { Vector as VectorS, XYZ, ImageArcGISRest, TileArcGISRest } from 'ol/source';
import { Tile as TileLayer, Image as ImageLayer, Vector as VectorLayer } from 'ol/layer';
import { Style, Icon } from 'ol/style';
import { fromLonLat} from 'ol/proj';
import { toLonLat, proj } from 'ol/proj.js';
import { CENTER_CENTER } from 'ol/OverlayPositioning';
import { Sphere } from 'ol/sphere.js';
import 'ol/ol.css';

var echarts = require("echarts");

2、data
如果一个点位的柱状图上要显示多条数据，在dataColumn里的value中添加其他数据，修改echarts的相关配置即可

dataColumn:[
{
name: ['监测点1'],
x: 109.302221,
y: 27.787397,
value: [3]
},
{
name: ['监测点2'],
x: 109.069956,
y: 27.757735,
value: [8]
}, {
name: ['监测点3'],
x: 109.162517,
y:27.671774,
value: [5]
},
],

3、照openlayer官网，实现点位根据坐标定位到地图上去
4、mounted

this.chart = this.$refs.chart;
this.addColumnChart()

5、methods

guid () {  //为了生成不一样的id，实现每个装柱状图的盒子的唯一性
var d = new Date().getTime();
var guid = 'xxxx-xxxx-xxxx-xxxx'.replace(
/[xy]/g,
function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
});
return guid;
},

addColumnChart() {   //向点位添加柱状图的方法
let _this=this;
var html='';
for (var i = 0; i < _this.dataColumn.length; i++) {
//1、循环每一条数据，生成id不同的div，
//2、获取到该div，将柱状图添加上去，
//3、 new Overlay，将每个柱状图添加到对应的点位上去
var d = _this.dataColumn[i];
var pt = fromLonLat([d.x, d.y]);
var domid = "chart"+ _this.guid();    //生成不同的id
html+="<div id='"+domid+"' style='width: 35px;height: 100px;
margin-left: -18px;margin-bottom: -22px;'></div>"
_this.chart.innerHTML=html;    //_this.chart为HTML里的柱状图容器，
// 创建树状图
var option = {};
var myChart = echarts.init(document.getElementById(domid));

option = {
color: ['#c23531',],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
name: '监测点名称',
data: d.name,
show:false
},
yAxis: {
max:'10',
name: '浓度单位（mg/kg）',
show:false
},
series: [{
name: '汞浓度(mg/kg)',
type: 'bar',
data: d.value
}]
};
myChart.setOption(option);
//将柱状图添加到指定点位上去
var chart = new Overlay({
id: domid,
positioning: "bottom-center",
element: document.getElementById(domid),
offset: [0, 5],
stopEvent: false  //overlay也支持滚珠放大缩小
});
_this.map.addOverlay(chart);
//_this.map是在mounted里new Map出来的，按openlayer官网操作即可，
chart.setPosition(pt);
}

},