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官网

   

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
OpenLayers是一个强大的地理信息系统(GIS)库,用于在Web浏览器中展示地图数据。当加载海量数据时,可以采取一些优化策略来提高性能和用户体验。 首先,可以使用数据分块加载的方法。将海量数据划分为多个较小的区域,并按需加载每个区域的数据。这可以减少一次性加载所有数据所需的时间,并避免因加载大量数据而导致浏览器崩溃或运行缓慢。 其次,使用矢量数据代替栅格数据。矢量数据可以以更小的文件大小呈现复杂的地图特征,相比之下,栅格数据可能会导致较大的文件和较长的加载时间。 另外,可以根据用户的视口来动态加载数据。根据用户当前的地图视图,只加载可见区域的数据,而延迟加载其他区域的数据。这样可以减少非必要的数据加载和降低对网络带宽的需求。 还可以利用缓存机制。一旦数据加载到客户端,将其缓存在本地,以便在之后的操作中再次使用。这样可以减少对服务器的请求次数,提高访问速度。 最后,使用数据压缩和优化技术。对数据进行压缩可以减小文件大小,从而减少加载时间。此外,使用一些优化算法,如空间索引和数据剖分,可以提高数据查询和渲染的效率。 综上所述,OpenLayers加载海量数据时,可以采取多种策略来优化性能,提高用户体验。通过数据分块加载、使用矢量数据、动态加载、缓存机制和数据压缩等方法,可以有效地处理大量的地理信息数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值