openlayers 根据缩放层级给点要素添加聚合

项目中出现的features数量多了。会显示的有些混乱。在地图中添加聚合效果，来解决这个问题。

最终解决效果

由于图片5M限制，录制太难了，时间达到3s以上就超标了。帧数调低了。

我的最终要求是缩放级别大于7 显示点要素，小于则显示聚合要素，在百度上参考别人的例子，发现没什么人有这个需求，于是就从zoom 下手。来达到切换效果。

	 mounted() {
		 const { findLayer, wfsVectorSource } = this;
		 map.on("moveend", e => {
		      const zoom = map.getView().getZoom();  //获取当前地图的缩放级别
		      if (zoom >= 7) {
		        findLayer('id', 'cluster').setSource(wfsVectorSource);
		      } else {
		        const layer = new ol.source.Cluster({distance: 40, source: wfsVectorSource});
		        findLayer('id', 'cluster').setSource(layer);
		      }
		    });
		 },
	 methods: {
		findLayer(attr, val) {
	      const layers = map.getLayers().getArray();
	      return layers.find(i => i.get(attr) === val);
	    },
	 },
	 computed: {
	 	wfsVectorSource() {
	      return new ol.source.Vector({
	        format: new ol.format.GeoJSON(),
	        projection: EPSG4326,
	        url: extent => window.base_url.wfs_base_source_url,
	        strategy: ol.loadingstrategy.bbox
	      });
	    },
	    styleFunc() {
	      return feature => {
	        var size = feature.get("features") ? feature.get("features").length : Number;
	        var type = feature.get("使用状态");
	        var label = feature.get("装备名称");
	        var font = new ol.style.Text({
	            font: '12px Calibri,sans-serif',
	            text: label, 
	            fill: new ol.style.Fill({ color: 'white' }),
	            offsetY: -15,
	            stroke: new ol.style.Stroke({ color: 'red', width: 2 }),
	          });
	        return new ol.style.Style({
	          image: new ol.style.Icon({
	              anchor: [0.5, 10],
	              anchorXUnits: 'fraction',
	              anchorYUnits: 'pixels',
	              scale: 1,
	              src: require('@/assets/img/img/marking.png')
	            }),
	            stroke: new ol.style.Stroke({ color: "white", width: 1 }), 
	          // text: feature.get("features") ? new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: "#fff" }) }) : font
	          // image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: "#3885ff", opacity: 1 }) }),
	          // stroke: new ol.style.Stroke({ color: "white", width: 1 }), 
	          text: feature.get("features") ? new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: "#fff" }) }) : ''//font
	        });
	      };
	    },
	 }