1. 引言

当页面加载的数据量过大时，拖拽、缩放时往往会产生卡顿

然而，页面实现的内容是有限的，人眼可见范围也是有限的，过于微小的部分是可以不予显示的

聚合是解决这种问题的一个办法，当数据比较多，单个又太小时，将多个数据合并为一个显示

OpenLayers提供了聚合的API，参考：

OpenLayers提供了聚合的示例，参考：

本文基于OpenLayers的Cluster API，实现点聚合效果

2. 环境准备

OpenLayers版本为最新版6.15.1，CDN引入：

<link rel="stylesheet"

      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css">

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>

数据来源自OpenLayers的聚合示例种的数据，地址为：

3. 点聚合

构建一个基础页面，加载底图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet"

        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css">

    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>

    <style>

        html,

        body {

            height: 100%;

        }

        body {

            margin: 0;

            padding: 0;

        }

        #map {

            height: 100%;

        }

    </style>

</head>

<body>

    <div id="map"></div>

    <script>

        const map = new ol.Map({

            target: 'map',

            layers: [],

            view: new ol.View({

                center: [16.35, 48.20],

                zoom: 12,

                projection: 'EPSG:4326'

            })

        })

        map.addLayer(new ol.layer.WebGLTile({

            source: new ol.source.OSM()

        }));

    </script>

</body>

</html>

加载JSON数据，创建聚合数据源：

const source = new ol.source.Vector({

    url: 'https://openlayers.org/en/latest/examples/data/geojson/photovoltaic.json',

    format: new ol.format.GeoJSON()

})

const clusterSource = new ol.source.Cluster({

    source: source,

})

const vectorLayer = new ol.layer.Vector({

    source: clusterSource,

})

map.addLayer(vectorLayer);

参考官方API文档：

默认的聚合范围为20

实现的效果：

添加聚合样式：

const vectorLayer = new ol.layer.Vector({

    source: clusterSource,

    // 聚合样式

    style: function (feature) {

        // 点的个数

        const size = feature.get('features').length

        return new ol.style.Style({

            image: new ol.style.Circle({ // 圆形

                radius: 15, // 半径

                stroke: new ol.style.Stroke({ // 边框

                    color: '#fff'

                }),

                fill: new ol.style.Fill({ // 填充

                    color: '#3399CC'

                })

            }),

            text: new ol.style.Text({ // 文字样式

                font: '15px sans-serif',

                text: size.toString(),

                fill: new ol.style.Fill({

                    color: '#fff'

                })

            })

        })

    }

})

实现效果：

4. 完整代码

完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet"

        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css">

    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>

    <style>

        html,

        body {

            height: 100%;

        }

        body {

            margin: 0;

            padding: 0;

        }

        #map {

            height: 100%;

        }

    </style>

</head>

<body>

    <div id="map"></div>

    <script>

        const map = new ol.Map({

            target: 'map',

            layers: [],

            view: new ol.View({

                center: [16.35, 48.20],

                zoom: 12,

                projection: 'EPSG:4326'

            })

        })

        // map.addLayer(new ol.layer.WebGLTile({

        //     source: new ol.source.OSM()

        // }));

        const source = new ol.source.Vector({

            url: 'https://openlayers.org/en/latest/examples/data/geojson/photovoltaic.json',

            format: new ol.format.GeoJSON()

        })

        const clusterSource = new ol.source.Cluster({

            source: source,

            distance: 40,

        })

        const vectorLayer = new ol.layer.Vector({

            source: clusterSource,

            // 聚合样式

            style: function (feature) {

                // 点的个数

                const size = feature.get('features').length

                return new ol.style.Style({

                    image: new ol.style.Circle({ // 圆形

                        radius: 15, // 半径

                        stroke: new ol.style.Stroke({ // 边框

                            color: '#fff'

                        }),

                        fill: new ol.style.Fill({ // 填充

                            color: '#3399CC'

                        })

                    }),

                    text: new ol.style.Text({ // 文字样式

                        font: '15px sans-serif',

                        text: size.toString(),

                        fill: new ol.style.Fill({

                            color: '#fff'

                        })

                    })

                })

            }

        })

        map.addLayer(vectorLayer);

    </script>

</body>

</html>

5. 参考资料

[1]Dynamic clusters (openlayers.org)

[2]OpenLayers v6.15.1 API - Class: Cluster

[3]openlayers学习——9、openlayers聚合效果Cluster_WangConvey的博客-CSDN博客_openlayers 聚合

[4]vue+OpenLayers项目实践（三）：Cluster设置集群 - 掘金 (juejin.cn)

