ol-simple-map/src/heat.js

openlayers 的集成开发

import GeoJSON from 'ol/format/GeoJSON'
import { Heatmap } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'

export default class Heat {
  
  /**
   * @description 创建热力图层的对象
   * 
   * @param {Object} options 参数
   * @param {import('ol/Map').default} 地图实例
   * @param {String} name 热力图层的名字
   * @param {Number} options.blur 模糊尺寸
   * @param {Number} options.radius 热点半径
   * 
   */
  constructor (options) {
    // 保存全部参数
    this._opitons = options

    this._layer = null

    this._source = null

    this._feature = []

    this._init()
  }

  _init () {
    // 创建热力源
    this._source = new VectorSource({ wrapX: false })

    // 创建热力图层
    this._layer = new Heatmap({
      source: this._source,
      blur: this._opitons.blur || 20,
      radius: this._opitons.radius || 20
    })

    this._layer.set('name', this._opitons.name || 'heatLayer')
  }

  // 添加 Layer 图层
  _addFeature () {
    this._source.addFeatures(this._feature)

    this._opitons.map.addLayer(this._layer)
  }

  /**
   * @typedef heatInfo
   * @property {Number[]} point 热力中心点
   * @property {Number} count 数量  
   */
  /**
   * 
   * @param {Array<heatInfo>} options 
   */
  createHeat (options) {
    const array = options.map(item => ({
      type: 'Point',
      coordinates: item.point,
      count: item.count
    }))

    this._feature = (new GeoJSON()).readFeatures({type: 'FeatureCollection', features: array}, {dataProjection: 'EPSG:4326', featureProjection: 'EPSG:4326'})

    this._addFeature()
  }
}