四章-41-使用WebGL渲染海量矢量要素

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码 见 1041.html ，对应的 官网示例
https://openlayers.org/en/latest/examples/webgl-points-layer.html?q=WebGL

https://openlayers.org/en/latest/examples/icon-sprite-webgl.html?q=WebGL

https://openlayers.org/en/latest/examples/filter-points-webgl.html?q=WebGL

ol.WebGLMap:WebGL方式渲染
ol.style.AtlasManager：
生成一个大号的canvas，用以装载海量的要素
对ol.style.Icon类型的对象无效

对一张图片复用，达到节省内存提升效率的目的。

image.png

当数量不太多（5万）的时候，效果不错；但当数量太多（超过15万）的时候，卡顿严重。

image.png

image.png