OpenLayers6入门，使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题

已于 2024-03-13 11:35:04 修改
阅读量3.1k 收藏 4
点赞数 2
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： webgl openlayers gis地图开发 地图叠加大量点 OpenLayers性能优化
于 2023-04-13 13:34:29 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/130128246
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 22 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
122 篇文章 67 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门
69 篇文章 94 订阅 ¥69.90 ¥99.00
订阅专栏
本文介绍了在OpenLayers6中遇到大量Point点叠加导致浏览器卡顿的问题，提出通过WebGL图层进行性能优化。文章详细讲解了如何在Vue项目中使用WebGL图层，设置图层样式，并批量创建和叠加点要素，同时提醒了WebGL图层无法自定义Feature样式的局限性。
摘要由CSDN通过智能技术生成

专栏目录：
OpenLayers6入门教程汇总目录

前言

OpenLayers6地图中当叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。

这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。

当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。

openlayers

二、依赖和使用

"ol&#
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
专栏目录
订阅专栏
40-OpenLayers6入门，使用webgl图层叠加大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
fxshy的博客
06-02 208
40-OpenLayers6入门，使用webgl图层叠加大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2184
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
OpenLayers基础教程——使用WebGLPoints加载海量点数据
HerryDong的博客
03-21 2703
最近遇到一个问题：如何在OpenLayers中高效加载海量的场强点？由于项目中的一些要求，不能使用聚合的方法加载。OpenLayers中有一个类，使用该类可以轻松应对几十万的数据量，下面开始介绍。WebGL由于使用GPU加速渲染，因此绘图效率较高。在OpenLayers的开发中，如果遇到加载海量数据点的需求，不妨考虑使用实现。
OpenLayers 图标加载性能优化：使用 Style 样式缓存
最新发布
无可言喻的博客
08-26 856
在使用 OpenLayers 渲染大量矢量图标时，频繁创建 Style 对象可能导致性能问题和图标闪烁。为优化性能，使用样式池复用 Style 对象，以减少内存消耗。
openlayers 地图点（图层）多了后，地图绑定事件执行很卡
weixin_44205089的博客
08-21 2420
// 添加点 val点的数据 点的事件类型envType：pointermove移入singleclick点击 var addPoint = function(val, envType , src ,track) { const that = this; var overlay = ''; var key = null; var Point = new ol.geom.Point(bd09togcj02([val.lng, val.lat])); Point.a.
OpenLayers6入门，OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 1674
上一章中《OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上》，我们讲解了少量数据加载并叠加到OpenLayers矢量图层上，如果数量特别大，浏览器就会很卡，所以需要用到webgl图层进行加载，本章就讲解使用webgl图层叠加海量GeoJson点数据。
OpenLayers基础教程——WebGLPoints图层样式的设置方法
HerryDong的博客
03-25 2844
前一篇博客介绍了如何在中使用加载海量数据点的方法，这篇博客就来介绍一下图层的样式设置问题。在图层中，我们只需要创建一个对象即可，则不同，它并不是基于进行绘制，因此其样式渲染不能直接使用，取而代之的是使用样式运算符进行渲染。 2.2、数学运算符 2.3、变换运算符 2.4、逻辑运算符 2.5、转换运算符 3、简单渲染 简单颜色渲染很简单，只需要使用即可，第一个参数为固定值，后面的参数依次为红、绿、蓝、透明度。下面的代码会将要素渲染为红色点： 运行结果如下图所示：测试数据中的字段将要素分成了类，即：。现
Vue+OpenLayers7入门到实战：使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-13 493
本章介绍如何使用OpenLayers7在解决地图上叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。
OpenLayers入门，webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 1493
上一章中《OpenLayers入门，使用webgl图层叠加大量点要素，解决OpenLayers地图中叠加大量点导致浏览器卡住变慢的问题》已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题，本章补充一下叠加图片图标到地图的情况下。
OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色的三角形，适用于大量三角形渲染不同颜色
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-21 643
本章使用OpenLayers根据Feature要素的变量动态渲染不同颜色的三角形。通过一个WebGL图层生成四种不同颜色的图形要素，适用于WebGL图层需要根据大量点要素区分颜色显示的需求。更多的WebGL图层使用运算符动态生成样式的内容将会陆续更新。## WebGL图层样式运算符详解OpenLayers入门，OpenLayers6的WebGLPointsLayer图层样式运算符详解。
ol3-dem, OpenLayers 3用于地形数据 使用webgl渲染数字高程模型.zip
10-10
ol3-dem, OpenLayers 3用于地形数据 使用webgl渲染数字高程模型 ##ol3-dem 不再被维护： 基于ol3-dem的弹性地形图 。这是一个 fork 3.1.1的实验，用于呈现计划斜面的数字高程模型。特性平面斜浮雕Hypsometric染色Waterbody检测山麓阴影演示查看现
openlayers海量点渲染（2w点左右）
我灰灰凭啥输
05-27 6524
效果图 此处用到了openlayers的webgl属性 import GeoJSON from 'ol/format/GeoJSON'; //用来加载矢量数据 import WebGLPointsLayer from 'ol/layer/WebGLPoints'; //使用webgl渲染 初始化矢量图层，从文件加载点的地理信息 this.vectorSource = new Vector({ url: 'http://localhost:9528/data.ge
openlayers WebGLPoints图层应用（光环、光晕扩散收缩）
无心使然云中漫步
07-16 467
本篇介绍一下使用 openlayers WebGLPoints图层应用（光环、光晕扩散收缩）
Openlayers使用WebGL加载多种自定义图标矢量点
无可言喻的博客
12-14 3505
使用OpenLayers的WebGLPointsLayer加载海量矢量点（100W），并使用多种自定义图标样式。
OpenLayers6入门，OpenLayers6的WebGLPointsLayer图层样式和运算符详解，四种symbolType类型案例
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-21 1065
本章讲解使用OpenLayers6的WebGL图层显示大量点情况下，列举出所有WebGLPointsLayer图层所支持的所有样式运算符大全。
openlayers 使用iconfont作为字体图标 来表示大量记录时会出现卡顿
chpswg的专栏
04-20 976
上一篇讲过openlayers 可以使用iconfont来表示图标，好处是可以任意修改图标图片的颜色，但是如果是来表示大量要素时，存在卡顿现象，如在航班监控时，全国有1000多架航班同时在飞，系统每隔5秒刷新一次，由于用iconfont是用canvas来实时生成的，1000多架航班刷新会很卡，所以这时候应该用图片来表示图标，即将全国航班监控提取出来，单独用图片表示。 /** * 功能：航班样...
Vue+OpenLayers7入门到实战：webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-07 344
之前已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题。本章介绍补充一下叠加大量图片图标要素到地图的情况下的问题。
十五、openlayers官方示例Clustered Features——使用聚合加载大量点位数据
aaa_div的博客
05-14 805
在实例化VectorLayer时加一个style配置，函数里会返回每一个feature，每一个feature上都有一个features属性，记录着它的下级features数组，聚合的原理就是把几个相邻的点通过计算合成一个feature，我猜features里面记录的就是合成这个feature所用的数组。这是因为聚合里面，图层上的feature本来就是根据缩放层级变化的，定位过程中刚刚点击的那个feature已经不见了。注册地图点击事件，点击每一个feature就会把地图视角定位到点击的feature处。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值