基於Vue2.0實現OpenLayers MarkerCluster海量聚合點標記

import { Vector as SourceVec,Cluster } from 'ol/source'
import { Feature } from 'ol'
import { Point } from 'ol/geom'
import { Style,Icon,Stroke,Fill,Text,Circle } from 'ol/style'
import { Vector as LayerVec } from 'ol/layer'


export default {
mounted(){
 this.massiveFature()
 }
methods: {
    massiveFature(){
      // 坐標
      var lnglats = [
        [116.963,36.623],
        [116.980,36.620],
        [116.999,36.640],
        [117.029,36.639],
        [117.055,36.643],
        [117.168,36.659]
      ]
      // 創建Feature對象集合
      var features  = new Array()
      for(var i = 0; i < lnglats.length; i++){
        features.push(new Feature({
          geometry: new Point(lnglats[i])
        }))
      }
      // 矢量要素數據源
      var source = new SourceVec({
        features:features
      })
      // 聚合標注數據源
      var clusterSource = new Cluster({
        distance:40,
        source: source
      })
      // 加載聚合標注的矢量圖層
      var styleCache = {};                    //用於保存特定數量的聚合群的要素樣式
        var clusters = new LayerVec({
            source: clusterSource,
            style: function (feature, resolution){
                var size = feature.get('features').length;          //獲取該要素所在聚合群的要素數量
                var style = styleCache[size];
                console.log(size);
                if(!style){
                    style = [
                        new Style({
                            image: new Circle({
                                radius: 10,
                                stroke: new Stroke({
                                    color: '#fff'
                                }),
                                fill: new Fill({
                                    color: '#3399CC'
                                })
                            }),
                            text: new Text({
                                text: size.toString(),
                                fill: new Fill({
                                    color: '#fff'
                                })
                            })
                        })
                    ];
                    styleCache[size] = style;
                }
                return style;
            }
        });
        // 
        this.$refs.emap.map.addLayer(clusters);
    }
 }
}