1、前言
最近遇到一个问题：如何在
OpenLayers
中高效加载海量的场强点？由于项目中的一些要求，不能使用聚合的方法加载。一番搜索之后发现：
OpenLayers
中有一个
WebGLPoints
类，使用该类可以轻松应对几十万的数据量，下面开始介绍。
2、使用ol.layer.Vector
ol.layer.Vector
是常用的矢量要素图层，下面这段代码演示了加载
100000
个随机点：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>WebGL</title><style>html,
body,
#map{width: 100%;height: 100%;margin: 0;padding: 0;}</style><linkrel="stylesheet"href="libs/ol/ol.css"/><scriptsrc="libs/ol/ol.js"></script></head><body><divid="map"></div><script>// 创建图层var layer =newol.layer.Vector({source:newol.source.Vector(),style:newol.style.Style({image:newol.style.Circle({radius:20,fill:newol.style.Fill({color:'red'})})})});// 创建要素var source = layer.getSource();for(var i =1; i <=100000; i++){var coordinates =[120.00+ Math.random(),30.00+ Math.random()];var feature =newol.Feature(newol.geom.Point(coordinates));
source.addFeature(feature);}// 创建地图var map =newol.Map({target:'map',layers:[
layer
],view:newol.View({projection:'EPSG:4326',center:[120,30],zoom:10})});</script></body></html>
运行程序后可以发现：界面卡顿严重，用户体验较差。
3、使用ol.layer.WebGLPoints
下面使用
ol.layer.WebGLPoints
来加载
100000
个随机点，需要注意：
OpenLayers
的版本从
6
开始才支持
ol.layer.WebGLPoints
：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>WebGL</title><style>html,
body,
#map{width: 100%;height: 100%;margin: 0;padding: 0;}</style><linkrel="stylesheet"href="libs/ol/ol.css"/><scriptsrc="libs/ol/ol.js"></script></head><body><divid="map"></div><script>// 创建图层var layer =newol.layer.WebGLPoints({source:newol.source.Vector(),style:{symbol:{symbolType:'circle',size:20,color:'red'}}});// 创建要素var source = layer.getSource();for(var i =1; i <=100000; i++){var coordinates =[120.00+ Math.random(),30.00+ Math.random()];var feature =newol.Feature(newol.geom.Point(coordinates));
source.addFeature(feature);}// 创建地图var map =newol.Map({target:'map',layers:[
layer
],view:newol.View({projection:'EPSG:4326',center:[120,30],zoom:10})});</script></body></html>
运行程序后可以发现：界面无卡顿，用户体验较好。
4、结语
WebGL
由于使用
GPU
加速渲染，因此绘图效率较高。在
OpenLayers
的开发中，如果遇到加载海量数据点的需求，不妨考虑使用
WebGLPoints
实现。
标签：
openlayers
本文转载自: https://blog.csdn.net/HerryDong/article/details/136923391
版权归原作者 HerryDong 所有， 如有侵权，请联系我们删除。
版权归原作者 HerryDong 所有， 如有侵权，请联系我们删除。