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

已于 2024-03-13 11:35:04 修改
阅读量3.4k 收藏 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 篇文章 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
123 篇文章 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门
69 篇文章 ¥69.90 ¥99.00
订阅专栏
本文介绍了在OpenLayers6中遇到大量Point点叠加导致浏览器卡顿的问题，提出通过WebGL图层进行性能优化。文章详细讲解了如何在Vue项目中使用WebGL图层，设置图层样式，并批量创建和叠加点要素，同时提醒了WebGL图层无法自定义Feature样式的局限性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

前言

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

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

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

openlayers

二、依赖和使用

"ol&#
了解本专栏 订阅专栏 解锁全文
40-OpenLayers6入门，使用webgl图层叠加大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
fxshy的博客
06-02 321
40-OpenLayers6入门，使用webgl图层叠加大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
96.在 Vue 3 中使用 OpenLayers 探究加载 Point、Polygon 的极限
最新发布
小彭的博客
03-06 827
在前端 GIS（地理信息系统）开发中，OpenLayers 作为一个功能强大的 Web 地图库，广泛用于加载地图、渲染矢量数据（点、线、面）、叠加图层等场景。然而，当涉及到。
openlayers 地图点（图层）多了后，地图绑定事件执行很卡
weixin_44205089的博客
08-21 2532
// 添加点 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.
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2352
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
openlayers WebGLPoints图层应用（光环、光晕扩散收缩）
无心使然云中漫步
07-16 566
本篇介绍一下使用 openlayers WebGLPoints图层应用（光环、光晕扩散收缩）
Vue+OpenLayers7入门到实战：使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-13 575
本章介绍如何使用OpenLayers7在解决地图上叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。
OpenLayers入门，webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 1687
上一章中《OpenLayers入门，使用webgl图层叠加大量点要素，解决OpenLayers地图中叠加大量点导致浏览器卡住变慢的问题》已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题，本章补充一下叠加图片图标到地图的情况下。
OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色的三角形，适用于大量三角形渲染不同颜色
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-21 729
本章使用OpenLayers根据Feature要素的变量动态渲染不同颜色的三角形。通过一个WebGL图层生成四种不同颜色的图形要素，适用于WebGL图层需要根据大量点要素区分颜色显示的需求。更多的WebGL图层使用运算符动态生成样式的内容将会陆续更新。## WebGL图层样式运算符详解OpenLayers入门，OpenLayers6的WebGLPointsLayer图层样式运算符详解。
Openlayers使用WebGL加载多种自定义图标矢量点
无可言喻的博客
12-14 4012
使用OpenLayers的WebGLPointsLayer加载海量矢量点（100W），并使用多种自定义图标样式。
OpenLayers6入门，OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 1934
上一章中《OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上》，我们讲解了少量数据加载并叠加到OpenLayers矢量图层上，如果数量特别大，浏览器就会很卡，所以需要用到webgl图层进行加载，本章就讲解使用webgl图层叠加海量GeoJson点数据。
OpenLayers基础教程——使用WebGLPoints加载海量点数据
HerryDong的博客
03-21 3269
最近遇到一个问题：如何在OpenLayers中高效加载海量的场强点？由于项目中的一些要求，不能使用聚合的方法加载。OpenLayers中有一个类，使用该类可以轻松应对几十万的数据量，下面开始介绍。WebGL由于使用GPU加速渲染，因此绘图效率较高。在OpenLayers的开发中，如果遇到加载海量数据点的需求，不妨考虑使用实现。
ol3-dem, OpenLayers 3用于地形数据 使用webgl渲染数字高程模型.zip
10-10
ol3-dem, OpenLayers 3用于地形数据 使用webgl渲染数字高程模型 ##ol3-dem 不再被维护： 基于ol3-dem的弹性地形图 。这是一个 fork 3.1.1的实验，用于呈现计划斜面的数字高程模型。特性平面斜浮雕Hypsometric染色Waterbody检测山麓阴影演示查看现
openLayers geoserver常见问题
03-23
请问在openlayers中如何删除Layer中的marker 3 在层中加了一个标记怎么永久的存到地图上 3 OpenLayers 如何设死地图边界 3 谁写过openlayers解析xml 3 openlayer.popup 3 OpenLayers 怎么做字段标注 4 字段标注不是用OL做的，而是你在SLD中定义用数据表的哪个字段做标签就可以了 4 OpenLayers 中画最短轨迹 4 使用TileCache配合OpenLayers 4 openlayers如何准确测距 9 openlayers简单实用例子 9 关于TileCache函数 13 openlayers 有函数说明的类图 14 go 14 Maker 一多，客户端就死掉 15 OpenLayers 怎么实现 AJAX 16 openlayer 要怎么研究才会应用得比较自如 16 改良OpenLayers的Popup 16 在openlayers的地图中要添加地图搜索功能一般采用什么方法 17 openlayers中如何访问geoserver发布的图片 18 什么是TMS？ 18 怎样设置瓦片的大小 18 画一条线，数据量太大，怎么办？ 18 怎么在图层上动态画点 20 GeoExt集成google map ,地图偏移 21 用JavaScript为OpenLayers.Marker的加上单击显示详细信息的功能 21 改良OpenLayers的MousePostion 25 使用OpenLayers实现一个在鼠标点击处添加标记的效果 27 openlayers 利用google maps的卫星地图 29 openLayers集成google map ,点标注错位 30 openlayers可以做出谷歌效果的地图吗? 31 用OpenLayers API和类来画点、线、面 32 OGC标准术语介绍WMS、WFS、WCS 35 如何控制地图的放缩 37 openLayers链接WMS的代码探讨 37 openlayers 2.5 矢量层在ie下闪烁的问题 38 openLayers 在地图上添加一个点并保存 39 openLayers 各个参数的意义 42 geoserver能搞出这种风格的图来吗？ 43 关于SLD的线切割后的设置 43 GEOSERVE 标注铁路,使用 SLD 44 geoserver 发布.shp 中文乱码问题 怎么解决啊 45 Geoserver怎么连postGreSql 数据库 48 Geoserver连Oracle Spatial 52 GeoServer架构浅谈 53 Geoserver发布地图无法显示问题 57 WebGIS相关的OpenGIS规范 58 geoserver中地图以外的区域以自定义图片填充 62 怎样修改 geoServer 的用户名密码 65 GeoServer中的WMS服务生成的png图片背景色为透明 65 比例尺 65 需不需要一个layer对应一个store 66 如何部署shp 66 用GeoWebCache后Marker错位 66 标签太大导致不能显示？ 67 geoserver把两个shapefile格式的图叠 67 GeoServer 能够集成 Google Map? 68 gwc地图切片的缓存路径在web.xml中设置么 68 如何实现地图查询？ 68 sld文件怎么用 69 在sld中怎么控制路名的间隔？ 69
openlayers 使用iconfont作为字体图标 来表示大量记录时会出现卡顿
chpswg的专栏
04-20 1024
上一篇讲过openlayers 可以使用iconfont来表示图标，好处是可以任意修改图标图片的颜色，但是如果是来表示大量要素时，存在卡顿现象，如在航班监控时，全国有1000多架航班同时在飞，系统每隔5秒刷新一次，由于用iconfont是用canvas来实时生成的，1000多架航班刷新会很卡，所以这时候应该用图片来表示图标，即将全国航班监控提取出来，单独用图片表示。 /** * 功能：航班样...
Vue+OpenLayers7入门到实战：webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-07 392
之前已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题。本章介绍补充一下叠加大量图片图标要素到地图的情况下的问题。
OpenLayers基础教程——WebGLPoints图层样式的设置方法
HerryDong的博客
03-25 3453
前一篇博客介绍了如何在中使用加载海量数据点的方法，这篇博客就来介绍一下图层的样式设置问题。在图层中，我们只需要创建一个对象即可，则不同，它并不是基于进行绘制，因此其样式渲染不能直接使用，取而代之的是使用样式运算符进行渲染。 2.2、数学运算符 2.3、变换运算符 2.4、逻辑运算符 2.5、转换运算符 3、简单渲染 简单颜色渲染很简单，只需要使用即可，第一个参数为固定值，后面的参数依次为红、绿、蓝、透明度。下面的代码会将要素渲染为红色点： 运行结果如下图所示：测试数据中的字段将要素分成了类，即：。现
OpenLayers基础教程——WebGLPoints设置不同图标样式的方法
HerryDong的博客
12-11 1136
在中，与设置不同图标样式的方法有所不同。本文就来介绍一下如何在图层中根据要素类型设置不同的图标样式。设置不同图标的样式很简单，直接上代码： 运行结果如下图所示：采用样式表达式的方法来渲染要素，所以很多同志都会想到：用表达式来做不就行了吗？所以有如下错误代码： 运行结果如下图所示： 很明显，通过表达式无法得到我们想要的结果，此时就需要使用属性了。之前的代码使用张图片来分别表示不同的要素类型，如下图所示： 现在将这张图片拼接成张大图，这张大图的尺寸就是，如下图所示： 第个图标占据的位置可表示为：，也就是，以此类
openlayer实现上万个点的分屏实时组装
weixin_42496466的博客
11-03 629
openlayer实现上万个点的分屏实时组装
OpenLayers性能瓶颈与优化（闭包引用与GML解析低效率）
Vern的专栏
10-07 8653
1. 结构中大量闭包的引用关系造成的性能瓶颈     OpenLayers其实是受到了js本身的限制，js是解释型的语言，执行效率不高，而且寄生在客户端让浏览器执行的。而OpenLayers中大量用到了闭包，最开始OpenLayers的内存泄露问题也是满严重的，后来差不多每个类中都写了destroy方法，用于释放资源，解除对象与DOM的绑定,相当于析构函数那种，这在很大程度上优化了Ope
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值