WebGL points / use pushFeatureInBuffer util

Feature objects are converted to geoJSON with the properties
set for rendering.
This commit is contained in:
Olivier Guyot
2019-05-14 14:04:25 +02:00
parent 3a429d3f6c
commit 27e520add4

View File

@@ -5,7 +5,8 @@ import WebGLArrayBuffer from '../../webgl/Buffer';
import {DYNAMIC_DRAW, ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, FLOAT} from '../../webgl'; import {DYNAMIC_DRAW, ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, FLOAT} from '../../webgl';
import {DefaultAttrib} from '../../webgl/Helper'; import {DefaultAttrib} from '../../webgl/Helper';
import GeometryType from '../../geom/GeometryType'; import GeometryType from '../../geom/GeometryType';
import WebGLLayerRenderer, {getBlankTexture} from './Layer'; import WebGLLayerRenderer, {getBlankTexture, pushFeatureInBuffer} from './Layer';
import GeoJSON from '../../format/GeoJSON';
const VERTEX_SHADER = ` const VERTEX_SHADER = `
precision mediump float; precision mediump float;
@@ -229,6 +230,8 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
this.rotateWithViewCallback_ = options.rotateWithViewCallback || function() { this.rotateWithViewCallback_ = options.rotateWithViewCallback || function() {
return false; return false;
}; };
this.geojsonFormat_ = new GeoJSON();
} }
/** /**
@@ -261,6 +264,7 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
const vectorLayer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer()); const vectorLayer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
const vectorSource = vectorLayer.getSource(); const vectorSource = vectorLayer.getSource();
// TODO: get this from somewhere...
const stride = 12; const stride = 12;
this.helper_.prepareDraw(frameState); this.helper_.prepareDraw(frameState);
@@ -280,32 +284,22 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
if (!feature.getGeometry() || feature.getGeometry().getType() !== GeometryType.POINT) { if (!feature.getGeometry() || feature.getGeometry().getType() !== GeometryType.POINT) {
return; return;
} }
const x = this.coordCallback_(feature, 0);
const y = this.coordCallback_(feature, 1);
const u0 = this.texCoordCallback_(feature, 0);
const v0 = this.texCoordCallback_(feature, 1);
const u1 = this.texCoordCallback_(feature, 2);
const v1 = this.texCoordCallback_(feature, 3);
const size = this.sizeCallback_(feature);
const opacity = this.opacityCallback_(feature);
const rotateWithView = this.rotateWithViewCallback_(feature) ? 1 : 0;
const color = this.colorCallback_(feature, this.colorArray_);
const red = color[0];
const green = color[1];
const blue = color[2];
const alpha = color[3];
const baseIndex = this.verticesBuffer_.getArray().length / stride;
this.verticesBuffer_.getArray().push( const geojsonFeature = this.geojsonFormat_.writeFeatureObject(feature);
x, y, -size / 2, -size / 2, u0, v0, opacity, rotateWithView, red, green, blue, alpha,
x, y, +size / 2, -size / 2, u1, v0, opacity, rotateWithView, red, green, blue, alpha, geojsonFeature.geometry.coordinates[0] = this.coordCallback_(feature, 0);
x, y, +size / 2, +size / 2, u1, v1, opacity, rotateWithView, red, green, blue, alpha, geojsonFeature.geometry.coordinates[1] = this.coordCallback_(feature, 1);
x, y, -size / 2, +size / 2, u0, v1, opacity, rotateWithView, red, green, blue, alpha geojsonFeature.properties = geojsonFeature.properties || {};
); geojsonFeature.properties.color = this.colorCallback_(feature, this.colorArray_);
this.indicesBuffer_.getArray().push( geojsonFeature.properties.u0 = this.texCoordCallback_(feature, 0);
baseIndex, baseIndex + 1, baseIndex + 3, geojsonFeature.properties.v0 = this.texCoordCallback_(feature, 1);
baseIndex + 1, baseIndex + 2, baseIndex + 3 geojsonFeature.properties.u1 = this.texCoordCallback_(feature, 2);
); geojsonFeature.properties.v1 = this.texCoordCallback_(feature, 3);
geojsonFeature.properties.size = this.sizeCallback_(feature);
geojsonFeature.properties.opacity = this.opacityCallback_(feature);
geojsonFeature.properties.rotateWithView = this.rotateWithViewCallback_(feature) ? 1 : 0;
pushFeatureInBuffer(this.verticesBuffer_, this.indicesBuffer_, geojsonFeature);
}); });
this.helper_.flushBufferData(ARRAY_BUFFER, this.verticesBuffer_); this.helper_.flushBufferData(ARRAY_BUFFER, this.verticesBuffer_);