OpenLayers点聚合的更多相关文章

  1. [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据

    在地图上显示点数据是最常用的地图展示功能之一,但是如果很多点在地图上显示,或造成密密麻麻的一片,无法正常看清楚,这个时候,一般有两种解决方案,一种是根据数据重要程度进行标注,重要的显示大一些,不重要的 ...

  2. openlayers 聚合效果

    //cyd var cydclusterSource = new ol.source.Cluster({ distance: 40, source: new ol.source.Vector({ fe ...

  3. postgreSQL使用sql归一化数据表的某列，以及出现“字段 ‘xxx’ 必须出现在 GROUP BY 子句中或者在聚合函数中”错误的可能原因之一

    前言: 归一化(区别于标准化)一般是指,把数据变换到(0,1)之间的小数.主要是为了方便数据处理,或者把有量纲表达式变成无量纲表达式,便于不同单位或量级的指标能够进行比较和加权. 不过还是有很多人使用 ...

  4. OpenLayers入门（一）

    OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的.功能丰富的JavaScript类库,可以满足几乎所有的地图开 ...

  5. 【翻译】MongoDB指南/聚合——聚合管道

    [原文地址]https://docs.mongodb.com/manual/ 聚合 聚合操作处理数据记录并返回计算后的结果.聚合操作将多个文档分组,并能对已分组的数据执行一系列操作而返回单一结果.Mo ...

  6. TYPESDK手游聚合SDK服务端设计思路与架构之二：服务端设计

    在前一篇文中,我们对一个聚合SDK服务端所需要实现的功能作了简单的分析.通过两个主要场景的功能流程图,我们可以看到,作为多款游戏要适配多个渠道的统一请求转发中心,TYPESDK服务端主要需要实现的功能 ...

  7. TYPESDK手游聚合SDK服务端设计思路与架构之一：应用场景分析

    TYPESDK 服务端设计思路与架构之一:应用场景分析 作为一个渠道SDK统一接入框架,TYPESDK从一开始,所面对的需求场景就是多款游戏,通过一个统一的SDK服务端,能够同时接入几十个甚至几百个各 ...

  8. arcgis api for js入门开发系列八聚合效果(含源代码)

    上一篇实现了demo的图层控制模块,本篇新增聚合效果,截图如下(源代码见文章底部): 聚合效果实现的思路如下: 1.map.html引用聚合包,项目已经包含进来了的聚合文件夹: <script ...

  9. Oracle 列数据聚合方法汇总

    网上流传众多列数据聚合方法,现将各方法整理汇总,以做备忘. wm_concat 该方法来自wmsys下的wm_concat函数,属于Oracle内部函数,返回值类型varchar2,最大字符数4000 ...

  10. 关于领域驱动设计（DDD）中聚合设计的一些思考

    关于DDD的理论知识总结,可参考这篇文章. DDD社区官网上一篇关于聚合设计的几个原则的简单讨论: 文章地址:http://dddcommunity.org/library/vernon_2011/, ...

随机推荐

  1. 【每日一题】【回溯backtrace】N皇后

    n 皇后问题 研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 给你一个整数 n ,返回所有不同的 n 皇后问题 的解决方案. 每一种解法包含一个不同的 n 皇后问 ...

  2. 【Spark】Day05-内核解析：组件、流程、部署、运行模式、通讯架构、任务调度（Stage、task级）、两种Shuffle机制、内存管理、核心组件

    一.内核概述 内核:核心组件的运行机制.任务调度.内存管理.运行原理 1.核心组件 (1)Driver驱动器节点:执行main方法,将程序转化为作业job,在executor中调度任务task,跟踪并 ...

  3. go-carbon 1.5.3 版本发布， 修复已知 bug 和新增俄罗斯语翻译文件

    carbon 是一个轻量级.语义化.对开发者友好的golang时间处理库,支持链式调用. 目前已被 awesome-go 收录,如果您觉得不错,请给个star吧 github.com/golang-m ...

  4. L1-050 倒数第N个字符串 (15分)

    L1-050 倒数第N个字符串 (15分) 给定一个完全由小写英文字母组成的字符串等差递增序列,该序列中的每个字符串的长度固定为 L,从 L 个 a 开始,以 1 为步长递增.例如当 L 为 3 时, ...

  5. 【JVM实战系列】「监控调优体系」实战开发arthas-spring-boot-starter监控你的微服务是否健康

    前提介绍 相信如果经历了我的上一篇Arthas的文章[[JVM实战系列]「监控调优体系」针对于Alibaba-Arthas的安装入门及基础使用开发实战指南]之后,相信你对Arthas的功能和使用应该有 ...

  6. Spring IOC官方文档学习笔记（一）之IOC容器概述

    1.IOC容器简介 (1) org.springframework.beans 与 org.springframework.context 这两个包是Spring IOC容器的基础,在org.spri ...

  7. [WPF]xml序列化以及反序列化数据

    代码 XML序列化工具类 public static class XMLHelper { /// <summary> /// 将对象序列化为指定的文件名 /// </summary& ...

  8. 【AI编译器原理】系列来啦！我们要从入门到放弃！

    随着深度学习的应用场景的不断泛化,深度学习计算任务也需要部署在不同的计算设备和硬件架构上:同时,实际部署或训练场景对性能往往也有着更为激进的要求,例如针对硬件特点定制计算代码. 这些需求在通用的AI框 ...

  9. Mac上优秀的虚拟机软件推荐 PD Parallels Desktop 18.1.1

    APPERK 软件信息 软件名称 ParallelsDesktop 版本号 18.1.1 软件类型 官网版 + 商业版 安装包大小 390MB 语言 中文 系统支持 macOS11及以上(M芯片原生) ...

  10. 反馈电路的Bode分析法

    1 前言 在反馈电路的分析中,如果前向放大倍数为Aopen,反馈系数为β,则闭环传递函数Aclose=Aopen/(1+Aopenβ),其中Aopenβ为环路增益.但是,在Aopen和β的计算中均要考 ...