openlayer加载热力图

效果：

 

代码：

<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="20">
        <el-form label-width="100px">
          <el-form-item label="冷热度">
            <el-slider v-model="option_heatmap.blur" show-input></el-slider>
          </el-form-item>
          <el-form-item label="半径">
            <el-slider v-model="option_heatmap.radius" show-input></el-slider>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-button @click="refreshData()">加载热力图</el-button>
      </el-col>
    </el-row>

    <div id="map" class="content"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import OSM from 'ol/source/OSM'
import XYZ from 'ol/source/XYZ'
import VectorSource from 'ol/source/Vector'
import GeoJSON from 'ol/format/GeoJSON'
import { Heatmap as HeatmapLayer, Tile as TileLayer } from 'ol/layer'

export default {
  data () {
    return {
      map: {},
      option_heatmap: {
        blur: 43,
        radius: 50
      },
      heatMapLayer: {},
      heatData: {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [112.4, 31.19] },
            properties: { weight: 0.9 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [113.3, 30.6] },
            properties: { weight: 0.19 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [123.3, 30.6] },
            properties: { weight: 0.419 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [105.3, 30.6] },
            properties: { weight: 0.319 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [106.3, 30.6] },
            properties: { weight: 0.719 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [109.3, 31.6] },
            properties: { weight: 0.519 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [109.3, 30.6] },
            properties: { weight: 0.319 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [108.3, 32.6] },
            properties: { weight: 0.139 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [118.3, 31.6] },
            properties: { weight: 0.129 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [108.3, 33.6] },
            properties: { weight: 0.19 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [108.3, 32.6] },
            properties: { weight: 0.189 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [100.3, 30.6] },
            properties: { weight: 0.1 }
          }
        ]
      },

      newHeatData: {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [112.4, 31.19] },
            properties: { weight: 0.9 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [113.3, 30.6] },
            properties: { weight: 0.19 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [123.3, 30.6] },
            properties: { weight: 0.419 }
          },
          {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [105.3, 30.6] },
            properties: { weight: 0.319 }
          }
        ]
      }
    }
  },
  components: {},
  created () {},
  mounted () {
    this.initMap()
  },
  computed: {},
  methods: {
    initMap () {
      this.map = new Map({
        target: 'map',
        layers: [
          new TileLayer(
            {
              source: new XYZ({
                url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
              })
            },
            { zoomOffset: 1 }
          )
        ],
        view: new View({
          projection: 'EPSG:4326', // 使用这个坐标系
          center: [104.704968, 31.540962], // 西南科技大学
          zoom: 5
        })
      })
    },
    addHeatMapLayer () {
      this.heatMapLayer = new HeatmapLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(this.heatData)
        }),
        blur: this.option_heatmap.blur,
        radius: this.option_heatmap.radius
      })
      this.map.addLayer(this.heatMapLayer)
    },
    refreshData () {
      this.heatData = this.newHeatData
      this.map.removeLayer(this.heatMapLayer)
      this.addHeatMapLayer()
    }
  },
  watch: {
    option_heatmap: {
      handler (newVal, oldVal) {
        this.heatMapLayer.setBlur(this.option_heatmap.blur)
        this.heatMapLayer.setRadius(this.option_heatmap.radius)
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  height: 100vh;
  border: 1px solid red;
  .content {
    width: 1400px;
    height: 600px;
    border: 1px solid blue;
    margin: auto;
  }
}
</style>