OpenLayers点聚合
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点聚合的更多相关文章
- [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据
在地图上显示点数据是最常用的地图展示功能之一,但是如果很多点在地图上显示,或造成密密麻麻的一片,无法正常看清楚,这个时候,一般有两种解决方案,一种是根据数据重要程度进行标注,重要的显示大一些,不重要的 ...
- openlayers 聚合效果
//cyd var cydclusterSource = new ol.source.Cluster({ distance: 40, source: new ol.source.Vector({ fe ...
- postgreSQL使用sql归一化数据表的某列，以及出现“字段 ‘xxx’ 必须出现在 GROUP BY 子句中或者在聚合函数中”错误的可能原因之一
前言: 归一化(区别于标准化)一般是指,把数据变换到(0,1)之间的小数.主要是为了方便数据处理,或者把有量纲表达式变成无量纲表达式,便于不同单位或量级的指标能够进行比较和加权. 不过还是有很多人使用 ...
- OpenLayers入门（一）
OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的.功能丰富的JavaScript类库,可以满足几乎所有的地图开 ...
- 【翻译】MongoDB指南/聚合——聚合管道
[原文地址]https://docs.mongodb.com/manual/ 聚合 聚合操作处理数据记录并返回计算后的结果.聚合操作将多个文档分组,并能对已分组的数据执行一系列操作而返回单一结果.Mo ...
- TYPESDK手游聚合SDK服务端设计思路与架构之二：服务端设计
在前一篇文中,我们对一个聚合SDK服务端所需要实现的功能作了简单的分析.通过两个主要场景的功能流程图,我们可以看到,作为多款游戏要适配多个渠道的统一请求转发中心,TYPESDK服务端主要需要实现的功能 ...
- TYPESDK手游聚合SDK服务端设计思路与架构之一：应用场景分析
TYPESDK 服务端设计思路与架构之一:应用场景分析 作为一个渠道SDK统一接入框架,TYPESDK从一开始,所面对的需求场景就是多款游戏,通过一个统一的SDK服务端,能够同时接入几十个甚至几百个各 ...
- arcgis api for js入门开发系列八聚合效果(含源代码)
上一篇实现了demo的图层控制模块,本篇新增聚合效果,截图如下(源代码见文章底部): 聚合效果实现的思路如下: 1.map.html引用聚合包,项目已经包含进来了的聚合文件夹: <script ...
- Oracle 列数据聚合方法汇总
网上流传众多列数据聚合方法,现将各方法整理汇总,以做备忘. wm_concat 该方法来自wmsys下的wm_concat函数,属于Oracle内部函数,返回值类型varchar2,最大字符数4000 ...
- 关于领域驱动设计（DDD）中聚合设计的一些思考
关于DDD的理论知识总结,可参考这篇文章. DDD社区官网上一篇关于聚合设计的几个原则的简单讨论: 文章地址:http://dddcommunity.org/library/vernon_2011/, ...
随机推荐
- 红袖添香,绝代妖娆,Ruby语言基础入门教程之Ruby3基础语法,第一次亲密接触EP01
书接上回,前一篇我们在全平台构建好了Ruby3的开发环境,现在,可以和Ruby3第一次亲密接触了. Ruby是一门在面向对象层面无所不用其极的解释型编程语言. 我们可以把编写Ruby代码看作是一场行为 ...
- JavaScript：this指针
this指针,存储的是一个内存地址,如同变量一样,指向一块内存区域: 而这个内存区域,保存的就是一个对象的数据,那么这个对象是什么呢? 通常来说,this指针,主要是用在方法(函数)中,用来指向调用方 ...
- [深度学习] tf.keras入门2-分类
目录 Fashion MNIST数据库 分类模型的建立 模型预测 总体代码 主要介绍基于tf.keras的Fashion MNIST数据库分类, 官方文档地址为:https://tensorflow. ...
- 详解kubernetes五种暴露服务的方式
部署完服务终将是为了访问,那么kubernetes中service和ingress都可以将集群内部的服务能够支持外部访问.service可以让一组 Pod(称为"后端")为集群内的 ...
- BST查找结构与折半查找方法的实现与实验比较
简介 作业:查找结构与排序方法 作业题目: BST 查找结构与折半查找方法的实现与实验比较 要求编写程序实现 BST 存储结构的建立(插入).删除.查找和排序算法: 实现折半查找算法:比较 BST 查 ...
- VSCode运行C/C++配置
将MinGw安装目录下的 1.安装 VSCode 2.安装 MinGW 链接:点击跳转 3.MinGW 内安装两个模块 1.右键 Mark for Installation 勾选 (此处已安装好,所以 ...
- C#/VB.NET 在Excel中添加水印
在工作中,为了防止文件被随意复制和传播,通常我们会选择在文档中添加水印来对文件进行有效保护.文字水印是比较常见的一种保护手段,它可以有效防止文件被任意复制和随意打印传播.不过,Excel默认并没有水印 ...
- 基础分类算法_KNN算法
KNN(K-NearestNeighbor)算法 KNN算法是有监督学习中的分类算法. KNN算法很特殊,可以被认为是没有模型的算法,也可以认为其训练数据集就是模型本身. KNN算法的原理 KNN的原 ...
- 让Apache Beam在GCP Cloud Dataflow上跑起来
简介 在文章<Apache Beam入门及Java SDK开发初体验>中大概讲了Apapche Beam的简单概念和本地运行,本文将讲解如何把代码运行在GCP Cloud Dataflow ...
- 浙江某男子对多端应用开发工具HBuilderX在windows下安装的解说
同学,学uni-app好啊,大致上写一套代码能生成这么多个平台的应用,我简单念一下,它们分别是Android应用.IOS应用.Web应用.微信小程序.支付宝小程序.百度小程序.字节跳动小程序.快应用. ...