OpenLayers入门，webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题

原创 已于 2023-11-24 14:39:47 修改 · 1.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#webgl #OpenLayers #地图叠加大量图片 #优化OpenLayers性能 #OpenLayers大量点叠加

于 2023-04-13 13:41:32 首次发布
本文介绍如何使用OpenLayers的WebGLPointsLayer图层叠加大量Icon图片，解决地图加载超大数据量图片导致的浏览器卡顿问题。通过webgl图层运算符，详细阐述如何在Vue项目中实现这一功能，包括依赖安装、代码实现和效果演示。

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

前言

上一章中OpenLayers入门，使用webgl图层叠加大量点要素，解决OpenLayers地图中叠加大量点导致浏览器卡住变慢的问题
已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题，本章补充一下叠加图片图标到地图的情况下。
openlayers

webgl图层运算符详解系列

了解本专栏 订阅专栏 解锁全文
40-OpenLayers6入门，使用webgl图层叠加大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
fxshy的博客
06-02 490
40-OpenLayers6入门，使用webgl图层叠加大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
OpenLayers实战，WebGL图层如何使用一张拼接合成图片根据坐标切片成单个图片进行渲染
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
11-23 728
本章主要讲解OpenLayers使用WebGL图层的情况下，如何使用一张拼接合成图片根据坐标切片成单个图片进行渲染不同图片到地图上的功能。为方便讲解原理，本章使用的一张图片是按照横向4等分，纵向两等分规则拼接了6个图标的合成图片。并使用WebGLPointsLayer图层的match运算符将一张切片图片为6个图标，并分别渲染这6个图标到地图上。
OpenLayers基础教程——WebGLPoints设置不同图标样式的方法
HerryDong的博客
12-11 1315
在中，与设置不同图标样式的方法有所不同。本文就来介绍一下如何在图层中根据要素类型设置不同的图标样式。设置不同图标的样式很简单，直接上代码： 运行结果如下图所示：采用样式表达式的方法来渲染要素，所以很多同志都会想到：用表达式来做不就行了吗？所以有如下错误代码： 运行结果如下图所示： 很明显，通过表达式无法得到我们想要的结果，此时就需要使用属性了。之前的代码使用张图片来分别表示不同的要素类型，如下图所示： 现在将这张图片拼接成张大图，这张大图的尺寸就是，如下图所示： 第个图标占据的位置可表示为：，也就是，以此类
OpenLayers 地图事件优化：10个高效节流与防抖实现技巧
最新发布
gitblog_00040的博客
11-17 274
OpenLayers 作为强大的开源地图库，在处理高频交互时面临性能挑战。本文将为您揭示10个实用的节流与防抖优化技巧，帮助您构建流畅的地图应用体验。OpenLayers 地图事件处理通过巧妙的内置机制确保高性能交互。 ## 🎯 为什么需要事件优化？ 当地图处理拖拽、缩放、平移等高频率交互时，浏览器会触发大量事件。如果不进行优化，这些密集的事件处理会导致： - 页面卡顿和性能下降 - 不必
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2707
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
OpenLayers WebGL瓦片图层和样式
GIS小虫的博客
03-24 4622
OpenLayers WebGL瓦片图层简介和样式
OpenLayers WebGL与3D渲染 （进阶一）
WEBRSS
04-27 2142
WebGL是一种JavaScript API，它基于OpenGL ES 2.0/3.0标准，允许在不使用插件的情况下在兼容的Web浏览器中呈现高性能的交互式3D和2D图形。在地理信息系统(GIS)领域，WebGL为地图渲染和空间数据可视化提供了强大的性能支持。// 创建3D点符号// 创建Canvas元素// 获取2D上下文// 绘制3D球体效果${// 创建3D点符号 function create3DPointSymbol(feature) {
Vue+OpenLayers7入门到实战：webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-07 495
之前已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题。本章介绍补充一下叠加大量图片图标要素到地图的情况下的问题。
41-OpenLayers6入门，使用webgl图层叠加超过一百万数据量图片到地图，解决叠加大量图片导致浏览器卡住变慢的问题
fxshy的博客
06-02 301
41-OpenLayers6入门，使用webgl图层叠加超过一百万数据量图片到地图，解决叠加大量图片导致浏览器卡住变慢的问题
OpenLayers6入门，使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-13 3726
OpenLayers地图中当叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。
Vue+OpenLayers7入门到实战：使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-13 797
本章介绍如何使用OpenLayers7在解决地图上叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。
ol3-dem, OpenLayers 3用于地形数据 使用webgl渲染数字高程模型.zip
10-10
ol3-dem, OpenLayers 3用于地形数据 使用webgl渲染数字高程模型 ##ol3-dem 不再被维护： 基于ol3-dem的弹性地形图 。这是一个 fork 3.1.1的实验，用于呈现计划斜面的数字高程模型。特性平面斜浮雕Hypsometric染色Waterbody检测山麓阴影演示查看现
Openlayers加载海量数据之WebGL
qq_41283814的博客
01-30 5208
openlayer中使用webGL渲染海量点或面图层基本方法（提示：openlayer 6 以上的版本才支持webGL渲染）
Openlayers使用WebGL加载多种自定义图标矢量点
无可言喻的博客
12-14 4470
使用OpenLayers的WebGLPointsLayer加载海量矢量点（100W），并使用多种自定义图标样式。
Openlayers实战，Openlayers使用浏览器内置IndexDB数据库缓存地图瓦片，优化地图瓦片加载速度和浏览器内存占用
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
06-28 2031
在入门教程中，我们已经详细介绍了如何对地图瓦片进行缓存，请参考《Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能》，缺点是占用内存过多，那么如何再次优化呢，本章就通过使用浏览器IndexDB数据库来缓存地图瓦片，不仅同时优化了瓦片加载速度，从而在之前基础上优化占用内存过多的问题。为什么不使用LocalStorage？因为LocalStorage有存储限制，最大5M，而地图瓦片很多，LocalStorage是远远不够的。
OpenLayers基础教程——WebGLPoints图层样式的设置方法
HerryDong的博客
03-25 3915
前一篇博客介绍了如何在中使用加载海量数据点的方法，这篇博客就来介绍一下图层的样式设置问题。在图层中，我们只需要创建一个对象即可，则不同，它并不是基于进行绘制，因此其样式渲染不能直接使用，取而代之的是使用样式运算符进行渲染。 2.2、数学运算符 2.3、变换运算符 2.4、逻辑运算符 2.5、转换运算符 3、简单渲染 简单颜色渲染很简单，只需要使用即可，第一个参数为固定值，后面的参数依次为红、绿、蓝、透明度。下面的代码会将要素渲染为红色点： 运行结果如下图所示：测试数据中的字段将要素分成了类，即：。现
openlayers WebGL裁剪图层，双图层拼接显示
无心使然云中漫步
07-11 919
本篇介绍一下使用openlayers WebGL裁剪图层，双图层拼接显示。
OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色和不同直径大小的圆形和圆点图形，适用于大量圆形圆点渲染不同颜色不同大小
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
11-22 713
本章使用OpenLayers根据Feature要素的变量动态渲染不同颜色和不同直径大小的圆形和圆点图形。通过一个WebGL图层生成四种不同颜色和不同大小的圆形圆点图形要素，适用于WebGL图层需要根据大量点要素区分颜色区分不同大小显示圆形圆点的需求。
openlayers结合原生webgl 图像的动态绘制tin数据保持清晰度（南极坐标系、北极坐标系的转换处理）
q1025387665a的博客
03-30 1322
前言： 本文基于上篇文章的基础开始。如果没看过我的上篇文章，请移步。 效果 转换成webgl坐标系所需的地理知识 南极坐标系如下图所示 北极坐标系的 如理 相反 北极坐标系如理相反 也就是说 假如我们得到一个坐标系正确的结果，另一个就是调调正负号了。 下面以南极坐标系为说明。 经纬度坐标转换成南极坐标的显示坐标（将度数改为数字） 计算原理如下图所示 特别注意，以下代码只保证南极坐标系第四象限求得角度没问题，由于暂时我也只用到了第四象限得处理，所以没有对其他的去算角度。请跟着上图原理自行计算。或者根
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值