OpenLayers基础教程——使用WebGLPoints加载海量点数据

1、前言

最近遇到一个问题：如何在OpenLayers中高效加载海量的场强点？由于项目中的一些要求，不能使用聚合的方法加载。一番搜索之后发现：OpenLayers中有一个WebGLPoints类，使用该类可以轻松应对几十万的数据量，下面开始介绍。

2、使用ol.layer.Vector

ol.layer.Vector是常用的矢量要素图层，下面这段代码演示了加载100000个随机点：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="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><link rel="stylesheet" href="libs/ol/ol.css" /><script src="libs/ol/ol.js"></script>
</head>
<body><div id="map"></div><script>// 创建图层var layer = new ol.layer.Vector({source: new ol.source.Vector(),style: new ol.style.Style({image: new ol.style.Circle({radius: 20,fill: new ol.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 = new ol.Feature(new ol.geom.Point(coordinates));source.addFeature(feature);}// 创建地图var map = new ol.Map({target: 'map',layers: [layer],view: new ol.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：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="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><link rel="stylesheet" href="libs/ol/ol.css" /><script src="libs/ol/ol.js"></script>
</head>
<body><div id="map"></div><script>// 创建图层var layer = new ol.layer.WebGLPoints({source: new ol.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 = new ol.Feature(new ol.geom.Point(coordinates));source.addFeature(feature);}// 创建地图var map = new ol.Map({target: 'map',layers: [layer],view: new ol.View({projection: 'EPSG:4326',center: [120, 30],zoom: 10})});</script>
</body>
</html>