OpenLayers6使用WebGL加载海量点

环境：Vue2.6.11、OpenLayers6.5.0
需求：OpenLayers6使用WebGL方式加载50万个点

代码

<template>
    <div class="earth">
        <div id="ol-container"></div>
    </div>
</template>

<script>
    import 'ol/ol.css';
    import Map from 'ol/Map';
    import View from 'ol/View';
    import proj from 'ol/proj';
    import TileLayer from 'ol/layer/Tile';
    import OSM from 'ol/source/OSM';
    import VectorSource from 'ol/source/Vector';
    import Point from 'ol/geom/Point';
    import Feature from 'ol/Feature';
    import VectorLayer from 'ol/layer/Vector';
    import Style from 'ol/style/Style';
    import WebGLPointsLayer from 'ol/layer/WebGLPoints';

    export default {
        name: 'Earth',
        mounted() {
            this.initMap();
            this.test();
        },
        methods: {
            initMap() {
                window.map = new Map({
                    target: 'ol-container',
                    layers: [
                        new TileLayer({
                            source: new OSM()
                        })
                    ],
                    view: new View({
                        projection: 'EPSG:4326',
                        center: [100, 20],
                        zoom: 2
                    })
                })
            },
            test() {
                let style = {
                    symbol: {
                        symbolType: 'image',
                        size: 3,
                        color: '#ff0000'
                    }
                };
                let features = [];
                for (let i = 0; i < 500000; i++) {
                    let ran = Math.random() * 360;
                    let ran2 = Math.random() * 360;
                    let lon = -180 + ran;
                    let lat = -90 + ran2;
                    let feature = new Feature({
                        geometry: new Point([lon, lat])
                    })
                    features.push(feature);
                }
                let vectorSource = new VectorSource({
                    features: features
                });
                let layer = new WebGLPointsLayer({
                    source: vectorSource,
                    style: style
                })
                map.addLayer(layer);
            }
        }
    }
</script>

<style scoped>
    .earth {
        width: 100%;
        height: 100%;
    }

    #ol-container {
        width: 100%;
        height: 100%;
    }
</style>

效果