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

1、前言

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

2、使用ol.layer.Vector

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

    
    
    WebGL
    
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    
    
    


    

    
        // 创建图层
        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 
            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
            })
        });
    
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    
            source: new ol.source.Vector(),
            style: {
                symbol: {
                    symbolType: 'circle',
                    size: 20,
                    color: 'red'
                }
            }
        });
        // 创建要素
        var source = layer.getSource();
        for (var i = 1; 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
            })
        });