Openlayers加载海量数据之WebGL

Openlayers加载海量数据之WebGL

       Openlayers 6及以上版本，地图的每个图层都是单独进行渲染的。也就是说有的图层可用Canvas 2D渲染，有的图层可以用WebGL渲染。ol/layer/Vector可以用Canvas 2D来渲染点、线、面，这个图层具有丰富的渲染可能，可以渲染不同的样式。但是对于海量的数据来说，WebGL渲染更快，性能更佳。下面重点介绍Openlayers 中使用webGL渲染海量数据。

 1 加载海量点数据

① 引用WebGLPointsLayer

import WebGLPointsLayer from 'ol/layer/WebGLPoints.js';

② 创建并添加WebGLPointsLayer图层

 let pointsLayer = new WebGLPointsLayer({

    source: new VectorSource({wrapX: true}),

    style: newStyle,

  });

map.addLayer(pointsLayer);

③ 移除并释放图层

map.removeLayer(pointsLayer);

pointsLayer.dispose();

④ 设置点样式

注：若一个图层里需显示多种点图标，可见官网示例：https://openlayers.org/en/latest/examples/icon-sprite-webgl.html

const newStyle = {

symbol: {

      symbolType: 'circle', //图标形状可选值为：circle/triangle/square/image

      size: [               //大小

        'interpolate',

        ['linear'],

        ['get', 'population'],

        40000,

        8,

        2000000,

        28,

      ],

      color: ['match', ['get', 'hover'], 1, '#ff3f3f', '#006688'], //设置hover值为1时的颜色为：#ff3f3f,默认颜色为：#006688

      rotateWithView: false,   //是否随视图旋转

      offset: [0, 0],        //偏移

      opacity: [             //透明度

        'interpolate',

        ['linear'],

        ['get', 'population'],

        40000,

        0.6,

        2000000,

        0.92,

      ],

}

}

⑤ 设置hover样式

let selected = null;

map.on('pointermove', function (ev) {

  if (selected !== null) {

    selected.set('hover', 0);    //

    selected = null;

  }

  map.forEachFeatureAtPixel(ev.pixel, function (feature) {

    feature.set('hover', 1);    //设置hover值，改变颜色

    selected = feature;

    return true;

  });

});

2 加载海量面数据

①  引入 WebGLVectorLayerRenderer，并创建WebGLLayer 类

import WebGLVectorLayerRenderer from 'ol/renderer/webgl/VectorLayer.js';

    (注：创建WebGLLayer  类，设置面填充颜色及边界线的颜色，线宽，透明度等)

class WebGLLayer extends Layer {

  createRenderer() {

    return new WebGLVectorLayerRenderer(this, {

      fill: {

        attributes: {

          color: function (feature) {

            const color = asArray(feature.get('COLOR') || '#eee');

            color[3] = 0.85;

            return packColor(color);

          },

          opacity: function () {

            return 0.6;

          },

        },

      },

      stroke: {

        attributes: {

          color: function (feature) {

            const color = [...asArray(feature.get('COLOR') || '#eee')];

            color.forEach((_, i) => (color[i] = Math.round(color[i] * 0.75))); // darken slightly

            return packColor(color);

          },

          width: function () {

            return 1.5;

          },

          opacity: function () {

            return 1;

          },

        },

      },

    });

  }}

②  创建并添加WebGLLayer

const WebGLLayer= new WebGLLayer({

       source: new VectorSource({wrapX: true})

});

map.addLayer(WebGLLayer)

③  移除并释放图层

map.removeLayer(WebGLLayer);

WebGLLayer.dispose();

以上是openlayer中使用webGL渲染海量点或面图层基本方法（提示：openlayer 6 以上的版本才支持webGL渲染）。详细使用可见openlayer官网