【openlayers结合echarts图表和地图】VUE2 demo直接运行

<template>
  <div ref="mapContainer" class="map-content" />
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import GeoJSON from 'ol/format/GeoJSON'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import EChartsLayer from 'ol-echarts'

import Style from 'ol/style/Style'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'

export default {
  mounted() {
    // 创建天地图瓦片图层
    const tileLayer = new TileLayer({
      source: new XYZ({
        url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的token'
      })
    })
    // 创建 GeoJSON 图层作为底图
    const vectorLayer = new VectorLayer({
      source: new VectorSource({
        url: '/static/map/china.json',
        format: new GeoJSON()
      }),
      style: function(feature) {
        return [
          new Style({
            fill: new Fill({
              color: 'rgb(255,255,255,0)' // 设置背景颜色
            }),
            stroke: new Stroke({
              color: '#5a8589', // 设置边框颜色
              width: 0.5
            })
          })
        ]
      }
    })
    // 添加注记
    const sourceCVA = new XYZ({
      url: 'http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的token',
      crossOrigin: 'Anonymous',
      wrapX: false
    })
    const placeNameLayer = new TileLayer({
      source: sourceCVA
    })
    // 创建地图并设置图层
    this.map = new Map({
      target: this.$refs.mapContainer,
      layers: [tileLayer, vectorLayer, placeNameLayer],
      view: new View({
        center: [113.53450137499999, 34.44104525],
        projection: 'EPSG:4326',
        zoom: 5
      })
    })

    // 创建 ECharts 图层并添加到地图上
    const echartslayer = new EChartsLayer(this.createEChartsOption(), {
      hideOnMoving: false,
      hideOnZooming: false,
      forcedPrecomposeRerender: true
    })
    echartslayer.appendTo(this.map)
  },
  methods: {
    createEChartsOption() {
      return {
        title: {
          text: 'ECharts 在 OpenLayers 中的散点地图示例'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // 设置图例的属性
          data: ['散点']
        },
        visualMap: {
          type: 'piecewise',
          splitNumber: 6, // 分段数量
          pieces: [
            { min: 0, max: 5, label: '0-5' },
            { min: 5, max: 10, label: '5-10' },
            { min: 10, max: 15, label: '10-15' },
            { min: 15, max: 20, label: '15-20' },
            { min: 20, max: 25, label: '20-25' },
            { min: 25, max: 30, label: '25-30' }
          ],
          calculable: true,
          inRange: {
            color: [
              '#FF0000',
              '#FF4500',
              '#FFA500',
              '#FFFF00',
              '#ADFF2F',
              '#32CD32'
            ] // 设置颜色范围
          }
        },
        series: [
          {
            name: '散点',
            type: 'scatter',
            symbolSize: 10, // 散点大小
            data: this.generateRandomData(30), // 生成30个随机数据点
            itemStyle: {
              emphasis: {
                borderColor: '#333',
                borderWidth: 1
              }
            }
          }
        ]
      }
    },
    generateRandomData(count) {
      const data = []
      for (let i = 0; i < count; i++) {
        data.push([
          113 + Math.random() * 2, // 随机经度
          34 + Math.random() * 2, // 随机纬度
          Math.floor(Math.random() * 31) // 随机数值，0到30之间
        ])
      }
      return data
    }
  }
}
</script>

<style scoped>
.map-content {
  width: 100%;
  height: 400px;
}
</style>