# openlayer 热力图显示

openlayer 热力图显示

相关库类

  import moment from 'moment'
  import Projection from 'ol/proj/Projection'
  import Static from 'ol/source/ImageStatic'
  import Map from 'ol/Map'
  import ImageLayer from 'ol/layer/Image'
  import View from 'ol/View'
  import VectorLyr from 'ol/layer/Vector'
  import VectorSource from 'ol/source/Vector'
  import { getCenter } from 'ol/extent'
  import Polygon from 'ol/geom/Polygon'
  import Feature from 'ol/Feature'
  import { Circle as CircleStyle, Style, Fill, Stroke } from 'ol/style'
  import Point from 'ol/geom/Point'
  import { Heatmap as HeatmapLayer } from "ol/layer";

javascript 代码

// 添加热力图
      addHeatMap(heatData) {
        let layer = this.getLayerInMap(this.map, 'heatMap')
        if (!layer) {
          layer = new HeatmapLayer({
            title: 'heatMap',
            source: new VectorSource(),
            blur: 3,
            radius: 1,
            gradient: ["#2200FF", "#E8D225", "#EF1616"]
          });
          this.map.addLayer(layer)
        } else {
          layer.getSource().clear();
        }
        heatData.forEach(item => {
          let f = new Feature({
            geometry: new Point([item.x, item.y])  // 添加点坐标
          });
          layer.getSource().addFeature(f);
        })
      },

设置半径大小

layer.setRadius(pixe)

设置颜色深度

layer.setBlur(50)

获取地图是否存在图层的函数。

// 根据图层title获取地图图层，如果有就返回图层，没有就返回null
getLayerInMap(map, name) {
   var layers = map.getLayers()   // 获取地图所有图层
   var layer = null
   layers.forEach((item, index) => {
       if (item.values_.title !== undefined) {
          if (item.values_.title === name) {
            layer = item
            return layer
          }
       }
    })
    return layer
}