参考资料：
openlayers官网： https://openlayers.org/
geojson下载网站： https://datav.aliyun.com/portal/school/atlas/area_selector
地图坐标拾取网站： https://api.map.baidu.com/lbsapi/getpoint/index.html

openlayers核心：Map对象、View视图、Layer图层、Source来源、Feature特征等

需要引入和包

// 这里就不一点点删了，按需引入即可
import GeoJSON from 'ol/format/GeoJSON'
import Feature from 'ol/Feature'
import { Point, Circle as CircleGeo } from 'ol/geom'
import VectorSource from 'ol/source/Vector'
import Cluster from 'ol/source/Cluster'
import TileArcGISRest from 'ol/source/TileArcGISRest'
// 自己下载的GEOJSON
import Chzu from '@/assets/geojson/Chzu.json'
import { Fill, Stroke, Style, Icon, Circle, Text } from 'ol/style'
import { Vector as VectorLayer, Tile } from 'ol/layer'
import { Draw } from 'ol/interaction'
import { boundingExtent, getCenter } from 'ol/extent'
import Overlay from 'ol/Overlay'
// 添加聚合
addCluster () {
  this.removeCluster()
  // 创建几个聚合效果所在的点
  const features = [new Feature(new Point([118.389426, 32.350872])), new Feature(new Point([118.201428, 32.274216])), new Feature(new Point([118.339408, 32.261271])), new Feature(new Point([118.673066, 32.132925]))]
  const source = new VectorSource({
    features: features
  // Cluster聚合类
  const clusterSource = new Cluster({
    // distance: 20, // 聚合点与点之间的距离
    minDistance: 15, // 聚合点与点之间的最小距离
    source: source
  // 聚合图层
  this.clustersLayer = new VectorLayer({
    source: clusterSource,
    // 聚合样式
    style: function (feature) {
      // 点的个数
      const size = feature.get('features').length
      return new Style({
        image: new Circle({ // 圆形
          radius: 15, // 半径
          stroke: new Stroke({ // 边框
            color: '#fff'
          }),
          fill: new Fill({ // 填充
            color: '#3399CC'
        }),
        text: new Text({ // 文字样式
          font: '15px sans-serif',
          text: size.toString(),
          fill: new Fill({
            color: '#fff'
  this.map.addLayer(this.clustersLayer)
  // 地图添加点击事件
  this.map.on('click', this.clusterClickHandle)
// 清除聚合
removeCluster () {
  if (this.clustersLayer) {
    this.map.removeLayer(this.clustersLayer)
    this.clustersLayer = null
  // 解除点击事件
  this.map.un('click', this.clusterClickHandle)
// 聚合点击效果处理函数
clusterClickHandle (e) {
  this.clustersLayer.getFeatures(e.pixel).then((clickedFeatures) => {
    if (clickedFeatures.length) {
      const features = clickedFeatures[0].get('features')
      // 点的个数大于1才有效果
      if (features.length > 1) {
        const extent = boundingExtent(
          features.map((r) => r.getGeometry().getCoordinates())
        let [width, height] = this.map.getSize()
        width = Math.ceil(width)
        height = Math.ceil(height / 5)
        // 定位到点击位置
        this.map.getView().fit(extent, {duration: 500, padding: [height, width, height, width + 500]})
                                    OL3-AnimatedCluster
[已弃用] OL3-AnimatedCluster现在已成为项目的一部分，并且现在可在NPM上使用。
 用于 （ol3 / ol4）的群集层，可在缩放更改时对群集进行动画处理，并具有选择交互作用，该交互作用将群集展开，以允许在其中进行功能选择。
 如果您喜欢这个，可能会喜欢 。
它如何运行？
 ol.layer.AnimatedCluster是一个在缩放更改时对群集进行动画处理的图层。 使用ol.source.Cluster作为标准群集矢量层创建该层。
 ol.interaction.SelectCluster是处理集群的选择交互。 在选定的簇上会弹开以显示特征。 显示的功能本身是可选的。 揭密特征与属性的集群features包含原始功能，因此它们可以用作集群。
在页面中包括以下文件：
 < script type =" te
                                    文章目录1. 写在前面2. Cluster 参数2. Cluster类实现聚合分散3. 完整代码
1. 写在前面
前面两篇文章 我们讲了矢量图层 VectorLayer的常用的场景
openlayers6【十七】vue VectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解
openlayers6【十八】vue VectorLayer矢量图层实现批量图标点位上图功能详解
这篇我们继续写一篇 VectorLayer矢量图层 的使用，足见矢量图层在openlayers中的应用是很广泛的也是
                                    在实例化VectorLayer时加一个style配置，函数里会返回每一个feature，每一个feature上都有一个features属性，记录着它的下级features数组，聚合的原理就是把几个相邻的点通过计算合成一个feature，我猜features里面记录的就是合成这个feature所用的数组。这是因为聚合里面，图层上的feature本来就是根据缩放层级变化的，定位过程中刚刚点击的那个feature已经不见了。注册地图点击事件，点击每一个feature就会把地图视角定位到点击的feature处。
<div id="map"></div>
<div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-title" class="popup-title"&gt.
                                    OpenLayers 中聚合是通过 `ol.source.Cluster` 实现，聚合的原理是将距离比较近的点位合并为一个点，并计算合并后点位的属性值。
在聚合源 `ol.source.Cluster` 中，当一个点被添加进来时，会检查该点与已有聚合点的距离是否在指定的聚合距离之内，如果是，则将该点加入到该聚合点中，同时更新聚合点的属性值（例如点数等）。如果该点与已有聚合点的距离都超出聚合距离，则将该点作为新的聚合点，加入到聚合源中。
在渲染时，对于聚合后的点，可以根据聚合点的属性值设置不同的样式，以区
                                    文章目录1. 聚合标注是什么，为什么需要聚合标注2. 实现效果3. 核心代码4. 完整代码
1. 聚合标注是什么，为什么需要聚合标注
聚合标注，是指在不同地图分辨率下，通过聚合方式展现标注点的一种方法。
其设计目的是为了减少当前视图下加载标注点的数量，提升客户端渲染速度。因为如果在地图上添加很多标注点，当地图缩放到小级别（即大分辨率）时会出现标注重叠的现象，既不美观，渲染效率也会受到影响。此时，可以根据地图缩放级数（zoom）的大小，将当前视图的标注点进行聚合显示。
OpenLayers也考虑到加载大数据量
                                    聚合显示的关键在，ol.source.Cluster,这是聚合标注图层，需要先实例化该类在添加图文标注的基础上，添加一个中间数据源，即聚合标注类，添加图文标注中，是先创建矢量标注数据源（vectorSource）,然后创建矢量标注图层（vectorLayer），最后将矢量标注数据源添加到矢量标注图层，也可以在创建矢量标注图层时制定source属性为矢量标注数据源，具体请看 添加图文标注 章节。总的来说就是。
                                    Openlayers记录（一）实现聚合标记，点击弹出信息。效果展示点击聚合的标记点击非聚合标记实现代码如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
效果展示
在很多情况下，点要素图层中的要素数量可能会成百上千，这时候如果不做任何处理直接加载到地图上不仅会使用户视觉体验下降，而且也会造成地图界面的卡顿。下面这段代码创建了1000个随机点进行显示：
<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8"
                                    公司项目中存在一个业务场景，在地图上显示多种图标，但是由于坐标太多就不能使用简单的打点的做法，就希望使用聚合打点效果，首先我们想到是写一个方法有几种图标就执行几次，将图标名称设置为变量就可以达到地图上显示多种图标的效果，但是随后我们发现清除或者隐藏就变成了一个问题。我们将所有需要展示的图标的图层放在同于层级上面，用zIndex当中判断条件，我们遍历出对应的图层就可以设置隐藏或者移除啦。但实际情况是当图层名称一致时候他只会清除最底层的那个图层，并没达到完全隐藏或者移除图层的效果。这个时候事情就很简单了。
本文介绍如何绘制聚合标注。在开发中往往需要我们绘制大量的标注点，当地图层级缩放到最大时就需要加载全部的点。看上去比较密集不能直接知道大概位置有多少数据。为了解决这一问题OpenLayers提供了ol.source.Cluster
ol.source.Cluster
它是对矢量数据进行聚类的图层源。没错它不是图层，只是矢量图层的数据源。
使用方式就是实例化Cluster，作为要素加入矢量图层中。
ol.source.Cluster({ 
    distance: 10, // 标注元素之间的间距，