vue-cdutDigitalMap/static/js/clusterDisplay.js

// import * as ol from 'ol'
import ol from './ol'

class createCluster {
  constructor (option, map) {
    this.layer = null
    this.flag = false // 用于判断是否有目标图层
    let layer = map.getLayers()
    this.map = map

    this.imgUrl = option.imgUrl
    this.layerName = option.layerName // 传入聚合的目标图层的名字
    this.distance = option.distance || 10

    for (let i = 0; i < layer.array_.length; i++) {
      if (layer.array_[i].className_ === this.layerName) {
        this.flag = true
        this.layer = layer.array_[i]
      }
    }
  }

  openCluster () {
    if (this.flag) {
      let scale = 0.13
      let features = this.layer.getSource().getFeatures()
      var source = new ol.source.Vector({
        features: features
      })
      var clusterSource = new ol.source.Cluster({
        distance: this.distance,
        source: source
      })
      let style = new ol.style.Style({
        image: new ol.style.Icon({
          src: this.imgUrl,
          anchor: [0.5, 0.5],
          scale: scale
        })
      })
      this.layer.setSource(clusterSource)
      this.layer.setStyle(style)
    }
  }
}

function openNoticeLayerCluster (noticeImgUrl, map) {
  let cluster = new createCluster ({
    'layerName': 'noticeLayer',
    'imgUrl': noticeImgUrl
  }, map)
  cluster.openCluster()
}

function openReportLayerCluster (reportImgUrl, map) {
  let cluster = new createCluster ({
    'layerName': 'reportLayer',
    'imgUrl': reportImgUrl
  }, map)
  cluster.openCluster()

}

function openCultureLayerCluster (cultureImgUrl, map) {
  let cluster = new createCluster({
    'layerName': 'cultureLayer',
    'imgUrl': cultureImgUrl
  }, map)
  cluster.openCluster()
}

function openOtherLayerCluster (otherImgUrl, map) {
  let cluster = new createCluster ({
    'layerName': 'otherLayer',
    'imgUrl': otherImgUrl
  }, map)
  cluster.openCluster()
}

export default {openNoticeLayerCluster, openReportLayerCluster, openCultureLayerCluster, openOtherLayerCluster}