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//聚合的距离默认30个像素

        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}