vue项目中在openlayers地图上展示echarts图表_echarts在openlayers上显示

思路：

1、创建一个地图组件mapView，使用openlayers进行地图展示
2、创建一个图表组件chart，用于呈现图表
3、创建一个overlay组件，在模板中使用chart组件；利用openlayers的ol.Overlay类来把overlay组件添加到地图上。

示例代码

1、数据

以这次新冠病毒数据为例，这里是今年2月份全国新增新冠肺炎患者的数据（数据源来自百度），分为全国的新增数量和湖北省内的新增数量。

ncovData.js

const ncovData = {
  add: {
    startDate: '2.1',
    endDate: '2.29',
    quanguoTotal: [2590, 2829, 3235, 3887, 3694, 3151, 3399, 2653, 3073, 2484, 2022, 15153, 5093, 2644, 2009, 2051, 1891, 1751, 825, 892, 399, 649, 416, 517, 411, 440, 329, 430, 579],
    hubeiTotal: [1921, 2103, 2345, 3156, 2987, 2447, 2841, 2147, 2618, 2097, 1638, 14840, 4823, 2420, 1843, 1933, 1807, 1693, 775, 631, 366, 630, 398, 499, 401, 409, 318, 423, 570]
  }
}

export default ncovData

1
2
3
4
5
6
7
8
9
10
11

2、图表组件

在图表组件中，以折线图的形式来展示数据。
chart.vue

<template>
  <div>
    <div ref="chart" class="overlay-chart"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data () {
    return {
    }
  },
  props: ['source'],
  mounted () {
    this.chart = echarts.init(this.$refs['chart'])
    if (this.source) {
      this.drawChart(this.source)
    }
  },
  methods: {
    drawChart (data) {
      let dateLine = Array.apply(null, { length: 29 }).map((item, index) => {
        return '2.' + (index + 1).toString()
      })

      let option = {
        title: {
          text: '全国/湖北疫情趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['全国新增', '湖北新增']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateLine
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '全国新增',
            type: 'line',
            data: data.addTotal
          },
          {
            name: '湖北新增',
            type: 'line',
            data: data.hubeiAddTotal
          }
        ]
      }

      this.chart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
  .overlay-chart{
    width: 100%;
    height: 100%;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

3、overlay组件

overlayChart .vue

<template>
  <div v-if="visible" class="overlay-container">
    <div class="overlay-header">
      <span>{{name}}</span>
    </div>
    <div>
      <chart class="chart-container" v-if="overlay" :source="chartData"></chart>
    </div>
  </div>
</template>
<script>
import Overlay from 'ol/Overlay'
import chart from './chart'
export default {
  data () {
    return {
      visible: false,
      name: '疫情趋势',
      overlay: undefined
    }
  },
  components: {chart},
  methods: {
    show () {
      let overlay = new Overlay({
        element: this.$mount().$el,
        stopEvent: false, // 设为false,允许事件传播
        autoPanAnimation: {
          duration: 250
        },
        // offset: [20,0],
        position: this.position,
        positioning: 'center-left',
        className: 'point-overlay'
      })
      this.map.addOverlay(overlay)
      this.overlay = overlay
      this.visible = true
    },
    close () {
      this.visible = false
    }
  }
}
</script>
<style lang="less">
  .overlay-container{
    width: 480px;
    min-height: 320px;
    background-color: #f5f5f5;
    .overlay-header{
      height: 20px;
      position: relative;
      background-color: #171819;
      color: #cec3ce;
      text-align: center;
      .name{
        font-size: 16px;
				font-weight: bold;
				line-height: 1.2;
        width: 95%;
      }
    }
    .chart-container{
      height: 360px;
      width: 100%;
    }
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

这个组件中，我们引入了上面的chart组件，并向其中传递数据。另外，在show方法中，创建了一个ol.Overlay实例，把它添加到map地图对象上。

4、地图组件

mapView.vue

<template>
  <div id="map">
  </div>
</template>
<script>
import Vue from 'vue'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import overlayChart from './overlayChart'
import ncovData from './ncovData'

const OverlayChart = Vue.extend(overlayChart)

export default {
  data () {
    return {
      map: undefined,
      overlayChartObj: undefined,
      data: {

      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    /**
     * 地图初始化
     */
    init () {
      let baseLayer = new TileLayer({
        source: new XYZ({
          url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
        })
      })
      this.map = new Map({
        target: 'map',
        layers: [baseLayer],
        view: new View({
          projection: 'EPSG:4326',
          zoom: 5,
          center: [114, 32]
        })
      })

      console.log(ncovData)
      this.map.on('click', (evt) => {
        let data = ncovData.add
        this.showOverlayChart(evt.coordinate, data)
      })
    },

    /**
     * 显示图表
     */
    showOverlayChart (position, data) {
      if (this.overlayChartObj) {
        this.overlayChartObj.close()
        this.overlayChartObj = null
      }

      this.overlayChartObj = this.createOverlay({
        position,
        data
      })
      this.overlayChartObj.show()
    },

    /**
     * 创建一个overlay组件实例
     */
    createOverlay (params) {
      let obj = new OverlayChart({
        data: {
          map: this.map,
          position: params.position,
          chartData: params.data
        }
      })

      return obj
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

在这个mapview组件中，以vue.extend方式引入了overlayChart组件,然后再在必要的时候，new出一个overlayChart的实例，通过overlayChart的show方法来呈现想要的图表。
这里，当我在地图上任意位置点击时，即弹出图表。

参数传递

从mapView -> overlayChart, 通过在new对象时传入data参数，数据包装在data内，不要再overlayChart中使用props
从overlayChart -> chart，props方式传递。

最终效果