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>