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