OpenLayers基础教程——点要素图层的聚合显示

原创 已于 2024-04-30 15:34:59 修改 · 8.4k 阅读 · 69 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#openlayers

于 2020-12-10 14:50:47 首次发布
本文介绍如何在OpenLayers中实现点要素图层的聚合处理，包括基本聚合、特殊处理及聚合样式的扩展，提升用户体验并避免地图界面卡顿。

1、前言

在某些情况下，图层中的点数量可能会成百上千，这时候如果不做任何处理将其直接加载到地图上，那么不仅会使用户视觉体验下降，同时也会造成地图界面的卡顿。下面这段代码创建了200个随机点进行显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚合</title>
    <style>
        html,
        body,
        #map {
     
     
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="libs/ol/ol.css" />
    <script src="libs/ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>

    <script>
        // 随机创建200个要素
        var source = new ol.source.Vector();
        for (var i = 1; i <= 200; i++) {
     
     
            var coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
            var feature = new ol.Feature(new ol.geom.Point(coordinates));
            source.addFeature(feature);
        }

        // 创建图层
        var layer = new ol.layer.Vector({
     
     
            source: source,
            style: function (feature, resolution) {
     
     
                var style = new ol.style.Style({
     
     
                    image: new ol.style.Icon({
     
     
                        src: 'img/point.png'
                    })
                })
                return style;
            }
        });

        // 创建地图
        var map = new ol.Map({
     
     
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
     
     
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10,
                minZoom: 5,
                maxZoom: 14
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

一般情况下，如果一个点要素图层中的点数量很多，可以采用图层聚合的方式对其进行处理。但需要注意：图层聚合只对点要素图层有效，对线和面图层无效。

2、点要素图层的聚合

在openlayers中，图层聚合的一般步骤如下：

  1. 创建要素
  2. 创建数据源添加要素
  3. 创建聚合数据源，设置聚合的距离
  4. 创建图层，将数据源设置为聚合数据源
  5. 创建地图，添加聚合图层

图层聚合代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚合</title>
    <style>
        html,
        body,
        #map {
     
     
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="libs/ol/ol.css" />
    <script src="libs/ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>

    <script>
        // 随机创建200个要素
        var source = new ol.source.Vector();
        for (var i = 1; i <= 200; i++) {
     
     
            var coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
            var feature = new ol.Feature(new ol.geom.Point(coordinates));
            source.addFeature(feature);
        }

        // 创建聚合数据源
        var cluster = new ol.source.Cluster({
     
     
            source: source,
            distance: 100
        });

        // 创建图层
        var layer = new ol.layer.Vector({
     
     
            source: cluster,
            style: function (feature, resolution) {
     
     
                var size = feature.get('features').length;
                var style = new ol.style.Style({
     
     
                    image: new ol.style.Circle({
     
     
                        radius: 30,
                        stroke: new ol.style.Stroke({
     
     
                            color: 'white'
                        }),
                        fill: new ol.style.Fill({
     
     
                            color: 'blue'
                        })
                    }),
                    text: new ol.style.Text({
     
     
                        text: size.toString(),
                        fill: new ol.style.Fill({
     
     
                            color: 'white'
                        })
                    })
                })
                return style;
            }
        });

        // 创建地图
        var map = new ol.Map({
     
     
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
     
     
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10,
                minZoom: 5,
                maxZoom: 14
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

3、聚合特殊处理一

上面的代码虽然实现了点要素图层的聚合，但其实存在着一个问题：地图缩放层级最大时仍然保持着聚合效果，如下图所示：

在这里插入图片描述

一般情况下，当某处只有一个点时就应该取消聚合效果，这时候就需要对style: function (feature, resolution)这个回调函数进行处理，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚合</title>
    <style>
        html,
        body,
        #map {
     
     
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="libs/ol/ol.css" />
    <script src="libs/ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>

    <script>
最低0.47元/天 解锁文章
Vue + OpenLayers探索大规模点数据加载的极限
ByteZenith的博客
08-17 375
然后，我们生成包含10000个随机点的数据集，并将其转换为OpenLayers的Feature对象。接下来，我们使用Cluster源将这些点进行聚类，并创建一个具有自定义样式的聚类图层。在本文中，我们将探索如何使用Vue.js和OpenLayers来处理并展示包含万个点的数据集。总结起来，Vue.js和OpenLayers是一个强大的组合，可以处理和展示大规模点数据。这样，我们就可以加载和展示包含万个点的数据集。通过使用聚类技术，我们可以避免在地图上绘制过多的点，从而提高性能和可视化效果。
Openlayers 教程 17 - 创建聚合图、权重聚合图以及聚合图点击事件
非科班Java出身GISer的博客
08-09 2607
本示例基于实际项目中的应用，介绍：加载聚合图、权重聚合图、聚合图参数、聚合图点击事件等功能。
【前端小记】--OpenLayers--1.点位图层动态聚合展示
am_xiao_hui的博客
09-01 1522
通常情况，我们在给地图添加图层时，会new一个VectorSource作为数据源，针对以上这种情况的的出现，OpenLayers给出了一个解决办法——聚类。
openlayers+geoserver+postgre加载海量数据的办法
bool的博客
10-16 3129
geoserver+postgre加载海量数据的办法 最近在开发GIS系统，碰巧遇到了海量数据加载的问题。特以博客以记之 1.openlayers解决点的海量数据加载 openlayers加载海量点数据openlayer在官网提供了支持，主要是通过聚合来实现: https://openlayers.org/en/latest/examples/cluster.html 2.openlayers加载非点状海量数据 主要是通过postgreSql来过滤掉一部分数据，过滤通过缩放级别zoom来限制，当缩
Openlayers（五）点位聚合Cluster
qq_42583549的博客
04-09 5014
OpenLayers 中聚合是通过 `ol.source.Cluster` 实现，聚合的原理是将距离比较近的点位合并为一个点，并计算合并后点位的属性值。 在聚合源 `ol.source.Cluster` 中，当一个点被添加进来时，会检查该点与已有聚合点的距离是否在指定的聚合距离之内，如果是，则将该点加入到该聚合点中，同时更新聚合点的属性值（例如点数等）。如果该点与已有聚合点的距离都超出聚合距离，则将该点作为新的聚合点，加入到聚合源中。 在渲染时，对于聚合后的点，可以根据聚合点的属性值设置不同的样式，以区
Openlayers：实现聚合
m0_52912501的博客
04-14 1150
本文介绍了Openlayers中图形聚合功能的基本用法，以及相关的一些优化效果的实现方式。希望可以对想要学习聚合的朋友有所帮助。
OpenLayers基础教程——创建要素图层，绘制点线面
HerryDong的博客
12-09 6717
1、前言 一般来说，我们会选择百度、高德、谷歌地图作为一个WebGIS系统的基础底图。底图其实就是存放在服务器上的一张一张的瓦片，它的作用仅仅是供用户浏览而已。而有些地物我们则需要以要素的形式来展现它们，比如GPS实测点、车辆的位置等。下面就来介绍一下如何在openlayers中创建要素图层。 2、创建要素图层的基本流程 创建要素图层的流程很简单，如下所示： 创建样式——ol.style.Style() 创建要素，设置其样式——ol.Feature() 创建数据源，添加要素——new ol.source.
OpenLayers基础教程——要素的点选、框选、圈选、多边形选择
HerryDong的博客
09-24 8256
1、前言 在OpenLayers中，框选功能需要ol.interaction.Select和ol.interaction.DragBox配合实现，其中前者主要负责盛放被选择的要素，后者主要负责矩形框的绘制，下面开始介绍。 2、框选的实现 框选功能的实现思路其实很简单，代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten
OpenLayers基础教程——WebGLPoints图层样式的设置方法
HerryDong的博客
03-25 3852
前一篇博客介绍了如何在中使用加载海量数据点的方法，这篇博客就来介绍一下图层的样式设置问题。在图层中，我们只需要创建一个对象即可，则不同，它并不是基于进行绘制，因此其样式渲染不能直接使用，取而代之的是使用样式运算符进行渲染。 2.2、数学运算符 2.3、变换运算符 2.4、逻辑运算符 2.5、转换运算符 3、简单渲染 简单颜色渲染很简单，只需要使用即可，第一个参数为固定值，后面的参数依次为红、绿、蓝、透明度。下面的代码会将要素渲染为红色点： 运行结果如下图所示：测试数据中的字段将要素分成了类，即：。现
OpenLayers基础教程——设置和获取要素图层的属性信息
HerryDong的博客
12-09 8472
1、前言 大家可以回想一下初学GIS课程的时候老师是如何介绍空间数据的？其实空间数据与一般数据的区别就是：空间数据除了包含位置信息之外，它还会包含一些属性信息。例如常见的shp文件，除了包含shape字段外，它还会包含一些其他的字段，用以描述这条字段的属性，ArcMap中的要素属性表如下图所示： 其实在openlayers中，我们也可以给要素设置属性信息，当然在WebGIS中我们需要以JSON的形式进行添加，下面开始介绍。 2、设置属性信息 在openlayers中设置属性信息很简单，你可以在初始化fea
Openlayers根据geojson格式数据渲染聚合图
01-06
geojson作为webGIS较常用的数据格式，没有给定如何将geojson格式渲染为聚合图的示例，因此本示例将Openlayers官网提供的geojson格式数据加载示例与聚合图渲染示例结合，形成根据geojson格式数据渲染聚合图的示例。
Openlayers绘制聚合标注
10-14
主要为大家详细介绍了Openlayers实现聚合标注，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
OpenLayers学习笔记-点位聚合
人与人之间最小的差别是智商，最大的差别是坚持。
07-12 1601
用户点击行政区划等操作后，从后台获取区域内的点位数据，在地图上聚合显示。用户手动取消聚合，点位直接渲染在地图上。
openlayers-11-聚合显示
chuanren1991的博客
05-16 917
聚合显示的关键在，ol.source.Cluster,这是聚合标注图层，需要先实例化该类在添加图文标注的基础上，添加一个中间数据源，即聚合标注类，添加图文标注中，是先创建矢量标注数据源（vectorSource）,然后创建矢量标注图层（vectorLayer），最后将矢量标注数据源添加到矢量标注图层，也可以在创建矢量标注图层时制定source属性为矢量标注数据源，具体请看 添加图文标注 章节。总的来说就是。
openlayers 要素聚合（cluster）、icon聚合
无心使然云中漫步
06-26 751
本篇介绍一下使用openlayers 要素聚合（cluster），icon聚合。
openlayers实现绘制图标，并实现图标的聚合功能
Smile_666666的博客
05-11 839
openlayers实现绘制图标，并实现图标的聚合功能
openlayers6 点聚合
weixin_44242600的博客
08-08 1047
模拟实现人员聚合，单人显示名称，多人聚合显示人数。 在OpenLayers中，点聚合是一种常见的需求，可以通过集成第三方库`ol-cluster`来实现。
Openlayers：海量图形渲染之聚合
最新发布
m0_52912501的博客
04-15 706
最近由于在工作中涉及到了海量图形渲染的问题，因此我开始研究相关的解决方案。在这个过程中聚合也是一个经常会被人提到的解决方案，我一直对聚合是怀有疑虑的，我认为其无法有效的解决我所面临的问题。
openlayers：实现地图图层聚合（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-12 288
openlayers：实现地图图层聚合（附完整源码）
OpenLayers鼠标悬停显示图层要素信息教程
描述部分说明了这个扩展包的具体功能：它封装了OpenLayers的某些功能，允许用户对vector图层进行操作，以便在鼠标移动到地图上的某个位置时显示相关的要素信息。这通常涉及到捕获鼠标的移动事件，并根据事件发生的...
评论 10
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值