Automated class transform
npx lebab --replace src --transform class
This commit is contained in:
Tim Schaub
+331
-341
@@ -22,399 +22,389 @@ import WebGLBuffer from '../../webgl/Buffer.js';
|
||||
* @param {module:ol/extent~Extent} maxExtent Max extent.
|
||||
* @struct
|
||||
*/
|
||||
const WebGLCircleReplay = function(tolerance, maxExtent) {
|
||||
WebGLReplay.call(this, tolerance, maxExtent);
|
||||
class WebGLCircleReplay {
|
||||
constructor(tolerance, maxExtent) {
|
||||
WebGLReplay.call(this, tolerance, maxExtent);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/render/webgl/circlereplay/defaultshader/Locations}
|
||||
*/
|
||||
this.defaultLocations_ = null;
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/render/webgl/circlereplay/defaultshader/Locations}
|
||||
*/
|
||||
this.defaultLocations_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<Array.<Array.<number>|number>>}
|
||||
*/
|
||||
this.styles_ = [];
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<Array.<Array.<number>|number>>}
|
||||
*/
|
||||
this.styles_ = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.styleIndices_ = [];
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.styleIndices_ = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.radius_ = 0;
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.radius_ = 0;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {{fillColor: (Array.<number>|null),
|
||||
* strokeColor: (Array.<number>|null),
|
||||
* lineDash: Array.<number>,
|
||||
* lineDashOffset: (number|undefined),
|
||||
* lineWidth: (number|undefined),
|
||||
* changed: boolean}|null}
|
||||
*/
|
||||
this.state_ = {
|
||||
fillColor: null,
|
||||
strokeColor: null,
|
||||
lineDash: null,
|
||||
lineDashOffset: undefined,
|
||||
lineWidth: undefined,
|
||||
changed: false
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
* @type {{fillColor: (Array.<number>|null),
|
||||
* strokeColor: (Array.<number>|null),
|
||||
* lineDash: Array.<number>,
|
||||
* lineDashOffset: (number|undefined),
|
||||
* lineWidth: (number|undefined),
|
||||
* changed: boolean}|null}
|
||||
*/
|
||||
this.state_ = {
|
||||
fillColor: null,
|
||||
strokeColor: null,
|
||||
lineDash: null,
|
||||
lineDashOffset: undefined,
|
||||
lineWidth: undefined,
|
||||
changed: false
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
inherits(WebGLCircleReplay, WebGLReplay);
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
*/
|
||||
WebGLCircleReplay.prototype.drawCoordinates_ = function(
|
||||
flatCoordinates, offset, end, stride) {
|
||||
let numVertices = this.vertices.length;
|
||||
let numIndices = this.indices.length;
|
||||
let n = numVertices / 4;
|
||||
let i, ii;
|
||||
for (i = offset, ii = end; i < ii; i += stride) {
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 0;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 1;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 2;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 3;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = n + 1;
|
||||
this.indices[numIndices++] = n + 2;
|
||||
|
||||
this.indices[numIndices++] = n + 2;
|
||||
this.indices[numIndices++] = n + 3;
|
||||
this.indices[numIndices++] = n;
|
||||
|
||||
n += 4;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
*/
|
||||
drawCoordinates_(flatCoordinates, offset, end, stride) {
|
||||
let numVertices = this.vertices.length;
|
||||
let numIndices = this.indices.length;
|
||||
let n = numVertices / 4;
|
||||
let i, ii;
|
||||
for (i = offset, ii = end; i < ii; i += stride) {
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 0;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLCircleReplay.prototype.drawCircle = function(circleGeometry, feature) {
|
||||
const radius = circleGeometry.getRadius();
|
||||
const stride = circleGeometry.getStride();
|
||||
if (radius) {
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
if (this.state_.changed) {
|
||||
this.styleIndices_.push(this.indices.length);
|
||||
this.state_.changed = false;
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 1;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 2;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
this.vertices[numVertices++] = flatCoordinates[i];
|
||||
this.vertices[numVertices++] = flatCoordinates[i + 1];
|
||||
this.vertices[numVertices++] = 3;
|
||||
this.vertices[numVertices++] = this.radius_;
|
||||
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = n + 1;
|
||||
this.indices[numIndices++] = n + 2;
|
||||
|
||||
this.indices[numIndices++] = n + 2;
|
||||
this.indices[numIndices++] = n + 3;
|
||||
this.indices[numIndices++] = n;
|
||||
|
||||
n += 4;
|
||||
}
|
||||
}
|
||||
|
||||
this.radius_ = radius;
|
||||
let flatCoordinates = circleGeometry.getFlatCoordinates();
|
||||
flatCoordinates = translate(flatCoordinates, 0, 2,
|
||||
stride, -this.origin[0], -this.origin[1]);
|
||||
this.drawCoordinates_(flatCoordinates, 0, 2, stride);
|
||||
} else {
|
||||
if (this.state_.changed) {
|
||||
this.styles_.pop();
|
||||
if (this.styles_.length) {
|
||||
const lastState = this.styles_[this.styles_.length - 1];
|
||||
this.state_.fillColor = /** @type {Array.<number>} */ (lastState[0]);
|
||||
this.state_.strokeColor = /** @type {Array.<number>} */ (lastState[1]);
|
||||
this.state_.lineWidth = /** @type {number} */ (lastState[2]);
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawCircle(circleGeometry, feature) {
|
||||
const radius = circleGeometry.getRadius();
|
||||
const stride = circleGeometry.getStride();
|
||||
if (radius) {
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
if (this.state_.changed) {
|
||||
this.styleIndices_.push(this.indices.length);
|
||||
this.state_.changed = false;
|
||||
}
|
||||
|
||||
this.radius_ = radius;
|
||||
let flatCoordinates = circleGeometry.getFlatCoordinates();
|
||||
flatCoordinates = translate(flatCoordinates, 0, 2,
|
||||
stride, -this.origin[0], -this.origin[1]);
|
||||
this.drawCoordinates_(flatCoordinates, 0, 2, stride);
|
||||
} else {
|
||||
if (this.state_.changed) {
|
||||
this.styles_.pop();
|
||||
if (this.styles_.length) {
|
||||
const lastState = this.styles_[this.styles_.length - 1];
|
||||
this.state_.fillColor = /** @type {Array.<number>} */ (lastState[0]);
|
||||
this.state_.strokeColor = /** @type {Array.<number>} */ (lastState[1]);
|
||||
this.state_.lineWidth = /** @type {number} */ (lastState[2]);
|
||||
this.state_.changed = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
**/
|
||||
finish(context) {
|
||||
// create, bind, and populate the vertices buffer
|
||||
this.verticesBuffer = new WebGLBuffer(this.vertices);
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
**/
|
||||
WebGLCircleReplay.prototype.finish = function(context) {
|
||||
// create, bind, and populate the vertices buffer
|
||||
this.verticesBuffer = new WebGLBuffer(this.vertices);
|
||||
// create, bind, and populate the indices buffer
|
||||
this.indicesBuffer = new WebGLBuffer(this.indices);
|
||||
|
||||
// create, bind, and populate the indices buffer
|
||||
this.indicesBuffer = new WebGLBuffer(this.indices);
|
||||
this.startIndices.push(this.indices.length);
|
||||
|
||||
this.startIndices.push(this.indices.length);
|
||||
//Clean up, if there is nothing to draw
|
||||
if (this.styleIndices_.length === 0 && this.styles_.length > 0) {
|
||||
this.styles_ = [];
|
||||
}
|
||||
|
||||
//Clean up, if there is nothing to draw
|
||||
if (this.styleIndices_.length === 0 && this.styles_.length > 0) {
|
||||
this.styles_ = [];
|
||||
this.vertices = null;
|
||||
this.indices = null;
|
||||
}
|
||||
|
||||
this.vertices = null;
|
||||
this.indices = null;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLCircleReplay.prototype.getDeleteResourcesFunction = function(context) {
|
||||
// We only delete our stuff here. The shaders and the program may
|
||||
// be used by other CircleReplay instances (for other layers). And
|
||||
// they will be deleted when disposing of the module:ol/webgl/Context~WebGLContext
|
||||
// object.
|
||||
const verticesBuffer = this.verticesBuffer;
|
||||
const indicesBuffer = this.indicesBuffer;
|
||||
return function() {
|
||||
context.deleteBuffer(verticesBuffer);
|
||||
context.deleteBuffer(indicesBuffer);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLCircleReplay.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
|
||||
// get the program
|
||||
const program = context.getProgram(fragment, vertex);
|
||||
|
||||
// get the locations
|
||||
let locations;
|
||||
if (!this.defaultLocations_) {
|
||||
locations = new Locations(gl, program);
|
||||
this.defaultLocations_ = locations;
|
||||
} else {
|
||||
locations = this.defaultLocations_;
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getDeleteResourcesFunction(context) {
|
||||
// We only delete our stuff here. The shaders and the program may
|
||||
// be used by other CircleReplay instances (for other layers). And
|
||||
// they will be deleted when disposing of the module:ol/webgl/Context~WebGLContext
|
||||
// object.
|
||||
const verticesBuffer = this.verticesBuffer;
|
||||
const indicesBuffer = this.indicesBuffer;
|
||||
return function() {
|
||||
context.deleteBuffer(verticesBuffer);
|
||||
context.deleteBuffer(indicesBuffer);
|
||||
};
|
||||
}
|
||||
|
||||
context.useProgram(program);
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setUpProgram(gl, context, size, pixelRatio) {
|
||||
// get the program
|
||||
const program = context.getProgram(fragment, vertex);
|
||||
|
||||
// enable the vertex attrib arrays
|
||||
gl.enableVertexAttribArray(locations.a_position);
|
||||
gl.vertexAttribPointer(locations.a_position, 2, FLOAT,
|
||||
false, 16, 0);
|
||||
// get the locations
|
||||
let locations;
|
||||
if (!this.defaultLocations_) {
|
||||
locations = new Locations(gl, program);
|
||||
this.defaultLocations_ = locations;
|
||||
} else {
|
||||
locations = this.defaultLocations_;
|
||||
}
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_instruction);
|
||||
gl.vertexAttribPointer(locations.a_instruction, 1, FLOAT,
|
||||
false, 16, 8);
|
||||
context.useProgram(program);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_radius);
|
||||
gl.vertexAttribPointer(locations.a_radius, 1, FLOAT,
|
||||
false, 16, 12);
|
||||
// enable the vertex attrib arrays
|
||||
gl.enableVertexAttribArray(locations.a_position);
|
||||
gl.vertexAttribPointer(locations.a_position, 2, FLOAT,
|
||||
false, 16, 0);
|
||||
|
||||
// Enable renderer specific uniforms.
|
||||
gl.uniform2fv(locations.u_size, size);
|
||||
gl.uniform1f(locations.u_pixelRatio, pixelRatio);
|
||||
gl.enableVertexAttribArray(locations.a_instruction);
|
||||
gl.vertexAttribPointer(locations.a_instruction, 1, FLOAT,
|
||||
false, 16, 8);
|
||||
|
||||
return locations;
|
||||
};
|
||||
gl.enableVertexAttribArray(locations.a_radius);
|
||||
gl.vertexAttribPointer(locations.a_radius, 1, FLOAT,
|
||||
false, 16, 12);
|
||||
|
||||
// Enable renderer specific uniforms.
|
||||
gl.uniform2fv(locations.u_size, size);
|
||||
gl.uniform1f(locations.u_pixelRatio, pixelRatio);
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLCircleReplay.prototype.shutDownProgram = function(gl, locations) {
|
||||
gl.disableVertexAttribArray(locations.a_position);
|
||||
gl.disableVertexAttribArray(locations.a_instruction);
|
||||
gl.disableVertexAttribArray(locations.a_radius);
|
||||
};
|
||||
return locations;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
shutDownProgram(gl, locations) {
|
||||
gl.disableVertexAttribArray(locations.a_position);
|
||||
gl.disableVertexAttribArray(locations.a_instruction);
|
||||
gl.disableVertexAttribArray(locations.a_radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLCircleReplay.prototype.drawReplay = function(gl, context, skippedFeaturesHash, hitDetection) {
|
||||
if (!isEmpty(skippedFeaturesHash)) {
|
||||
this.drawReplaySkipping_(gl, context, skippedFeaturesHash);
|
||||
} else {
|
||||
//Draw by style groups to minimize drawElements() calls.
|
||||
let i, start, end, nextStyle;
|
||||
end = this.startIndices[this.startIndices.length - 1];
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawReplay(gl, context, skippedFeaturesHash, hitDetection) {
|
||||
if (!isEmpty(skippedFeaturesHash)) {
|
||||
this.drawReplaySkipping_(gl, context, skippedFeaturesHash);
|
||||
} else {
|
||||
//Draw by style groups to minimize drawElements() calls.
|
||||
let i, start, end, nextStyle;
|
||||
end = this.startIndices[this.startIndices.length - 1];
|
||||
for (i = this.styleIndices_.length - 1; i >= 0; --i) {
|
||||
start = this.styleIndices_[i];
|
||||
nextStyle = this.styles_[i];
|
||||
this.setFillStyle_(gl, /** @type {Array.<number>} */ (nextStyle[0]));
|
||||
this.setStrokeStyle_(gl, /** @type {Array.<number>} */ (nextStyle[1]),
|
||||
/** @type {number} */ (nextStyle[2]));
|
||||
this.drawElements(gl, context, start, end);
|
||||
end = start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawHitDetectionReplayOneByOne(gl, context, skippedFeaturesHash, featureCallback, opt_hitExtent) {
|
||||
let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex;
|
||||
featureIndex = this.startIndices.length - 2;
|
||||
end = this.startIndices[featureIndex + 1];
|
||||
for (i = this.styleIndices_.length - 1; i >= 0; --i) {
|
||||
start = this.styleIndices_[i];
|
||||
nextStyle = this.styles_[i];
|
||||
this.setFillStyle_(gl, /** @type {Array.<number>} */ (nextStyle[0]));
|
||||
this.setStrokeStyle_(gl, /** @type {Array.<number>} */ (nextStyle[1]),
|
||||
/** @type {number} */ (nextStyle[2]));
|
||||
this.drawElements(gl, context, start, end);
|
||||
end = start;
|
||||
}
|
||||
}
|
||||
};
|
||||
groupStart = this.styleIndices_[i];
|
||||
|
||||
while (featureIndex >= 0 &&
|
||||
this.startIndices[featureIndex] >= groupStart) {
|
||||
start = this.startIndices[featureIndex];
|
||||
feature = this.startIndicesFeature[featureIndex];
|
||||
featureUid = getUid(feature).toString();
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLCircleReplay.prototype.drawHitDetectionReplayOneByOne = function(gl, context, skippedFeaturesHash,
|
||||
featureCallback, opt_hitExtent) {
|
||||
let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex;
|
||||
featureIndex = this.startIndices.length - 2;
|
||||
end = this.startIndices[featureIndex + 1];
|
||||
for (i = this.styleIndices_.length - 1; i >= 0; --i) {
|
||||
nextStyle = this.styles_[i];
|
||||
this.setFillStyle_(gl, /** @type {Array.<number>} */ (nextStyle[0]));
|
||||
this.setStrokeStyle_(gl, /** @type {Array.<number>} */ (nextStyle[1]),
|
||||
/** @type {number} */ (nextStyle[2]));
|
||||
groupStart = this.styleIndices_[i];
|
||||
|
||||
while (featureIndex >= 0 &&
|
||||
this.startIndices[featureIndex] >= groupStart) {
|
||||
start = this.startIndices[featureIndex];
|
||||
feature = this.startIndicesFeature[featureIndex];
|
||||
featureUid = getUid(feature).toString();
|
||||
|
||||
if (skippedFeaturesHash[featureUid] === undefined &&
|
||||
feature.getGeometry() &&
|
||||
(opt_hitExtent === undefined || intersects(
|
||||
/** @type {Array<number>} */ (opt_hitExtent),
|
||||
feature.getGeometry().getExtent()))) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
this.drawElements(gl, context, start, end);
|
||||
|
||||
const result = featureCallback(feature);
|
||||
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
featureIndex--;
|
||||
end = start;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object} skippedFeaturesHash Ids of features to skip.
|
||||
*/
|
||||
WebGLCircleReplay.prototype.drawReplaySkipping_ = function(gl, context, skippedFeaturesHash) {
|
||||
let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex, featureStart;
|
||||
featureIndex = this.startIndices.length - 2;
|
||||
end = start = this.startIndices[featureIndex + 1];
|
||||
for (i = this.styleIndices_.length - 1; i >= 0; --i) {
|
||||
nextStyle = this.styles_[i];
|
||||
this.setFillStyle_(gl, /** @type {Array.<number>} */ (nextStyle[0]));
|
||||
this.setStrokeStyle_(gl, /** @type {Array.<number>} */ (nextStyle[1]),
|
||||
/** @type {number} */ (nextStyle[2]));
|
||||
groupStart = this.styleIndices_[i];
|
||||
|
||||
while (featureIndex >= 0 &&
|
||||
this.startIndices[featureIndex] >= groupStart) {
|
||||
featureStart = this.startIndices[featureIndex];
|
||||
feature = this.startIndicesFeature[featureIndex];
|
||||
featureUid = getUid(feature).toString();
|
||||
|
||||
if (skippedFeaturesHash[featureUid]) {
|
||||
if (start !== end) {
|
||||
if (skippedFeaturesHash[featureUid] === undefined &&
|
||||
feature.getGeometry() &&
|
||||
(opt_hitExtent === undefined || intersects(
|
||||
/** @type {Array<number>} */ (opt_hitExtent),
|
||||
feature.getGeometry().getExtent()))) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
this.drawElements(gl, context, start, end);
|
||||
|
||||
const result = featureCallback(feature);
|
||||
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
end = featureStart;
|
||||
featureIndex--;
|
||||
end = start;
|
||||
}
|
||||
featureIndex--;
|
||||
start = featureStart;
|
||||
}
|
||||
if (start !== end) {
|
||||
this.drawElements(gl, context, start, end);
|
||||
}
|
||||
start = end = groupStart;
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object} skippedFeaturesHash Ids of features to skip.
|
||||
*/
|
||||
drawReplaySkipping_(gl, context, skippedFeaturesHash) {
|
||||
let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex, featureStart;
|
||||
featureIndex = this.startIndices.length - 2;
|
||||
end = start = this.startIndices[featureIndex + 1];
|
||||
for (i = this.styleIndices_.length - 1; i >= 0; --i) {
|
||||
nextStyle = this.styles_[i];
|
||||
this.setFillStyle_(gl, /** @type {Array.<number>} */ (nextStyle[0]));
|
||||
this.setStrokeStyle_(gl, /** @type {Array.<number>} */ (nextStyle[1]),
|
||||
/** @type {number} */ (nextStyle[2]));
|
||||
groupStart = this.styleIndices_[i];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {Array.<number>} color Color.
|
||||
*/
|
||||
WebGLCircleReplay.prototype.setFillStyle_ = function(gl, color) {
|
||||
gl.uniform4fv(this.defaultLocations_.u_fillColor, color);
|
||||
};
|
||||
while (featureIndex >= 0 &&
|
||||
this.startIndices[featureIndex] >= groupStart) {
|
||||
featureStart = this.startIndices[featureIndex];
|
||||
feature = this.startIndicesFeature[featureIndex];
|
||||
featureUid = getUid(feature).toString();
|
||||
|
||||
if (skippedFeaturesHash[featureUid]) {
|
||||
if (start !== end) {
|
||||
this.drawElements(gl, context, start, end);
|
||||
}
|
||||
end = featureStart;
|
||||
}
|
||||
featureIndex--;
|
||||
start = featureStart;
|
||||
}
|
||||
if (start !== end) {
|
||||
this.drawElements(gl, context, start, end);
|
||||
}
|
||||
start = end = groupStart;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {Array.<number>} color Color.
|
||||
* @param {number} lineWidth Line width.
|
||||
*/
|
||||
WebGLCircleReplay.prototype.setStrokeStyle_ = function(gl, color, lineWidth) {
|
||||
gl.uniform4fv(this.defaultLocations_.u_strokeColor, color);
|
||||
gl.uniform1f(this.defaultLocations_.u_lineWidth, lineWidth);
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {Array.<number>} color Color.
|
||||
*/
|
||||
setFillStyle_(gl, color) {
|
||||
gl.uniform4fv(this.defaultLocations_.u_fillColor, color);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {Array.<number>} color Color.
|
||||
* @param {number} lineWidth Line width.
|
||||
*/
|
||||
setStrokeStyle_(gl, color, lineWidth) {
|
||||
gl.uniform4fv(this.defaultLocations_.u_strokeColor, color);
|
||||
gl.uniform1f(this.defaultLocations_.u_lineWidth, lineWidth);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLCircleReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
|
||||
let strokeStyleColor, strokeStyleWidth;
|
||||
if (strokeStyle) {
|
||||
const strokeStyleLineDash = strokeStyle.getLineDash();
|
||||
this.state_.lineDash = strokeStyleLineDash ?
|
||||
strokeStyleLineDash : DEFAULT_LINEDASH;
|
||||
const strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
|
||||
this.state_.lineDashOffset = strokeStyleLineDashOffset ?
|
||||
strokeStyleLineDashOffset : DEFAULT_LINEDASHOFFSET;
|
||||
strokeStyleColor = strokeStyle.getColor();
|
||||
if (!(strokeStyleColor instanceof CanvasGradient) &&
|
||||
!(strokeStyleColor instanceof CanvasPattern)) {
|
||||
strokeStyleColor = asArray(strokeStyleColor).map(function(c, i) {
|
||||
return i != 3 ? c / 255 : c;
|
||||
}) || DEFAULT_STROKESTYLE;
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setFillStrokeStyle(fillStyle, strokeStyle) {
|
||||
let strokeStyleColor, strokeStyleWidth;
|
||||
if (strokeStyle) {
|
||||
const strokeStyleLineDash = strokeStyle.getLineDash();
|
||||
this.state_.lineDash = strokeStyleLineDash ?
|
||||
strokeStyleLineDash : DEFAULT_LINEDASH;
|
||||
const strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
|
||||
this.state_.lineDashOffset = strokeStyleLineDashOffset ?
|
||||
strokeStyleLineDashOffset : DEFAULT_LINEDASHOFFSET;
|
||||
strokeStyleColor = strokeStyle.getColor();
|
||||
if (!(strokeStyleColor instanceof CanvasGradient) &&
|
||||
!(strokeStyleColor instanceof CanvasPattern)) {
|
||||
strokeStyleColor = asArray(strokeStyleColor).map(function(c, i) {
|
||||
return i != 3 ? c / 255 : c;
|
||||
}) || DEFAULT_STROKESTYLE;
|
||||
} else {
|
||||
strokeStyleColor = DEFAULT_STROKESTYLE;
|
||||
}
|
||||
strokeStyleWidth = strokeStyle.getWidth();
|
||||
strokeStyleWidth = strokeStyleWidth !== undefined ?
|
||||
strokeStyleWidth : DEFAULT_LINEWIDTH;
|
||||
} else {
|
||||
strokeStyleColor = DEFAULT_STROKESTYLE;
|
||||
strokeStyleColor = [0, 0, 0, 0];
|
||||
strokeStyleWidth = 0;
|
||||
}
|
||||
let fillStyleColor = fillStyle ? fillStyle.getColor() : [0, 0, 0, 0];
|
||||
if (!(fillStyleColor instanceof CanvasGradient) &&
|
||||
!(fillStyleColor instanceof CanvasPattern)) {
|
||||
fillStyleColor = asArray(fillStyleColor).map(function(c, i) {
|
||||
return i != 3 ? c / 255 : c;
|
||||
}) || DEFAULT_FILLSTYLE;
|
||||
} else {
|
||||
fillStyleColor = DEFAULT_FILLSTYLE;
|
||||
}
|
||||
if (!this.state_.strokeColor || !equals(this.state_.strokeColor, strokeStyleColor) ||
|
||||
!this.state_.fillColor || !equals(this.state_.fillColor, fillStyleColor) ||
|
||||
this.state_.lineWidth !== strokeStyleWidth) {
|
||||
this.state_.changed = true;
|
||||
this.state_.fillColor = fillStyleColor;
|
||||
this.state_.strokeColor = strokeStyleColor;
|
||||
this.state_.lineWidth = strokeStyleWidth;
|
||||
this.styles_.push([fillStyleColor, strokeStyleColor, strokeStyleWidth]);
|
||||
}
|
||||
strokeStyleWidth = strokeStyle.getWidth();
|
||||
strokeStyleWidth = strokeStyleWidth !== undefined ?
|
||||
strokeStyleWidth : DEFAULT_LINEWIDTH;
|
||||
} else {
|
||||
strokeStyleColor = [0, 0, 0, 0];
|
||||
strokeStyleWidth = 0;
|
||||
}
|
||||
let fillStyleColor = fillStyle ? fillStyle.getColor() : [0, 0, 0, 0];
|
||||
if (!(fillStyleColor instanceof CanvasGradient) &&
|
||||
!(fillStyleColor instanceof CanvasPattern)) {
|
||||
fillStyleColor = asArray(fillStyleColor).map(function(c, i) {
|
||||
return i != 3 ? c / 255 : c;
|
||||
}) || DEFAULT_FILLSTYLE;
|
||||
} else {
|
||||
fillStyleColor = DEFAULT_FILLSTYLE;
|
||||
}
|
||||
if (!this.state_.strokeColor || !equals(this.state_.strokeColor, strokeStyleColor) ||
|
||||
!this.state_.fillColor || !equals(this.state_.fillColor, fillStyleColor) ||
|
||||
this.state_.lineWidth !== strokeStyleWidth) {
|
||||
this.state_.changed = true;
|
||||
this.state_.fillColor = fillStyleColor;
|
||||
this.state_.strokeColor = strokeStyleColor;
|
||||
this.state_.lineWidth = strokeStyleWidth;
|
||||
this.styles_.push([fillStyleColor, strokeStyleColor, strokeStyleWidth]);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
inherits(WebGLCircleReplay, WebGLReplay);
|
||||
|
||||
|
||||
export default WebGLCircleReplay;
|
||||
|
||||
+137
-139
@@ -12,160 +12,158 @@ import WebGLBuffer from '../../webgl/Buffer.js';
|
||||
* @param {module:ol/extent~Extent} maxExtent Max extent.
|
||||
* @struct
|
||||
*/
|
||||
const WebGLImageReplay = function(tolerance, maxExtent) {
|
||||
WebGLTextureReplay.call(this, tolerance, maxExtent);
|
||||
class WebGLImageReplay {
|
||||
constructor(tolerance, maxExtent) {
|
||||
WebGLTextureReplay.call(this, tolerance, maxExtent);
|
||||
|
||||
/**
|
||||
* @type {Array.<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>}
|
||||
* @protected
|
||||
*/
|
||||
this.images_ = [];
|
||||
|
||||
/**
|
||||
* @type {Array.<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>}
|
||||
* @protected
|
||||
*/
|
||||
this.hitDetectionImages_ = [];
|
||||
|
||||
/**
|
||||
* @type {Array.<WebGLTexture>}
|
||||
* @private
|
||||
*/
|
||||
this.textures_ = [];
|
||||
|
||||
/**
|
||||
* @type {Array.<WebGLTexture>}
|
||||
* @private
|
||||
*/
|
||||
this.hitDetectionTextures_ = [];
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {Array.<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>}
|
||||
* @protected
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.images_ = [];
|
||||
drawMultiPoint(multiPointGeometry, feature) {
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
const flatCoordinates = multiPointGeometry.getFlatCoordinates();
|
||||
const stride = multiPointGeometry.getStride();
|
||||
this.drawCoordinates(
|
||||
flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {Array.<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>}
|
||||
* @protected
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.hitDetectionImages_ = [];
|
||||
drawPoint(pointGeometry, feature) {
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
const flatCoordinates = pointGeometry.getFlatCoordinates();
|
||||
const stride = pointGeometry.getStride();
|
||||
this.drawCoordinates(
|
||||
flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {Array.<WebGLTexture>}
|
||||
* @private
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.textures_ = [];
|
||||
finish(context) {
|
||||
const gl = context.getGL();
|
||||
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.hitDetectionGroupIndices.push(this.indices.length);
|
||||
|
||||
// create, bind, and populate the vertices buffer
|
||||
this.verticesBuffer = new WebGLBuffer(this.vertices);
|
||||
|
||||
const indices = this.indices;
|
||||
|
||||
// create, bind, and populate the indices buffer
|
||||
this.indicesBuffer = new WebGLBuffer(indices);
|
||||
|
||||
// create textures
|
||||
/** @type {Object.<string, WebGLTexture>} */
|
||||
const texturePerImage = {};
|
||||
|
||||
this.createTextures(this.textures_, this.images_, texturePerImage, gl);
|
||||
|
||||
this.createTextures(this.hitDetectionTextures_, this.hitDetectionImages_,
|
||||
texturePerImage, gl);
|
||||
|
||||
this.images_ = null;
|
||||
this.hitDetectionImages_ = null;
|
||||
WebGLTextureReplay.prototype.finish.call(this, context);
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {Array.<WebGLTexture>}
|
||||
* @private
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.hitDetectionTextures_ = [];
|
||||
setImageStyle(imageStyle) {
|
||||
const anchor = imageStyle.getAnchor();
|
||||
const image = imageStyle.getImage(1);
|
||||
const imageSize = imageStyle.getImageSize();
|
||||
const hitDetectionImage = imageStyle.getHitDetectionImage(1);
|
||||
const opacity = imageStyle.getOpacity();
|
||||
const origin = imageStyle.getOrigin();
|
||||
const rotateWithView = imageStyle.getRotateWithView();
|
||||
const rotation = imageStyle.getRotation();
|
||||
const size = imageStyle.getSize();
|
||||
const scale = imageStyle.getScale();
|
||||
|
||||
};
|
||||
let currentImage;
|
||||
if (this.images_.length === 0) {
|
||||
this.images_.push(image);
|
||||
} else {
|
||||
currentImage = this.images_[this.images_.length - 1];
|
||||
if (getUid(currentImage) != getUid(image)) {
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.images_.push(image);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.hitDetectionImages_.length === 0) {
|
||||
this.hitDetectionImages_.push(hitDetectionImage);
|
||||
} else {
|
||||
currentImage =
|
||||
this.hitDetectionImages_[this.hitDetectionImages_.length - 1];
|
||||
if (getUid(currentImage) != getUid(hitDetectionImage)) {
|
||||
this.hitDetectionGroupIndices.push(this.indices.length);
|
||||
this.hitDetectionImages_.push(hitDetectionImage);
|
||||
}
|
||||
}
|
||||
|
||||
this.anchorX = anchor[0];
|
||||
this.anchorY = anchor[1];
|
||||
this.height = size[1];
|
||||
this.imageHeight = imageSize[1];
|
||||
this.imageWidth = imageSize[0];
|
||||
this.opacity = opacity;
|
||||
this.originX = origin[0];
|
||||
this.originY = origin[1];
|
||||
this.rotation = rotation;
|
||||
this.rotateWithView = rotateWithView;
|
||||
this.scale = scale;
|
||||
this.width = size[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getTextures(opt_all) {
|
||||
return opt_all ? this.textures_.concat(this.hitDetectionTextures_) : this.textures_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getHitDetectionTextures() {
|
||||
return this.hitDetectionTextures_;
|
||||
}
|
||||
}
|
||||
|
||||
inherits(WebGLImageReplay, WebGLTextureReplay);
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImageReplay.prototype.drawMultiPoint = function(multiPointGeometry, feature) {
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
const flatCoordinates = multiPointGeometry.getFlatCoordinates();
|
||||
const stride = multiPointGeometry.getStride();
|
||||
this.drawCoordinates(
|
||||
flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImageReplay.prototype.drawPoint = function(pointGeometry, feature) {
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
const flatCoordinates = pointGeometry.getFlatCoordinates();
|
||||
const stride = pointGeometry.getStride();
|
||||
this.drawCoordinates(
|
||||
flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImageReplay.prototype.finish = function(context) {
|
||||
const gl = context.getGL();
|
||||
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.hitDetectionGroupIndices.push(this.indices.length);
|
||||
|
||||
// create, bind, and populate the vertices buffer
|
||||
this.verticesBuffer = new WebGLBuffer(this.vertices);
|
||||
|
||||
const indices = this.indices;
|
||||
|
||||
// create, bind, and populate the indices buffer
|
||||
this.indicesBuffer = new WebGLBuffer(indices);
|
||||
|
||||
// create textures
|
||||
/** @type {Object.<string, WebGLTexture>} */
|
||||
const texturePerImage = {};
|
||||
|
||||
this.createTextures(this.textures_, this.images_, texturePerImage, gl);
|
||||
|
||||
this.createTextures(this.hitDetectionTextures_, this.hitDetectionImages_,
|
||||
texturePerImage, gl);
|
||||
|
||||
this.images_ = null;
|
||||
this.hitDetectionImages_ = null;
|
||||
WebGLTextureReplay.prototype.finish.call(this, context);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImageReplay.prototype.setImageStyle = function(imageStyle) {
|
||||
const anchor = imageStyle.getAnchor();
|
||||
const image = imageStyle.getImage(1);
|
||||
const imageSize = imageStyle.getImageSize();
|
||||
const hitDetectionImage = imageStyle.getHitDetectionImage(1);
|
||||
const opacity = imageStyle.getOpacity();
|
||||
const origin = imageStyle.getOrigin();
|
||||
const rotateWithView = imageStyle.getRotateWithView();
|
||||
const rotation = imageStyle.getRotation();
|
||||
const size = imageStyle.getSize();
|
||||
const scale = imageStyle.getScale();
|
||||
|
||||
let currentImage;
|
||||
if (this.images_.length === 0) {
|
||||
this.images_.push(image);
|
||||
} else {
|
||||
currentImage = this.images_[this.images_.length - 1];
|
||||
if (getUid(currentImage) != getUid(image)) {
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.images_.push(image);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.hitDetectionImages_.length === 0) {
|
||||
this.hitDetectionImages_.push(hitDetectionImage);
|
||||
} else {
|
||||
currentImage =
|
||||
this.hitDetectionImages_[this.hitDetectionImages_.length - 1];
|
||||
if (getUid(currentImage) != getUid(hitDetectionImage)) {
|
||||
this.hitDetectionGroupIndices.push(this.indices.length);
|
||||
this.hitDetectionImages_.push(hitDetectionImage);
|
||||
}
|
||||
}
|
||||
|
||||
this.anchorX = anchor[0];
|
||||
this.anchorY = anchor[1];
|
||||
this.height = size[1];
|
||||
this.imageHeight = imageSize[1];
|
||||
this.imageWidth = imageSize[0];
|
||||
this.opacity = opacity;
|
||||
this.originX = origin[0];
|
||||
this.originY = origin[1];
|
||||
this.rotation = rotation;
|
||||
this.rotateWithView = rotateWithView;
|
||||
this.scale = scale;
|
||||
this.width = size[0];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImageReplay.prototype.getTextures = function(opt_all) {
|
||||
return opt_all ? this.textures_.concat(this.hitDetectionTextures_) : this.textures_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImageReplay.prototype.getHitDetectionTextures = function() {
|
||||
return this.hitDetectionTextures_;
|
||||
};
|
||||
export default WebGLImageReplay;
|
||||
|
||||
+329
-340
@@ -20,383 +20,372 @@ import WebGLReplayGroup from '../webgl/ReplayGroup.js';
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @struct
|
||||
*/
|
||||
const WebGLImmediateRenderer = function(context, center, resolution, rotation, size, extent, pixelRatio) {
|
||||
VectorContext.call(this);
|
||||
class WebGLImmediateRenderer {
|
||||
constructor(context, center, resolution, rotation, size, extent, pixelRatio) {
|
||||
VectorContext.call(this);
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.context_ = context;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.center_ = center;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.extent_ = extent;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.pixelRatio_ = pixelRatio;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.size_ = size;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.rotation_ = rotation;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.resolution_ = resolution;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Image}
|
||||
*/
|
||||
this.imageStyle_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Fill}
|
||||
*/
|
||||
this.fillStyle_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Stroke}
|
||||
*/
|
||||
this.strokeStyle_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Text}
|
||||
*/
|
||||
this.textStyle_ = null;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {module:ol/render/webgl/ReplayGroup} replayGroup Replay group.
|
||||
* @param {module:ol/geom/Geometry|module:ol/render/Feature} geometry Geometry.
|
||||
* @private
|
||||
*/
|
||||
this.context_ = context;
|
||||
drawText_(replayGroup, geometry) {
|
||||
const context = this.context_;
|
||||
const replay = /** @type {module:ol/render/webgl/TextReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.TEXT));
|
||||
replay.setTextStyle(this.textStyle_);
|
||||
replay.drawText(geometry, null);
|
||||
replay.finish(context);
|
||||
// default colors
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Set the rendering style. Note that since this is an immediate rendering API,
|
||||
* any `zIndex` on the provided style will be ignored.
|
||||
*
|
||||
* @param {module:ol/style/Style} style The rendering style.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
this.center_ = center;
|
||||
setStyle(style) {
|
||||
this.setFillStrokeStyle(style.getFill(), style.getStroke());
|
||||
this.setImageStyle(style.getImage());
|
||||
this.setTextStyle(style.getText());
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Render a geometry into the canvas. Call
|
||||
* {@link ol/render/webgl/Immediate#setStyle} first to set the rendering style.
|
||||
*
|
||||
* @param {module:ol/geom/Geometry|module:ol/render/Feature} geometry The geometry to render.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
this.extent_ = extent;
|
||||
drawGeometry(geometry) {
|
||||
const type = geometry.getType();
|
||||
switch (type) {
|
||||
case GeometryType.POINT:
|
||||
this.drawPoint(/** @type {module:ol/geom/Point} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.LINE_STRING:
|
||||
this.drawLineString(/** @type {module:ol/geom/LineString} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.POLYGON:
|
||||
this.drawPolygon(/** @type {module:ol/geom/Polygon} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.MULTI_POINT:
|
||||
this.drawMultiPoint(/** @type {module:ol/geom/MultiPoint} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.MULTI_LINE_STRING:
|
||||
this.drawMultiLineString(/** @type {module:ol/geom/MultiLineString} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.MULTI_POLYGON:
|
||||
this.drawMultiPolygon(/** @type {module:ol/geom/MultiPolygon} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.GEOMETRY_COLLECTION:
|
||||
this.drawGeometryCollection(/** @type {module:ol/geom/GeometryCollection} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.CIRCLE:
|
||||
this.drawCircle(/** @type {module:ol/geom/Circle} */ (geometry), null);
|
||||
break;
|
||||
default:
|
||||
// pass
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inheritDoc
|
||||
* @api
|
||||
*/
|
||||
this.pixelRatio_ = pixelRatio;
|
||||
drawFeature(feature, style) {
|
||||
const geometry = style.getGeometryFunction()(feature);
|
||||
if (!geometry || !intersects(this.extent_, geometry.getExtent())) {
|
||||
return;
|
||||
}
|
||||
this.setStyle(style);
|
||||
this.drawGeometry(geometry);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.size_ = size;
|
||||
drawGeometryCollection(geometry, data) {
|
||||
const geometries = geometry.getGeometriesArray();
|
||||
let i, ii;
|
||||
for (i = 0, ii = geometries.length; i < ii; ++i) {
|
||||
this.drawGeometry(geometries[i]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.rotation_ = rotation;
|
||||
drawPoint(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/ImageReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.IMAGE));
|
||||
replay.setImageStyle(this.imageStyle_);
|
||||
replay.drawPoint(geometry, data);
|
||||
replay.finish(context);
|
||||
// default colors
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.resolution_ = resolution;
|
||||
drawMultiPoint(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/ImageReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.IMAGE));
|
||||
replay.setImageStyle(this.imageStyle_);
|
||||
replay.drawMultiPoint(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Image}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.imageStyle_ = null;
|
||||
drawLineString(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/LineStringReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.LINE_STRING));
|
||||
replay.setFillStrokeStyle(null, this.strokeStyle_);
|
||||
replay.drawLineString(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Fill}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.fillStyle_ = null;
|
||||
drawMultiLineString(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/LineStringReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.LINE_STRING));
|
||||
replay.setFillStrokeStyle(null, this.strokeStyle_);
|
||||
replay.drawMultiLineString(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Stroke}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.strokeStyle_ = null;
|
||||
drawPolygon(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/PolygonReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.POLYGON));
|
||||
replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
|
||||
replay.drawPolygon(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Text}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.textStyle_ = null;
|
||||
drawMultiPolygon(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/PolygonReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.POLYGON));
|
||||
replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
|
||||
replay.drawMultiPolygon(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
};
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawCircle(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/CircleReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.CIRCLE));
|
||||
replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
|
||||
replay.drawCircle(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setImageStyle(imageStyle) {
|
||||
this.imageStyle_ = imageStyle;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setFillStrokeStyle(fillStyle, strokeStyle) {
|
||||
this.fillStyle_ = fillStyle;
|
||||
this.strokeStyle_ = strokeStyle;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setTextStyle(textStyle) {
|
||||
this.textStyle_ = textStyle;
|
||||
}
|
||||
}
|
||||
|
||||
inherits(WebGLImmediateRenderer, VectorContext);
|
||||
|
||||
|
||||
/**
|
||||
* @param {module:ol/render/webgl/ReplayGroup} replayGroup Replay group.
|
||||
* @param {module:ol/geom/Geometry|module:ol/render/Feature} geometry Geometry.
|
||||
* @private
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.drawText_ = function(replayGroup, geometry) {
|
||||
const context = this.context_;
|
||||
const replay = /** @type {module:ol/render/webgl/TextReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.TEXT));
|
||||
replay.setTextStyle(this.textStyle_);
|
||||
replay.drawText(geometry, null);
|
||||
replay.finish(context);
|
||||
// default colors
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the rendering style. Note that since this is an immediate rendering API,
|
||||
* any `zIndex` on the provided style will be ignored.
|
||||
*
|
||||
* @param {module:ol/style/Style} style The rendering style.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.setStyle = function(style) {
|
||||
this.setFillStrokeStyle(style.getFill(), style.getStroke());
|
||||
this.setImageStyle(style.getImage());
|
||||
this.setTextStyle(style.getText());
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Render a geometry into the canvas. Call
|
||||
* {@link ol/render/webgl/Immediate#setStyle} first to set the rendering style.
|
||||
*
|
||||
* @param {module:ol/geom/Geometry|module:ol/render/Feature} geometry The geometry to render.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.drawGeometry = function(geometry) {
|
||||
const type = geometry.getType();
|
||||
switch (type) {
|
||||
case GeometryType.POINT:
|
||||
this.drawPoint(/** @type {module:ol/geom/Point} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.LINE_STRING:
|
||||
this.drawLineString(/** @type {module:ol/geom/LineString} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.POLYGON:
|
||||
this.drawPolygon(/** @type {module:ol/geom/Polygon} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.MULTI_POINT:
|
||||
this.drawMultiPoint(/** @type {module:ol/geom/MultiPoint} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.MULTI_LINE_STRING:
|
||||
this.drawMultiLineString(/** @type {module:ol/geom/MultiLineString} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.MULTI_POLYGON:
|
||||
this.drawMultiPolygon(/** @type {module:ol/geom/MultiPolygon} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.GEOMETRY_COLLECTION:
|
||||
this.drawGeometryCollection(/** @type {module:ol/geom/GeometryCollection} */ (geometry), null);
|
||||
break;
|
||||
case GeometryType.CIRCLE:
|
||||
this.drawCircle(/** @type {module:ol/geom/Circle} */ (geometry), null);
|
||||
break;
|
||||
default:
|
||||
// pass
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
* @api
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.drawFeature = function(feature, style) {
|
||||
const geometry = style.getGeometryFunction()(feature);
|
||||
if (!geometry || !intersects(this.extent_, geometry.getExtent())) {
|
||||
return;
|
||||
}
|
||||
this.setStyle(style);
|
||||
this.drawGeometry(geometry);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.drawGeometryCollection = function(geometry, data) {
|
||||
const geometries = geometry.getGeometriesArray();
|
||||
let i, ii;
|
||||
for (i = 0, ii = geometries.length; i < ii; ++i) {
|
||||
this.drawGeometry(geometries[i]);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.drawPoint = function(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/ImageReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.IMAGE));
|
||||
replay.setImageStyle(this.imageStyle_);
|
||||
replay.drawPoint(geometry, data);
|
||||
replay.finish(context);
|
||||
// default colors
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.drawMultiPoint = function(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/ImageReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.IMAGE));
|
||||
replay.setImageStyle(this.imageStyle_);
|
||||
replay.drawMultiPoint(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.drawLineString = function(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/LineStringReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.LINE_STRING));
|
||||
replay.setFillStrokeStyle(null, this.strokeStyle_);
|
||||
replay.drawLineString(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.drawMultiLineString = function(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/LineStringReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.LINE_STRING));
|
||||
replay.setFillStrokeStyle(null, this.strokeStyle_);
|
||||
replay.drawMultiLineString(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.drawPolygon = function(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/PolygonReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.POLYGON));
|
||||
replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
|
||||
replay.drawPolygon(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.drawMultiPolygon = function(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/PolygonReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.POLYGON));
|
||||
replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
|
||||
replay.drawMultiPolygon(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.drawCircle = function(geometry, data) {
|
||||
const context = this.context_;
|
||||
const replayGroup = new WebGLReplayGroup(1, this.extent_);
|
||||
const replay = /** @type {module:ol/render/webgl/CircleReplay} */ (
|
||||
replayGroup.getReplay(0, ReplayType.CIRCLE));
|
||||
replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
|
||||
replay.drawCircle(geometry, data);
|
||||
replay.finish(context);
|
||||
const opacity = 1;
|
||||
const skippedFeatures = {};
|
||||
let featureCallback;
|
||||
const oneByOne = false;
|
||||
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
|
||||
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
|
||||
oneByOne);
|
||||
replay.getDeleteResourcesFunction(context)();
|
||||
|
||||
if (this.textStyle_) {
|
||||
this.drawText_(replayGroup, geometry);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.setImageStyle = function(imageStyle) {
|
||||
this.imageStyle_ = imageStyle;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
|
||||
this.fillStyle_ = fillStyle;
|
||||
this.strokeStyle_ = strokeStyle;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLImmediateRenderer.prototype.setTextStyle = function(textStyle) {
|
||||
this.textStyle_ = textStyle;
|
||||
};
|
||||
export default WebGLImmediateRenderer;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+320
-319
@@ -23,342 +23,343 @@ import {ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, TRIANGLES,
|
||||
* @param {module:ol/extent~Extent} maxExtent Max extent.
|
||||
* @struct
|
||||
*/
|
||||
const WebGLReplay = function(tolerance, maxExtent) {
|
||||
VectorContext.call(this);
|
||||
class WebGLReplay {
|
||||
constructor(tolerance, maxExtent) {
|
||||
VectorContext.call(this);
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number}
|
||||
*/
|
||||
this.tolerance = tolerance;
|
||||
/**
|
||||
* @protected
|
||||
* @type {number}
|
||||
*/
|
||||
this.tolerance = tolerance;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @const
|
||||
* @type {module:ol/extent~Extent}
|
||||
*/
|
||||
this.maxExtent = maxExtent;
|
||||
/**
|
||||
* @protected
|
||||
* @const
|
||||
* @type {module:ol/extent~Extent}
|
||||
*/
|
||||
this.maxExtent = maxExtent;
|
||||
|
||||
/**
|
||||
* The origin of the coordinate system for the point coordinates sent to
|
||||
* the GPU. To eliminate jitter caused by precision problems in the GPU
|
||||
* we use the "Rendering Relative to Eye" technique described in the "3D
|
||||
* Engine Design for Virtual Globes" book.
|
||||
* @protected
|
||||
* @type {module:ol/coordinate~Coordinate}
|
||||
*/
|
||||
this.origin = getCenter(maxExtent);
|
||||
/**
|
||||
* The origin of the coordinate system for the point coordinates sent to
|
||||
* the GPU. To eliminate jitter caused by precision problems in the GPU
|
||||
* we use the "Rendering Relative to Eye" technique described in the "3D
|
||||
* Engine Design for Virtual Globes" book.
|
||||
* @protected
|
||||
* @type {module:ol/coordinate~Coordinate}
|
||||
*/
|
||||
this.origin = getCenter(maxExtent);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/transform~Transform}
|
||||
*/
|
||||
this.projectionMatrix_ = createTransform();
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/transform~Transform}
|
||||
*/
|
||||
this.projectionMatrix_ = createTransform();
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/transform~Transform}
|
||||
*/
|
||||
this.offsetRotateMatrix_ = createTransform();
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/transform~Transform}
|
||||
*/
|
||||
this.offsetRotateMatrix_ = createTransform();
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/transform~Transform}
|
||||
*/
|
||||
this.offsetScaleMatrix_ = createTransform();
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/transform~Transform}
|
||||
*/
|
||||
this.offsetScaleMatrix_ = createTransform();
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.tmpMat4_ = create();
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.tmpMat4_ = create();
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.indices = [];
|
||||
/**
|
||||
* @protected
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.indices = [];
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {?module:ol/webgl/Buffer}
|
||||
*/
|
||||
this.indicesBuffer = null;
|
||||
/**
|
||||
* @protected
|
||||
* @type {?module:ol/webgl/Buffer}
|
||||
*/
|
||||
this.indicesBuffer = null;
|
||||
|
||||
/**
|
||||
* Start index per feature (the index).
|
||||
* @protected
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.startIndices = [];
|
||||
/**
|
||||
* Start index per feature (the index).
|
||||
* @protected
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.startIndices = [];
|
||||
|
||||
/**
|
||||
* Start index per feature (the feature).
|
||||
* @protected
|
||||
* @type {Array.<module:ol/Feature|module:ol/render/Feature>}
|
||||
*/
|
||||
this.startIndicesFeature = [];
|
||||
/**
|
||||
* Start index per feature (the feature).
|
||||
* @protected
|
||||
* @type {Array.<module:ol/Feature|module:ol/render/Feature>}
|
||||
*/
|
||||
this.startIndicesFeature = [];
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.vertices = [];
|
||||
/**
|
||||
* @protected
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.vertices = [];
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {?module:ol/webgl/Buffer}
|
||||
*/
|
||||
this.verticesBuffer = null;
|
||||
/**
|
||||
* @protected
|
||||
* @type {?module:ol/webgl/Buffer}
|
||||
*/
|
||||
this.verticesBuffer = null;
|
||||
|
||||
/**
|
||||
* Optional parameter for PolygonReplay instances.
|
||||
* @protected
|
||||
* @type {module:ol/render/webgl/LineStringReplay|undefined}
|
||||
*/
|
||||
this.lineStringReplay = undefined;
|
||||
/**
|
||||
* Optional parameter for PolygonReplay instances.
|
||||
* @protected
|
||||
* @type {module:ol/render/webgl/LineStringReplay|undefined}
|
||||
*/
|
||||
this.lineStringReplay = undefined;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {module:ol/webgl/Context} context WebGL context.
|
||||
* @return {function()} Delete resources function.
|
||||
*/
|
||||
getDeleteResourcesFunction(context) {}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
*/
|
||||
finish(context) {}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {module:ol/render/webgl/circlereplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/linestringreplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/polygonreplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/texturereplay/defaultshader/Locations} Locations.
|
||||
*/
|
||||
setUpProgram(gl, context, size, pixelRatio) {}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/render/webgl/circlereplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/linestringreplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/polygonreplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/texturereplay/defaultshader/Locations} locations Locations.
|
||||
*/
|
||||
shutDownProgram(gl, locations) {}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {boolean} hitDetection Hit detection mode.
|
||||
*/
|
||||
drawReplay(gl, context, skippedFeaturesHash, hitDetection) {}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} featureCallback Feature callback.
|
||||
* @param {module:ol/extent~Extent=} opt_hitExtent Hit extent: Only features intersecting this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
drawHitDetectionReplayOneByOne(gl, context, skippedFeaturesHash, featureCallback, opt_hitExtent) {}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} featureCallback Feature callback.
|
||||
* @param {boolean} oneByOne Draw features one-by-one for the hit-detecion.
|
||||
* @param {module:ol/extent~Extent=} opt_hitExtent Hit extent: Only features intersecting
|
||||
* this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
drawHitDetectionReplay(gl, context, skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent) {
|
||||
if (!oneByOne) {
|
||||
// draw all hit-detection features in "once" (by texture group)
|
||||
return this.drawHitDetectionReplayAll(gl, context,
|
||||
skippedFeaturesHash, featureCallback);
|
||||
} else {
|
||||
// draw hit-detection features one by one
|
||||
return this.drawHitDetectionReplayOneByOne(gl, context,
|
||||
skippedFeaturesHash, featureCallback, opt_hitExtent);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} featureCallback Feature callback.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
drawHitDetectionReplayAll(gl, context, skippedFeaturesHash, featureCallback) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
this.drawReplay(gl, context, skippedFeaturesHash, true);
|
||||
|
||||
const result = featureCallback(null);
|
||||
if (result) {
|
||||
return result;
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/coordinate~Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} featureCallback Feature callback.
|
||||
* @param {boolean} oneByOne Draw features one-by-one for the hit-detecion.
|
||||
* @param {module:ol/extent~Extent=} opt_hitExtent Hit extent: Only features intersecting
|
||||
* this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
replay(
|
||||
context,
|
||||
center,
|
||||
resolution,
|
||||
rotation,
|
||||
size,
|
||||
pixelRatio,
|
||||
opacity,
|
||||
skippedFeaturesHash,
|
||||
featureCallback,
|
||||
oneByOne,
|
||||
opt_hitExtent
|
||||
) {
|
||||
const gl = context.getGL();
|
||||
let tmpStencil, tmpStencilFunc, tmpStencilMaskVal, tmpStencilRef, tmpStencilMask,
|
||||
tmpStencilOpFail, tmpStencilOpPass, tmpStencilOpZFail;
|
||||
|
||||
if (this.lineStringReplay) {
|
||||
tmpStencil = gl.isEnabled(gl.STENCIL_TEST);
|
||||
tmpStencilFunc = gl.getParameter(gl.STENCIL_FUNC);
|
||||
tmpStencilMaskVal = gl.getParameter(gl.STENCIL_VALUE_MASK);
|
||||
tmpStencilRef = gl.getParameter(gl.STENCIL_REF);
|
||||
tmpStencilMask = gl.getParameter(gl.STENCIL_WRITEMASK);
|
||||
tmpStencilOpFail = gl.getParameter(gl.STENCIL_FAIL);
|
||||
tmpStencilOpPass = gl.getParameter(gl.STENCIL_PASS_DEPTH_PASS);
|
||||
tmpStencilOpZFail = gl.getParameter(gl.STENCIL_PASS_DEPTH_FAIL);
|
||||
|
||||
gl.enable(gl.STENCIL_TEST);
|
||||
gl.clear(gl.STENCIL_BUFFER_BIT);
|
||||
gl.stencilMask(255);
|
||||
gl.stencilFunc(gl.ALWAYS, 1, 255);
|
||||
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
|
||||
|
||||
this.lineStringReplay.replay(context,
|
||||
center, resolution, rotation, size, pixelRatio,
|
||||
opacity, skippedFeaturesHash,
|
||||
featureCallback, oneByOne, opt_hitExtent);
|
||||
|
||||
gl.stencilMask(0);
|
||||
gl.stencilFunc(gl.NOTEQUAL, 1, 255);
|
||||
}
|
||||
|
||||
context.bindBuffer(ARRAY_BUFFER, this.verticesBuffer);
|
||||
|
||||
context.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
|
||||
|
||||
const locations = this.setUpProgram(gl, context, size, pixelRatio);
|
||||
|
||||
// set the "uniform" values
|
||||
const projectionMatrix = resetTransform(this.projectionMatrix_);
|
||||
scaleTransform(projectionMatrix, 2 / (resolution * size[0]), 2 / (resolution * size[1]));
|
||||
rotateTransform(projectionMatrix, -rotation);
|
||||
translateTransform(projectionMatrix, -(center[0] - this.origin[0]), -(center[1] - this.origin[1]));
|
||||
|
||||
const offsetScaleMatrix = resetTransform(this.offsetScaleMatrix_);
|
||||
scaleTransform(offsetScaleMatrix, 2 / size[0], 2 / size[1]);
|
||||
|
||||
const offsetRotateMatrix = resetTransform(this.offsetRotateMatrix_);
|
||||
if (rotation !== 0) {
|
||||
rotateTransform(offsetRotateMatrix, -rotation);
|
||||
}
|
||||
|
||||
gl.uniformMatrix4fv(locations.u_projectionMatrix, false,
|
||||
fromTransform(this.tmpMat4_, projectionMatrix));
|
||||
gl.uniformMatrix4fv(locations.u_offsetScaleMatrix, false,
|
||||
fromTransform(this.tmpMat4_, offsetScaleMatrix));
|
||||
gl.uniformMatrix4fv(locations.u_offsetRotateMatrix, false,
|
||||
fromTransform(this.tmpMat4_, offsetRotateMatrix));
|
||||
gl.uniform1f(locations.u_opacity, opacity);
|
||||
|
||||
// draw!
|
||||
let result;
|
||||
if (featureCallback === undefined) {
|
||||
this.drawReplay(gl, context, skippedFeaturesHash, false);
|
||||
} else {
|
||||
// draw feature by feature for the hit-detection
|
||||
result = this.drawHitDetectionReplay(gl, context, skippedFeaturesHash,
|
||||
featureCallback, oneByOne, opt_hitExtent);
|
||||
}
|
||||
|
||||
// disable the vertex attrib arrays
|
||||
this.shutDownProgram(gl, locations);
|
||||
|
||||
if (this.lineStringReplay) {
|
||||
if (!tmpStencil) {
|
||||
gl.disable(gl.STENCIL_TEST);
|
||||
}
|
||||
gl.clear(gl.STENCIL_BUFFER_BIT);
|
||||
gl.stencilFunc(/** @type {number} */ (tmpStencilFunc),
|
||||
/** @type {number} */ (tmpStencilRef), /** @type {number} */ (tmpStencilMaskVal));
|
||||
gl.stencilMask(/** @type {number} */ (tmpStencilMask));
|
||||
gl.stencilOp(/** @type {number} */ (tmpStencilOpFail),
|
||||
/** @type {number} */ (tmpStencilOpZFail), /** @type {number} */ (tmpStencilOpPass));
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {number} start Start index.
|
||||
* @param {number} end End index.
|
||||
*/
|
||||
drawElements(gl, context, start, end) {
|
||||
const elementType = context.hasOESElementIndexUint ?
|
||||
UNSIGNED_INT : UNSIGNED_SHORT;
|
||||
const elementSize = context.hasOESElementIndexUint ? 4 : 2;
|
||||
|
||||
const numItems = end - start;
|
||||
const offsetInBytes = start * elementSize;
|
||||
gl.drawElements(TRIANGLES, numItems, elementType, offsetInBytes);
|
||||
}
|
||||
}
|
||||
|
||||
inherits(WebGLReplay, VectorContext);
|
||||
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {module:ol/webgl/Context} context WebGL context.
|
||||
* @return {function()} Delete resources function.
|
||||
*/
|
||||
WebGLReplay.prototype.getDeleteResourcesFunction = function(context) {};
|
||||
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
*/
|
||||
WebGLReplay.prototype.finish = function(context) {};
|
||||
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {module:ol/render/webgl/circlereplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/linestringreplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/polygonreplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/texturereplay/defaultshader/Locations} Locations.
|
||||
*/
|
||||
WebGLReplay.prototype.setUpProgram = function(gl, context, size, pixelRatio) {};
|
||||
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/render/webgl/circlereplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/linestringreplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/polygonreplay/defaultshader/Locations|
|
||||
module:ol/render/webgl/texturereplay/defaultshader/Locations} locations Locations.
|
||||
*/
|
||||
WebGLReplay.prototype.shutDownProgram = function(gl, locations) {};
|
||||
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {boolean} hitDetection Hit detection mode.
|
||||
*/
|
||||
WebGLReplay.prototype.drawReplay = function(gl, context, skippedFeaturesHash, hitDetection) {};
|
||||
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} featureCallback Feature callback.
|
||||
* @param {module:ol/extent~Extent=} opt_hitExtent Hit extent: Only features intersecting this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
WebGLReplay.prototype.drawHitDetectionReplayOneByOne = function(gl, context, skippedFeaturesHash, featureCallback, opt_hitExtent) {};
|
||||
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} featureCallback Feature callback.
|
||||
* @param {boolean} oneByOne Draw features one-by-one for the hit-detecion.
|
||||
* @param {module:ol/extent~Extent=} opt_hitExtent Hit extent: Only features intersecting
|
||||
* this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
WebGLReplay.prototype.drawHitDetectionReplay = function(gl, context, skippedFeaturesHash,
|
||||
featureCallback, oneByOne, opt_hitExtent) {
|
||||
if (!oneByOne) {
|
||||
// draw all hit-detection features in "once" (by texture group)
|
||||
return this.drawHitDetectionReplayAll(gl, context,
|
||||
skippedFeaturesHash, featureCallback);
|
||||
} else {
|
||||
// draw hit-detection features one by one
|
||||
return this.drawHitDetectionReplayOneByOne(gl, context,
|
||||
skippedFeaturesHash, featureCallback, opt_hitExtent);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} featureCallback Feature callback.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
WebGLReplay.prototype.drawHitDetectionReplayAll = function(gl, context, skippedFeaturesHash,
|
||||
featureCallback) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
this.drawReplay(gl, context, skippedFeaturesHash, true);
|
||||
|
||||
const result = featureCallback(null);
|
||||
if (result) {
|
||||
return result;
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/coordinate~Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} featureCallback Feature callback.
|
||||
* @param {boolean} oneByOne Draw features one-by-one for the hit-detecion.
|
||||
* @param {module:ol/extent~Extent=} opt_hitExtent Hit extent: Only features intersecting
|
||||
* this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
WebGLReplay.prototype.replay = function(context,
|
||||
center, resolution, rotation, size, pixelRatio,
|
||||
opacity, skippedFeaturesHash,
|
||||
featureCallback, oneByOne, opt_hitExtent) {
|
||||
const gl = context.getGL();
|
||||
let tmpStencil, tmpStencilFunc, tmpStencilMaskVal, tmpStencilRef, tmpStencilMask,
|
||||
tmpStencilOpFail, tmpStencilOpPass, tmpStencilOpZFail;
|
||||
|
||||
if (this.lineStringReplay) {
|
||||
tmpStencil = gl.isEnabled(gl.STENCIL_TEST);
|
||||
tmpStencilFunc = gl.getParameter(gl.STENCIL_FUNC);
|
||||
tmpStencilMaskVal = gl.getParameter(gl.STENCIL_VALUE_MASK);
|
||||
tmpStencilRef = gl.getParameter(gl.STENCIL_REF);
|
||||
tmpStencilMask = gl.getParameter(gl.STENCIL_WRITEMASK);
|
||||
tmpStencilOpFail = gl.getParameter(gl.STENCIL_FAIL);
|
||||
tmpStencilOpPass = gl.getParameter(gl.STENCIL_PASS_DEPTH_PASS);
|
||||
tmpStencilOpZFail = gl.getParameter(gl.STENCIL_PASS_DEPTH_FAIL);
|
||||
|
||||
gl.enable(gl.STENCIL_TEST);
|
||||
gl.clear(gl.STENCIL_BUFFER_BIT);
|
||||
gl.stencilMask(255);
|
||||
gl.stencilFunc(gl.ALWAYS, 1, 255);
|
||||
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
|
||||
|
||||
this.lineStringReplay.replay(context,
|
||||
center, resolution, rotation, size, pixelRatio,
|
||||
opacity, skippedFeaturesHash,
|
||||
featureCallback, oneByOne, opt_hitExtent);
|
||||
|
||||
gl.stencilMask(0);
|
||||
gl.stencilFunc(gl.NOTEQUAL, 1, 255);
|
||||
}
|
||||
|
||||
context.bindBuffer(ARRAY_BUFFER, this.verticesBuffer);
|
||||
|
||||
context.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
|
||||
|
||||
const locations = this.setUpProgram(gl, context, size, pixelRatio);
|
||||
|
||||
// set the "uniform" values
|
||||
const projectionMatrix = resetTransform(this.projectionMatrix_);
|
||||
scaleTransform(projectionMatrix, 2 / (resolution * size[0]), 2 / (resolution * size[1]));
|
||||
rotateTransform(projectionMatrix, -rotation);
|
||||
translateTransform(projectionMatrix, -(center[0] - this.origin[0]), -(center[1] - this.origin[1]));
|
||||
|
||||
const offsetScaleMatrix = resetTransform(this.offsetScaleMatrix_);
|
||||
scaleTransform(offsetScaleMatrix, 2 / size[0], 2 / size[1]);
|
||||
|
||||
const offsetRotateMatrix = resetTransform(this.offsetRotateMatrix_);
|
||||
if (rotation !== 0) {
|
||||
rotateTransform(offsetRotateMatrix, -rotation);
|
||||
}
|
||||
|
||||
gl.uniformMatrix4fv(locations.u_projectionMatrix, false,
|
||||
fromTransform(this.tmpMat4_, projectionMatrix));
|
||||
gl.uniformMatrix4fv(locations.u_offsetScaleMatrix, false,
|
||||
fromTransform(this.tmpMat4_, offsetScaleMatrix));
|
||||
gl.uniformMatrix4fv(locations.u_offsetRotateMatrix, false,
|
||||
fromTransform(this.tmpMat4_, offsetRotateMatrix));
|
||||
gl.uniform1f(locations.u_opacity, opacity);
|
||||
|
||||
// draw!
|
||||
let result;
|
||||
if (featureCallback === undefined) {
|
||||
this.drawReplay(gl, context, skippedFeaturesHash, false);
|
||||
} else {
|
||||
// draw feature by feature for the hit-detection
|
||||
result = this.drawHitDetectionReplay(gl, context, skippedFeaturesHash,
|
||||
featureCallback, oneByOne, opt_hitExtent);
|
||||
}
|
||||
|
||||
// disable the vertex attrib arrays
|
||||
this.shutDownProgram(gl, locations);
|
||||
|
||||
if (this.lineStringReplay) {
|
||||
if (!tmpStencil) {
|
||||
gl.disable(gl.STENCIL_TEST);
|
||||
}
|
||||
gl.clear(gl.STENCIL_BUFFER_BIT);
|
||||
gl.stencilFunc(/** @type {number} */ (tmpStencilFunc),
|
||||
/** @type {number} */ (tmpStencilRef), /** @type {number} */ (tmpStencilMaskVal));
|
||||
gl.stencilMask(/** @type {number} */ (tmpStencilMask));
|
||||
gl.stencilOp(/** @type {number} */ (tmpStencilOpFail),
|
||||
/** @type {number} */ (tmpStencilOpZFail), /** @type {number} */ (tmpStencilOpPass));
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {number} start Start index.
|
||||
* @param {number} end End index.
|
||||
*/
|
||||
WebGLReplay.prototype.drawElements = function(
|
||||
gl, context, start, end) {
|
||||
const elementType = context.hasOESElementIndexUint ?
|
||||
UNSIGNED_INT : UNSIGNED_SHORT;
|
||||
const elementSize = context.hasOESElementIndexUint ? 4 : 2;
|
||||
|
||||
const numItems = end - start;
|
||||
const offsetInBytes = start * elementSize;
|
||||
gl.drawElements(TRIANGLES, numItems, elementType, offsetInBytes);
|
||||
};
|
||||
export default WebGLReplay;
|
||||
|
||||
+286
-259
@@ -40,281 +40,308 @@ const BATCH_CONSTRUCTORS = {
|
||||
* @param {number=} opt_renderBuffer Render buffer.
|
||||
* @struct
|
||||
*/
|
||||
const WebGLReplayGroup = function(tolerance, maxExtent, opt_renderBuffer) {
|
||||
ReplayGroup.call(this);
|
||||
class WebGLReplayGroup {
|
||||
constructor(tolerance, maxExtent, opt_renderBuffer) {
|
||||
ReplayGroup.call(this);
|
||||
|
||||
/**
|
||||
* @type {module:ol/extent~Extent}
|
||||
* @private
|
||||
*/
|
||||
this.maxExtent_ = maxExtent;
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
* @private
|
||||
*/
|
||||
this.tolerance_ = tolerance;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.renderBuffer_ = opt_renderBuffer;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {!Object.<string,
|
||||
* Object.<module:ol/render/ReplayType, module:ol/render/webgl/Replay>>}
|
||||
*/
|
||||
this.replaysByZIndex_ = {};
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {module:ol/extent~Extent}
|
||||
* @private
|
||||
* @param {module:ol/style/Style} style Style.
|
||||
* @param {boolean} group Group with previous replay.
|
||||
*/
|
||||
this.maxExtent_ = maxExtent;
|
||||
addDeclutter(style, group) {}
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
* @private
|
||||
* @param {module:ol/webgl/Context} context WebGL context.
|
||||
* @return {function()} Delete resources function.
|
||||
*/
|
||||
this.tolerance_ = tolerance;
|
||||
getDeleteResourcesFunction(context) {
|
||||
const functions = [];
|
||||
let zKey;
|
||||
for (zKey in this.replaysByZIndex_) {
|
||||
const replays = this.replaysByZIndex_[zKey];
|
||||
for (const replayKey in replays) {
|
||||
functions.push(
|
||||
replays[replayKey].getDeleteResourcesFunction(context));
|
||||
}
|
||||
}
|
||||
return function() {
|
||||
const length = functions.length;
|
||||
let result;
|
||||
for (let i = 0; i < length; i++) {
|
||||
result = functions[i].apply(this, arguments);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @private
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
*/
|
||||
this.renderBuffer_ = opt_renderBuffer;
|
||||
finish(context) {
|
||||
let zKey;
|
||||
for (zKey in this.replaysByZIndex_) {
|
||||
const replays = this.replaysByZIndex_[zKey];
|
||||
for (const replayKey in replays) {
|
||||
replays[replayKey].finish(context);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
getReplay(zIndex, replayType) {
|
||||
const zIndexKey = zIndex !== undefined ? zIndex.toString() : '0';
|
||||
let replays = this.replaysByZIndex_[zIndexKey];
|
||||
if (replays === undefined) {
|
||||
replays = {};
|
||||
this.replaysByZIndex_[zIndexKey] = replays;
|
||||
}
|
||||
let replay = replays[replayType];
|
||||
if (replay === undefined) {
|
||||
/**
|
||||
* @type {Function}
|
||||
*/
|
||||
const Constructor = BATCH_CONSTRUCTORS[replayType];
|
||||
replay = new Constructor(this.tolerance_, this.maxExtent_);
|
||||
replays[replayType] = replay;
|
||||
}
|
||||
return replay;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
isEmpty() {
|
||||
return isEmpty(this.replaysByZIndex_);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/coordinate~Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
*/
|
||||
replay(
|
||||
context,
|
||||
center,
|
||||
resolution,
|
||||
rotation,
|
||||
size,
|
||||
pixelRatio,
|
||||
opacity,
|
||||
skippedFeaturesHash
|
||||
) {
|
||||
/** @type {Array.<number>} */
|
||||
const zs = Object.keys(this.replaysByZIndex_).map(Number);
|
||||
zs.sort(numberSafeCompareFunction);
|
||||
|
||||
let i, ii, j, jj, replays, replay;
|
||||
for (i = 0, ii = zs.length; i < ii; ++i) {
|
||||
replays = this.replaysByZIndex_[zs[i].toString()];
|
||||
for (j = 0, jj = ORDER.length; j < jj; ++j) {
|
||||
replay = replays[ORDER[j]];
|
||||
if (replay !== undefined) {
|
||||
replay.replay(context,
|
||||
center, resolution, rotation, size, pixelRatio,
|
||||
opacity, skippedFeaturesHash,
|
||||
undefined, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {!Object.<string,
|
||||
* Object.<module:ol/render/ReplayType, module:ol/render/webgl/Replay>>}
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/coordinate~Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} featureCallback Feature callback.
|
||||
* @param {boolean} oneByOne Draw features one-by-one for the hit-detecion.
|
||||
* @param {module:ol/extent~Extent=} opt_hitExtent Hit extent: Only features intersecting
|
||||
* this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
this.replaysByZIndex_ = {};
|
||||
replayHitDetection_(
|
||||
context,
|
||||
center,
|
||||
resolution,
|
||||
rotation,
|
||||
size,
|
||||
pixelRatio,
|
||||
opacity,
|
||||
skippedFeaturesHash,
|
||||
featureCallback,
|
||||
oneByOne,
|
||||
opt_hitExtent
|
||||
) {
|
||||
/** @type {Array.<number>} */
|
||||
const zs = Object.keys(this.replaysByZIndex_).map(Number);
|
||||
zs.sort(function(a, b) {
|
||||
return b - a;
|
||||
});
|
||||
|
||||
};
|
||||
let i, ii, j, replays, replay, result;
|
||||
for (i = 0, ii = zs.length; i < ii; ++i) {
|
||||
replays = this.replaysByZIndex_[zs[i].toString()];
|
||||
for (j = ORDER.length - 1; j >= 0; --j) {
|
||||
replay = replays[ORDER[j]];
|
||||
if (replay !== undefined) {
|
||||
result = replay.replay(context,
|
||||
center, resolution, rotation, size, pixelRatio, opacity,
|
||||
skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {module:ol/coordinate~Coordinate} coordinate Coordinate.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/coordinate~Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} callback Feature callback.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
forEachFeatureAtCoordinate(
|
||||
coordinate,
|
||||
context,
|
||||
center,
|
||||
resolution,
|
||||
rotation,
|
||||
size,
|
||||
pixelRatio,
|
||||
opacity,
|
||||
skippedFeaturesHash,
|
||||
callback
|
||||
) {
|
||||
const gl = context.getGL();
|
||||
gl.bindFramebuffer(
|
||||
gl.FRAMEBUFFER, context.getHitDetectionFramebuffer());
|
||||
|
||||
|
||||
/**
|
||||
* @type {module:ol/extent~Extent}
|
||||
*/
|
||||
let hitExtent;
|
||||
if (this.renderBuffer_ !== undefined) {
|
||||
// build an extent around the coordinate, so that only features that
|
||||
// intersect this extent are checked
|
||||
hitExtent = buffer(createOrUpdateFromCoordinate(coordinate), resolution * this.renderBuffer_);
|
||||
}
|
||||
|
||||
return this.replayHitDetection_(context,
|
||||
coordinate, resolution, rotation, HIT_DETECTION_SIZE,
|
||||
pixelRatio, opacity, skippedFeaturesHash,
|
||||
/**
|
||||
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
|
||||
* @return {?} Callback result.
|
||||
*/
|
||||
function(feature) {
|
||||
const imageData = new Uint8Array(4);
|
||||
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
|
||||
|
||||
if (imageData[3] > 0) {
|
||||
const result = callback(feature);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}, true, hitExtent);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {module:ol/coordinate~Coordinate} coordinate Coordinate.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/coordinate~Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @return {boolean} Is there a feature at the given coordinate?
|
||||
*/
|
||||
hasFeatureAtCoordinate(
|
||||
coordinate,
|
||||
context,
|
||||
center,
|
||||
resolution,
|
||||
rotation,
|
||||
size,
|
||||
pixelRatio,
|
||||
opacity,
|
||||
skippedFeaturesHash
|
||||
) {
|
||||
const gl = context.getGL();
|
||||
gl.bindFramebuffer(
|
||||
gl.FRAMEBUFFER, context.getHitDetectionFramebuffer());
|
||||
|
||||
const hasFeature = this.replayHitDetection_(context,
|
||||
coordinate, resolution, rotation, HIT_DETECTION_SIZE,
|
||||
pixelRatio, opacity, skippedFeaturesHash,
|
||||
/**
|
||||
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
|
||||
* @return {boolean} Is there a feature?
|
||||
*/
|
||||
function(feature) {
|
||||
const imageData = new Uint8Array(4);
|
||||
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
|
||||
return imageData[3] > 0;
|
||||
}, false);
|
||||
|
||||
return hasFeature !== undefined;
|
||||
}
|
||||
}
|
||||
|
||||
inherits(WebGLReplayGroup, ReplayGroup);
|
||||
|
||||
|
||||
/**
|
||||
* @param {module:ol/style/Style} style Style.
|
||||
* @param {boolean} group Group with previous replay.
|
||||
*/
|
||||
WebGLReplayGroup.prototype.addDeclutter = function(style, group) {};
|
||||
|
||||
|
||||
/**
|
||||
* @param {module:ol/webgl/Context} context WebGL context.
|
||||
* @return {function()} Delete resources function.
|
||||
*/
|
||||
WebGLReplayGroup.prototype.getDeleteResourcesFunction = function(context) {
|
||||
const functions = [];
|
||||
let zKey;
|
||||
for (zKey in this.replaysByZIndex_) {
|
||||
const replays = this.replaysByZIndex_[zKey];
|
||||
for (const replayKey in replays) {
|
||||
functions.push(
|
||||
replays[replayKey].getDeleteResourcesFunction(context));
|
||||
}
|
||||
}
|
||||
return function() {
|
||||
const length = functions.length;
|
||||
let result;
|
||||
for (let i = 0; i < length; i++) {
|
||||
result = functions[i].apply(this, arguments);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
*/
|
||||
WebGLReplayGroup.prototype.finish = function(context) {
|
||||
let zKey;
|
||||
for (zKey in this.replaysByZIndex_) {
|
||||
const replays = this.replaysByZIndex_[zKey];
|
||||
for (const replayKey in replays) {
|
||||
replays[replayKey].finish(context);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLReplayGroup.prototype.getReplay = function(zIndex, replayType) {
|
||||
const zIndexKey = zIndex !== undefined ? zIndex.toString() : '0';
|
||||
let replays = this.replaysByZIndex_[zIndexKey];
|
||||
if (replays === undefined) {
|
||||
replays = {};
|
||||
this.replaysByZIndex_[zIndexKey] = replays;
|
||||
}
|
||||
let replay = replays[replayType];
|
||||
if (replay === undefined) {
|
||||
/**
|
||||
* @type {Function}
|
||||
*/
|
||||
const Constructor = BATCH_CONSTRUCTORS[replayType];
|
||||
replay = new Constructor(this.tolerance_, this.maxExtent_);
|
||||
replays[replayType] = replay;
|
||||
}
|
||||
return replay;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLReplayGroup.prototype.isEmpty = function() {
|
||||
return isEmpty(this.replaysByZIndex_);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/coordinate~Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
*/
|
||||
WebGLReplayGroup.prototype.replay = function(context,
|
||||
center, resolution, rotation, size, pixelRatio,
|
||||
opacity, skippedFeaturesHash) {
|
||||
/** @type {Array.<number>} */
|
||||
const zs = Object.keys(this.replaysByZIndex_).map(Number);
|
||||
zs.sort(numberSafeCompareFunction);
|
||||
|
||||
let i, ii, j, jj, replays, replay;
|
||||
for (i = 0, ii = zs.length; i < ii; ++i) {
|
||||
replays = this.replaysByZIndex_[zs[i].toString()];
|
||||
for (j = 0, jj = ORDER.length; j < jj; ++j) {
|
||||
replay = replays[ORDER[j]];
|
||||
if (replay !== undefined) {
|
||||
replay.replay(context,
|
||||
center, resolution, rotation, size, pixelRatio,
|
||||
opacity, skippedFeaturesHash,
|
||||
undefined, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/coordinate~Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} featureCallback Feature callback.
|
||||
* @param {boolean} oneByOne Draw features one-by-one for the hit-detecion.
|
||||
* @param {module:ol/extent~Extent=} opt_hitExtent Hit extent: Only features intersecting
|
||||
* this extent are checked.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
WebGLReplayGroup.prototype.replayHitDetection_ = function(context,
|
||||
center, resolution, rotation, size, pixelRatio, opacity,
|
||||
skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent) {
|
||||
/** @type {Array.<number>} */
|
||||
const zs = Object.keys(this.replaysByZIndex_).map(Number);
|
||||
zs.sort(function(a, b) {
|
||||
return b - a;
|
||||
});
|
||||
|
||||
let i, ii, j, replays, replay, result;
|
||||
for (i = 0, ii = zs.length; i < ii; ++i) {
|
||||
replays = this.replaysByZIndex_[zs[i].toString()];
|
||||
for (j = ORDER.length - 1; j >= 0; --j) {
|
||||
replay = replays[ORDER[j]];
|
||||
if (replay !== undefined) {
|
||||
result = replay.replay(context,
|
||||
center, resolution, rotation, size, pixelRatio, opacity,
|
||||
skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {module:ol/coordinate~Coordinate} coordinate Coordinate.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/coordinate~Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T|undefined} callback Feature callback.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
WebGLReplayGroup.prototype.forEachFeatureAtCoordinate = function(
|
||||
coordinate, context, center, resolution, rotation, size, pixelRatio,
|
||||
opacity, skippedFeaturesHash,
|
||||
callback) {
|
||||
const gl = context.getGL();
|
||||
gl.bindFramebuffer(
|
||||
gl.FRAMEBUFFER, context.getHitDetectionFramebuffer());
|
||||
|
||||
|
||||
/**
|
||||
* @type {module:ol/extent~Extent}
|
||||
*/
|
||||
let hitExtent;
|
||||
if (this.renderBuffer_ !== undefined) {
|
||||
// build an extent around the coordinate, so that only features that
|
||||
// intersect this extent are checked
|
||||
hitExtent = buffer(createOrUpdateFromCoordinate(coordinate), resolution * this.renderBuffer_);
|
||||
}
|
||||
|
||||
return this.replayHitDetection_(context,
|
||||
coordinate, resolution, rotation, HIT_DETECTION_SIZE,
|
||||
pixelRatio, opacity, skippedFeaturesHash,
|
||||
/**
|
||||
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
|
||||
* @return {?} Callback result.
|
||||
*/
|
||||
function(feature) {
|
||||
const imageData = new Uint8Array(4);
|
||||
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
|
||||
|
||||
if (imageData[3] > 0) {
|
||||
const result = callback(feature);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}, true, hitExtent);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {module:ol/coordinate~Coordinate} coordinate Coordinate.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {module:ol/coordinate~Coordinate} center Center.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {module:ol/size~Size} size Size.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {number} opacity Global opacity.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @return {boolean} Is there a feature at the given coordinate?
|
||||
*/
|
||||
WebGLReplayGroup.prototype.hasFeatureAtCoordinate = function(
|
||||
coordinate, context, center, resolution, rotation, size, pixelRatio,
|
||||
opacity, skippedFeaturesHash) {
|
||||
const gl = context.getGL();
|
||||
gl.bindFramebuffer(
|
||||
gl.FRAMEBUFFER, context.getHitDetectionFramebuffer());
|
||||
|
||||
const hasFeature = this.replayHitDetection_(context,
|
||||
coordinate, resolution, rotation, HIT_DETECTION_SIZE,
|
||||
pixelRatio, opacity, skippedFeaturesHash,
|
||||
/**
|
||||
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
|
||||
* @return {boolean} Is there a feature?
|
||||
*/
|
||||
function(feature) {
|
||||
const imageData = new Uint8Array(4);
|
||||
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
|
||||
return imageData[3] > 0;
|
||||
}, false);
|
||||
|
||||
return hasFeature !== undefined;
|
||||
};
|
||||
|
||||
export default WebGLReplayGroup;
|
||||
|
||||
+401
-407
@@ -29,441 +29,435 @@ import WebGLBuffer from '../../webgl/Buffer.js';
|
||||
* @param {module:ol/extent~Extent} maxExtent Max extent.
|
||||
* @struct
|
||||
*/
|
||||
const WebGLTextReplay = function(tolerance, maxExtent) {
|
||||
WebGLTextureReplay.call(this, tolerance, maxExtent);
|
||||
class WebGLTextReplay {
|
||||
constructor(tolerance, maxExtent) {
|
||||
WebGLTextureReplay.call(this, tolerance, maxExtent);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<HTMLCanvasElement>}
|
||||
*/
|
||||
this.images_ = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<WebGLTexture>}
|
||||
*/
|
||||
this.textures_ = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement}
|
||||
*/
|
||||
this.measureCanvas_ = createCanvasContext2D(0, 0).canvas;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {{strokeColor: (module:ol/colorlike~ColorLike|null),
|
||||
* lineCap: (string|undefined),
|
||||
* lineDash: Array.<number>,
|
||||
* lineDashOffset: (number|undefined),
|
||||
* lineJoin: (string|undefined),
|
||||
* lineWidth: number,
|
||||
* miterLimit: (number|undefined),
|
||||
* fillColor: (module:ol/colorlike~ColorLike|null),
|
||||
* font: (string|undefined),
|
||||
* scale: (number|undefined)}}
|
||||
*/
|
||||
this.state_ = {
|
||||
strokeColor: null,
|
||||
lineCap: undefined,
|
||||
lineDash: null,
|
||||
lineDashOffset: undefined,
|
||||
lineJoin: undefined,
|
||||
lineWidth: 0,
|
||||
miterLimit: undefined,
|
||||
fillColor: null,
|
||||
font: undefined,
|
||||
scale: undefined
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string}
|
||||
*/
|
||||
this.text_ = '';
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.textAlign_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.textBaseline_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.offsetX_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.offsetY_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Object.<string, module:ol/render/webgl/TextReplay~GlyphAtlas>}
|
||||
*/
|
||||
this.atlases_ = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/render/webgl/TextReplay~GlyphAtlas|undefined}
|
||||
*/
|
||||
this.currAtlas_ = undefined;
|
||||
|
||||
this.scale = 1;
|
||||
|
||||
this.opacity = 1;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawText(geometry, feature) {
|
||||
if (this.text_) {
|
||||
let flatCoordinates = null;
|
||||
const offset = 0;
|
||||
let end = 2;
|
||||
let stride = 2;
|
||||
switch (geometry.getType()) {
|
||||
case GeometryType.POINT:
|
||||
case GeometryType.MULTI_POINT:
|
||||
flatCoordinates = geometry.getFlatCoordinates();
|
||||
end = flatCoordinates.length;
|
||||
stride = geometry.getStride();
|
||||
break;
|
||||
case GeometryType.CIRCLE:
|
||||
flatCoordinates = /** @type {module:ol/geom/Circle} */ (geometry).getCenter();
|
||||
break;
|
||||
case GeometryType.LINE_STRING:
|
||||
flatCoordinates = /** @type {module:ol/geom/LineString} */ (geometry).getFlatMidpoint();
|
||||
break;
|
||||
case GeometryType.MULTI_LINE_STRING:
|
||||
flatCoordinates = /** @type {module:ol/geom/MultiLineString} */ (geometry).getFlatMidpoints();
|
||||
end = flatCoordinates.length;
|
||||
break;
|
||||
case GeometryType.POLYGON:
|
||||
flatCoordinates = /** @type {module:ol/geom/Polygon} */ (geometry).getFlatInteriorPoint();
|
||||
break;
|
||||
case GeometryType.MULTI_POLYGON:
|
||||
flatCoordinates = /** @type {module:ol/geom/MultiPolygon} */ (geometry).getFlatInteriorPoints();
|
||||
end = flatCoordinates.length;
|
||||
break;
|
||||
default:
|
||||
}
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
|
||||
const glyphAtlas = this.currAtlas_;
|
||||
const lines = this.text_.split('\n');
|
||||
const textSize = this.getTextSize_(lines);
|
||||
let i, ii, j, jj, currX, currY, charArr, charInfo;
|
||||
const anchorX = Math.round(textSize[0] * this.textAlign_ - this.offsetX_);
|
||||
const anchorY = Math.round(textSize[1] * this.textBaseline_ - this.offsetY_);
|
||||
const lineWidth = (this.state_.lineWidth / 2) * this.state_.scale;
|
||||
|
||||
for (i = 0, ii = lines.length; i < ii; ++i) {
|
||||
currX = 0;
|
||||
currY = glyphAtlas.height * i;
|
||||
charArr = lines[i].split('');
|
||||
|
||||
for (j = 0, jj = charArr.length; j < jj; ++j) {
|
||||
charInfo = glyphAtlas.atlas.getInfo(charArr[j]);
|
||||
|
||||
if (charInfo) {
|
||||
const image = charInfo.image;
|
||||
|
||||
this.anchorX = anchorX - currX;
|
||||
this.anchorY = anchorY - currY;
|
||||
this.originX = j === 0 ? charInfo.offsetX - lineWidth : charInfo.offsetX;
|
||||
this.originY = charInfo.offsetY;
|
||||
this.height = glyphAtlas.height;
|
||||
this.width = j === 0 || j === charArr.length - 1 ?
|
||||
glyphAtlas.width[charArr[j]] + lineWidth : glyphAtlas.width[charArr[j]];
|
||||
this.imageHeight = image.height;
|
||||
this.imageWidth = image.width;
|
||||
|
||||
if (this.images_.length === 0) {
|
||||
this.images_.push(image);
|
||||
} else {
|
||||
const currentImage = this.images_[this.images_.length - 1];
|
||||
if (getUid(currentImage) != getUid(image)) {
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.images_.push(image);
|
||||
}
|
||||
}
|
||||
|
||||
this.drawText_(flatCoordinates, offset, end, stride);
|
||||
}
|
||||
currX += this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<HTMLCanvasElement>}
|
||||
* @param {Array.<string>} lines Label to draw split to lines.
|
||||
* @return {Array.<number>} Size of the label in pixels.
|
||||
*/
|
||||
this.images_ = [];
|
||||
getTextSize_(lines) {
|
||||
const self = this;
|
||||
const glyphAtlas = this.currAtlas_;
|
||||
const textHeight = lines.length * glyphAtlas.height;
|
||||
//Split every line to an array of chars, sum up their width, and select the longest.
|
||||
const textWidth = lines.map(function(str) {
|
||||
let sum = 0;
|
||||
for (let i = 0, ii = str.length; i < ii; ++i) {
|
||||
const curr = str[i];
|
||||
if (!glyphAtlas.width[curr]) {
|
||||
self.addCharToAtlas_(curr);
|
||||
}
|
||||
sum += glyphAtlas.width[curr] ? glyphAtlas.width[curr] : 0;
|
||||
}
|
||||
return sum;
|
||||
}).reduce(function(max, curr) {
|
||||
return Math.max(max, curr);
|
||||
});
|
||||
|
||||
return [textWidth, textHeight];
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<WebGLTexture>}
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
*/
|
||||
this.textures_ = [];
|
||||
drawText_(flatCoordinates, offset, end, stride) {
|
||||
for (let i = offset, ii = end; i < ii; i += stride) {
|
||||
this.drawCoordinates(flatCoordinates, offset, end, stride);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement}
|
||||
* @param {string} char Character.
|
||||
*/
|
||||
this.measureCanvas_ = createCanvasContext2D(0, 0).canvas;
|
||||
addCharToAtlas_(char) {
|
||||
if (char.length === 1) {
|
||||
const glyphAtlas = this.currAtlas_;
|
||||
const state = this.state_;
|
||||
const mCtx = this.measureCanvas_.getContext('2d');
|
||||
mCtx.font = state.font;
|
||||
const width = Math.ceil(mCtx.measureText(char).width * state.scale);
|
||||
|
||||
const info = glyphAtlas.atlas.add(char, width, glyphAtlas.height,
|
||||
function(ctx, x, y) {
|
||||
//Parameterize the canvas
|
||||
ctx.font = /** @type {string} */ (state.font);
|
||||
ctx.fillStyle = state.fillColor;
|
||||
ctx.strokeStyle = state.strokeColor;
|
||||
ctx.lineWidth = state.lineWidth;
|
||||
ctx.lineCap = /*** @type {string} */ (state.lineCap);
|
||||
ctx.lineJoin = /** @type {string} */ (state.lineJoin);
|
||||
ctx.miterLimit = /** @type {number} */ (state.miterLimit);
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
if (CANVAS_LINE_DASH && state.lineDash) {
|
||||
//FIXME: use pixelRatio
|
||||
ctx.setLineDash(state.lineDash);
|
||||
ctx.lineDashOffset = /** @type {number} */ (state.lineDashOffset);
|
||||
}
|
||||
if (state.scale !== 1) {
|
||||
//FIXME: use pixelRatio
|
||||
ctx.setTransform(/** @type {number} */ (state.scale), 0, 0,
|
||||
/** @type {number} */ (state.scale), 0, 0);
|
||||
}
|
||||
|
||||
//Draw the character on the canvas
|
||||
if (state.strokeColor) {
|
||||
ctx.strokeText(char, x, y);
|
||||
}
|
||||
if (state.fillColor) {
|
||||
ctx.fillText(char, x, y);
|
||||
}
|
||||
});
|
||||
|
||||
if (info) {
|
||||
glyphAtlas.width[char] = width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
finish(context) {
|
||||
const gl = context.getGL();
|
||||
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.hitDetectionGroupIndices = this.groupIndices;
|
||||
|
||||
// create, bind, and populate the vertices buffer
|
||||
this.verticesBuffer = new WebGLBuffer(this.vertices);
|
||||
|
||||
// create, bind, and populate the indices buffer
|
||||
this.indicesBuffer = new WebGLBuffer(this.indices);
|
||||
|
||||
// create textures
|
||||
/** @type {Object.<string, WebGLTexture>} */
|
||||
const texturePerImage = {};
|
||||
|
||||
this.createTextures(this.textures_, this.images_, texturePerImage, gl);
|
||||
|
||||
this.state_ = {
|
||||
strokeColor: null,
|
||||
lineCap: undefined,
|
||||
lineDash: null,
|
||||
lineDashOffset: undefined,
|
||||
lineJoin: undefined,
|
||||
lineWidth: 0,
|
||||
miterLimit: undefined,
|
||||
fillColor: null,
|
||||
font: undefined,
|
||||
scale: undefined
|
||||
};
|
||||
this.text_ = '';
|
||||
this.textAlign_ = undefined;
|
||||
this.textBaseline_ = undefined;
|
||||
this.offsetX_ = undefined;
|
||||
this.offsetY_ = undefined;
|
||||
this.images_ = null;
|
||||
this.atlases_ = {};
|
||||
this.currAtlas_ = undefined;
|
||||
WebGLTextureReplay.prototype.finish.call(this, context);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setTextStyle(textStyle) {
|
||||
const state = this.state_;
|
||||
const textFillStyle = textStyle.getFill();
|
||||
const textStrokeStyle = textStyle.getStroke();
|
||||
if (!textStyle || !textStyle.getText() || (!textFillStyle && !textStrokeStyle)) {
|
||||
this.text_ = '';
|
||||
} else {
|
||||
if (!textFillStyle) {
|
||||
state.fillColor = null;
|
||||
} else {
|
||||
const textFillStyleColor = textFillStyle.getColor();
|
||||
state.fillColor = asColorLike(textFillStyleColor ?
|
||||
textFillStyleColor : DEFAULT_FILLSTYLE);
|
||||
}
|
||||
if (!textStrokeStyle) {
|
||||
state.strokeColor = null;
|
||||
state.lineWidth = 0;
|
||||
} else {
|
||||
const textStrokeStyleColor = textStrokeStyle.getColor();
|
||||
state.strokeColor = asColorLike(textStrokeStyleColor ?
|
||||
textStrokeStyleColor : DEFAULT_STROKESTYLE);
|
||||
state.lineWidth = textStrokeStyle.getWidth() || DEFAULT_LINEWIDTH;
|
||||
state.lineCap = textStrokeStyle.getLineCap() || DEFAULT_LINECAP;
|
||||
state.lineDashOffset = textStrokeStyle.getLineDashOffset() || DEFAULT_LINEDASHOFFSET;
|
||||
state.lineJoin = textStrokeStyle.getLineJoin() || DEFAULT_LINEJOIN;
|
||||
state.miterLimit = textStrokeStyle.getMiterLimit() || DEFAULT_MITERLIMIT;
|
||||
const lineDash = textStrokeStyle.getLineDash();
|
||||
state.lineDash = lineDash ? lineDash.slice() : DEFAULT_LINEDASH;
|
||||
}
|
||||
state.font = textStyle.getFont() || DEFAULT_FONT;
|
||||
state.scale = textStyle.getScale() || 1;
|
||||
this.text_ = /** @type {string} */ (textStyle.getText());
|
||||
const textAlign = TEXT_ALIGN[textStyle.getTextAlign()];
|
||||
const textBaseline = TEXT_ALIGN[textStyle.getTextBaseline()];
|
||||
this.textAlign_ = textAlign === undefined ?
|
||||
DEFAULT_TEXTALIGN : textAlign;
|
||||
this.textBaseline_ = textBaseline === undefined ?
|
||||
DEFAULT_TEXTBASELINE : textBaseline;
|
||||
this.offsetX_ = textStyle.getOffsetX() || 0;
|
||||
this.offsetY_ = textStyle.getOffsetY() || 0;
|
||||
this.rotateWithView = !!textStyle.getRotateWithView();
|
||||
this.rotation = textStyle.getRotation() || 0;
|
||||
|
||||
this.currAtlas_ = this.getAtlas_(state);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {{strokeColor: (module:ol/colorlike~ColorLike|null),
|
||||
* lineCap: (string|undefined),
|
||||
* lineDash: Array.<number>,
|
||||
* lineDashOffset: (number|undefined),
|
||||
* lineJoin: (string|undefined),
|
||||
* lineWidth: number,
|
||||
* miterLimit: (number|undefined),
|
||||
* fillColor: (module:ol/colorlike~ColorLike|null),
|
||||
* font: (string|undefined),
|
||||
* scale: (number|undefined)}}
|
||||
* @param {Object} state Font attributes.
|
||||
* @return {module:ol/render/webgl/TextReplay~GlyphAtlas} Glyph atlas.
|
||||
*/
|
||||
this.state_ = {
|
||||
strokeColor: null,
|
||||
lineCap: undefined,
|
||||
lineDash: null,
|
||||
lineDashOffset: undefined,
|
||||
lineJoin: undefined,
|
||||
lineWidth: 0,
|
||||
miterLimit: undefined,
|
||||
fillColor: null,
|
||||
font: undefined,
|
||||
scale: undefined
|
||||
};
|
||||
getAtlas_(state) {
|
||||
let params = [];
|
||||
for (const i in state) {
|
||||
if (state[i] || state[i] === 0) {
|
||||
if (Array.isArray(state[i])) {
|
||||
params = params.concat(state[i]);
|
||||
} else {
|
||||
params.push(state[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
const hash = this.calculateHash_(params);
|
||||
if (!this.atlases_[hash]) {
|
||||
const mCtx = this.measureCanvas_.getContext('2d');
|
||||
mCtx.font = state.font;
|
||||
const height = Math.ceil((mCtx.measureText('M').width * 1.5 +
|
||||
state.lineWidth / 2) * state.scale);
|
||||
|
||||
this.atlases_[hash] = {
|
||||
atlas: new AtlasManager({
|
||||
space: state.lineWidth + 1
|
||||
}),
|
||||
width: {},
|
||||
height: height
|
||||
};
|
||||
}
|
||||
return this.atlases_[hash];
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string}
|
||||
* @param {Array.<string|number>} params Array of parameters.
|
||||
* @return {string} Hash string.
|
||||
*/
|
||||
this.text_ = '';
|
||||
calculateHash_(params) {
|
||||
//TODO: Create a more performant, reliable, general hash function.
|
||||
let hash = '';
|
||||
for (let i = 0, ii = params.length; i < ii; ++i) {
|
||||
hash += params[i];
|
||||
}
|
||||
return hash;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.textAlign_ = undefined;
|
||||
getTextures(opt_all) {
|
||||
return this.textures_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.textBaseline_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.offsetX_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.offsetY_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Object.<string, module:ol/render/webgl/TextReplay~GlyphAtlas>}
|
||||
*/
|
||||
this.atlases_ = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/render/webgl/TextReplay~GlyphAtlas|undefined}
|
||||
*/
|
||||
this.currAtlas_ = undefined;
|
||||
|
||||
this.scale = 1;
|
||||
|
||||
this.opacity = 1;
|
||||
|
||||
};
|
||||
getHitDetectionTextures() {
|
||||
return this.textures_;
|
||||
}
|
||||
}
|
||||
|
||||
inherits(WebGLTextReplay, WebGLTextureReplay);
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLTextReplay.prototype.drawText = function(geometry, feature) {
|
||||
if (this.text_) {
|
||||
let flatCoordinates = null;
|
||||
const offset = 0;
|
||||
let end = 2;
|
||||
let stride = 2;
|
||||
switch (geometry.getType()) {
|
||||
case GeometryType.POINT:
|
||||
case GeometryType.MULTI_POINT:
|
||||
flatCoordinates = geometry.getFlatCoordinates();
|
||||
end = flatCoordinates.length;
|
||||
stride = geometry.getStride();
|
||||
break;
|
||||
case GeometryType.CIRCLE:
|
||||
flatCoordinates = /** @type {module:ol/geom/Circle} */ (geometry).getCenter();
|
||||
break;
|
||||
case GeometryType.LINE_STRING:
|
||||
flatCoordinates = /** @type {module:ol/geom/LineString} */ (geometry).getFlatMidpoint();
|
||||
break;
|
||||
case GeometryType.MULTI_LINE_STRING:
|
||||
flatCoordinates = /** @type {module:ol/geom/MultiLineString} */ (geometry).getFlatMidpoints();
|
||||
end = flatCoordinates.length;
|
||||
break;
|
||||
case GeometryType.POLYGON:
|
||||
flatCoordinates = /** @type {module:ol/geom/Polygon} */ (geometry).getFlatInteriorPoint();
|
||||
break;
|
||||
case GeometryType.MULTI_POLYGON:
|
||||
flatCoordinates = /** @type {module:ol/geom/MultiPolygon} */ (geometry).getFlatInteriorPoints();
|
||||
end = flatCoordinates.length;
|
||||
break;
|
||||
default:
|
||||
}
|
||||
this.startIndices.push(this.indices.length);
|
||||
this.startIndicesFeature.push(feature);
|
||||
|
||||
const glyphAtlas = this.currAtlas_;
|
||||
const lines = this.text_.split('\n');
|
||||
const textSize = this.getTextSize_(lines);
|
||||
let i, ii, j, jj, currX, currY, charArr, charInfo;
|
||||
const anchorX = Math.round(textSize[0] * this.textAlign_ - this.offsetX_);
|
||||
const anchorY = Math.round(textSize[1] * this.textBaseline_ - this.offsetY_);
|
||||
const lineWidth = (this.state_.lineWidth / 2) * this.state_.scale;
|
||||
|
||||
for (i = 0, ii = lines.length; i < ii; ++i) {
|
||||
currX = 0;
|
||||
currY = glyphAtlas.height * i;
|
||||
charArr = lines[i].split('');
|
||||
|
||||
for (j = 0, jj = charArr.length; j < jj; ++j) {
|
||||
charInfo = glyphAtlas.atlas.getInfo(charArr[j]);
|
||||
|
||||
if (charInfo) {
|
||||
const image = charInfo.image;
|
||||
|
||||
this.anchorX = anchorX - currX;
|
||||
this.anchorY = anchorY - currY;
|
||||
this.originX = j === 0 ? charInfo.offsetX - lineWidth : charInfo.offsetX;
|
||||
this.originY = charInfo.offsetY;
|
||||
this.height = glyphAtlas.height;
|
||||
this.width = j === 0 || j === charArr.length - 1 ?
|
||||
glyphAtlas.width[charArr[j]] + lineWidth : glyphAtlas.width[charArr[j]];
|
||||
this.imageHeight = image.height;
|
||||
this.imageWidth = image.width;
|
||||
|
||||
if (this.images_.length === 0) {
|
||||
this.images_.push(image);
|
||||
} else {
|
||||
const currentImage = this.images_[this.images_.length - 1];
|
||||
if (getUid(currentImage) != getUid(image)) {
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.images_.push(image);
|
||||
}
|
||||
}
|
||||
|
||||
this.drawText_(flatCoordinates, offset, end, stride);
|
||||
}
|
||||
currX += this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Array.<string>} lines Label to draw split to lines.
|
||||
* @return {Array.<number>} Size of the label in pixels.
|
||||
*/
|
||||
WebGLTextReplay.prototype.getTextSize_ = function(lines) {
|
||||
const self = this;
|
||||
const glyphAtlas = this.currAtlas_;
|
||||
const textHeight = lines.length * glyphAtlas.height;
|
||||
//Split every line to an array of chars, sum up their width, and select the longest.
|
||||
const textWidth = lines.map(function(str) {
|
||||
let sum = 0;
|
||||
for (let i = 0, ii = str.length; i < ii; ++i) {
|
||||
const curr = str[i];
|
||||
if (!glyphAtlas.width[curr]) {
|
||||
self.addCharToAtlas_(curr);
|
||||
}
|
||||
sum += glyphAtlas.width[curr] ? glyphAtlas.width[curr] : 0;
|
||||
}
|
||||
return sum;
|
||||
}).reduce(function(max, curr) {
|
||||
return Math.max(max, curr);
|
||||
});
|
||||
|
||||
return [textWidth, textHeight];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
*/
|
||||
WebGLTextReplay.prototype.drawText_ = function(flatCoordinates, offset, end, stride) {
|
||||
for (let i = offset, ii = end; i < ii; i += stride) {
|
||||
this.drawCoordinates(flatCoordinates, offset, end, stride);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {string} char Character.
|
||||
*/
|
||||
WebGLTextReplay.prototype.addCharToAtlas_ = function(char) {
|
||||
if (char.length === 1) {
|
||||
const glyphAtlas = this.currAtlas_;
|
||||
const state = this.state_;
|
||||
const mCtx = this.measureCanvas_.getContext('2d');
|
||||
mCtx.font = state.font;
|
||||
const width = Math.ceil(mCtx.measureText(char).width * state.scale);
|
||||
|
||||
const info = glyphAtlas.atlas.add(char, width, glyphAtlas.height,
|
||||
function(ctx, x, y) {
|
||||
//Parameterize the canvas
|
||||
ctx.font = /** @type {string} */ (state.font);
|
||||
ctx.fillStyle = state.fillColor;
|
||||
ctx.strokeStyle = state.strokeColor;
|
||||
ctx.lineWidth = state.lineWidth;
|
||||
ctx.lineCap = /*** @type {string} */ (state.lineCap);
|
||||
ctx.lineJoin = /** @type {string} */ (state.lineJoin);
|
||||
ctx.miterLimit = /** @type {number} */ (state.miterLimit);
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
if (CANVAS_LINE_DASH && state.lineDash) {
|
||||
//FIXME: use pixelRatio
|
||||
ctx.setLineDash(state.lineDash);
|
||||
ctx.lineDashOffset = /** @type {number} */ (state.lineDashOffset);
|
||||
}
|
||||
if (state.scale !== 1) {
|
||||
//FIXME: use pixelRatio
|
||||
ctx.setTransform(/** @type {number} */ (state.scale), 0, 0,
|
||||
/** @type {number} */ (state.scale), 0, 0);
|
||||
}
|
||||
|
||||
//Draw the character on the canvas
|
||||
if (state.strokeColor) {
|
||||
ctx.strokeText(char, x, y);
|
||||
}
|
||||
if (state.fillColor) {
|
||||
ctx.fillText(char, x, y);
|
||||
}
|
||||
});
|
||||
|
||||
if (info) {
|
||||
glyphAtlas.width[char] = width;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLTextReplay.prototype.finish = function(context) {
|
||||
const gl = context.getGL();
|
||||
|
||||
this.groupIndices.push(this.indices.length);
|
||||
this.hitDetectionGroupIndices = this.groupIndices;
|
||||
|
||||
// create, bind, and populate the vertices buffer
|
||||
this.verticesBuffer = new WebGLBuffer(this.vertices);
|
||||
|
||||
// create, bind, and populate the indices buffer
|
||||
this.indicesBuffer = new WebGLBuffer(this.indices);
|
||||
|
||||
// create textures
|
||||
/** @type {Object.<string, WebGLTexture>} */
|
||||
const texturePerImage = {};
|
||||
|
||||
this.createTextures(this.textures_, this.images_, texturePerImage, gl);
|
||||
|
||||
this.state_ = {
|
||||
strokeColor: null,
|
||||
lineCap: undefined,
|
||||
lineDash: null,
|
||||
lineDashOffset: undefined,
|
||||
lineJoin: undefined,
|
||||
lineWidth: 0,
|
||||
miterLimit: undefined,
|
||||
fillColor: null,
|
||||
font: undefined,
|
||||
scale: undefined
|
||||
};
|
||||
this.text_ = '';
|
||||
this.textAlign_ = undefined;
|
||||
this.textBaseline_ = undefined;
|
||||
this.offsetX_ = undefined;
|
||||
this.offsetY_ = undefined;
|
||||
this.images_ = null;
|
||||
this.atlases_ = {};
|
||||
this.currAtlas_ = undefined;
|
||||
WebGLTextureReplay.prototype.finish.call(this, context);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLTextReplay.prototype.setTextStyle = function(textStyle) {
|
||||
const state = this.state_;
|
||||
const textFillStyle = textStyle.getFill();
|
||||
const textStrokeStyle = textStyle.getStroke();
|
||||
if (!textStyle || !textStyle.getText() || (!textFillStyle && !textStrokeStyle)) {
|
||||
this.text_ = '';
|
||||
} else {
|
||||
if (!textFillStyle) {
|
||||
state.fillColor = null;
|
||||
} else {
|
||||
const textFillStyleColor = textFillStyle.getColor();
|
||||
state.fillColor = asColorLike(textFillStyleColor ?
|
||||
textFillStyleColor : DEFAULT_FILLSTYLE);
|
||||
}
|
||||
if (!textStrokeStyle) {
|
||||
state.strokeColor = null;
|
||||
state.lineWidth = 0;
|
||||
} else {
|
||||
const textStrokeStyleColor = textStrokeStyle.getColor();
|
||||
state.strokeColor = asColorLike(textStrokeStyleColor ?
|
||||
textStrokeStyleColor : DEFAULT_STROKESTYLE);
|
||||
state.lineWidth = textStrokeStyle.getWidth() || DEFAULT_LINEWIDTH;
|
||||
state.lineCap = textStrokeStyle.getLineCap() || DEFAULT_LINECAP;
|
||||
state.lineDashOffset = textStrokeStyle.getLineDashOffset() || DEFAULT_LINEDASHOFFSET;
|
||||
state.lineJoin = textStrokeStyle.getLineJoin() || DEFAULT_LINEJOIN;
|
||||
state.miterLimit = textStrokeStyle.getMiterLimit() || DEFAULT_MITERLIMIT;
|
||||
const lineDash = textStrokeStyle.getLineDash();
|
||||
state.lineDash = lineDash ? lineDash.slice() : DEFAULT_LINEDASH;
|
||||
}
|
||||
state.font = textStyle.getFont() || DEFAULT_FONT;
|
||||
state.scale = textStyle.getScale() || 1;
|
||||
this.text_ = /** @type {string} */ (textStyle.getText());
|
||||
const textAlign = TEXT_ALIGN[textStyle.getTextAlign()];
|
||||
const textBaseline = TEXT_ALIGN[textStyle.getTextBaseline()];
|
||||
this.textAlign_ = textAlign === undefined ?
|
||||
DEFAULT_TEXTALIGN : textAlign;
|
||||
this.textBaseline_ = textBaseline === undefined ?
|
||||
DEFAULT_TEXTBASELINE : textBaseline;
|
||||
this.offsetX_ = textStyle.getOffsetX() || 0;
|
||||
this.offsetY_ = textStyle.getOffsetY() || 0;
|
||||
this.rotateWithView = !!textStyle.getRotateWithView();
|
||||
this.rotation = textStyle.getRotation() || 0;
|
||||
|
||||
this.currAtlas_ = this.getAtlas_(state);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Object} state Font attributes.
|
||||
* @return {module:ol/render/webgl/TextReplay~GlyphAtlas} Glyph atlas.
|
||||
*/
|
||||
WebGLTextReplay.prototype.getAtlas_ = function(state) {
|
||||
let params = [];
|
||||
for (const i in state) {
|
||||
if (state[i] || state[i] === 0) {
|
||||
if (Array.isArray(state[i])) {
|
||||
params = params.concat(state[i]);
|
||||
} else {
|
||||
params.push(state[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
const hash = this.calculateHash_(params);
|
||||
if (!this.atlases_[hash]) {
|
||||
const mCtx = this.measureCanvas_.getContext('2d');
|
||||
mCtx.font = state.font;
|
||||
const height = Math.ceil((mCtx.measureText('M').width * 1.5 +
|
||||
state.lineWidth / 2) * state.scale);
|
||||
|
||||
this.atlases_[hash] = {
|
||||
atlas: new AtlasManager({
|
||||
space: state.lineWidth + 1
|
||||
}),
|
||||
width: {},
|
||||
height: height
|
||||
};
|
||||
}
|
||||
return this.atlases_[hash];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Array.<string|number>} params Array of parameters.
|
||||
* @return {string} Hash string.
|
||||
*/
|
||||
WebGLTextReplay.prototype.calculateHash_ = function(params) {
|
||||
//TODO: Create a more performant, reliable, general hash function.
|
||||
let hash = '';
|
||||
for (let i = 0, ii = params.length; i < ii; ++i) {
|
||||
hash += params[i];
|
||||
}
|
||||
return hash;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLTextReplay.prototype.getTextures = function(opt_all) {
|
||||
return this.textures_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLTextReplay.prototype.getHitDetectionTextures = function() {
|
||||
return this.textures_;
|
||||
};
|
||||
export default WebGLTextReplay;
|
||||
|
||||
@@ -18,476 +18,467 @@ import {createTexture} from '../../webgl/Context.js';
|
||||
* @param {module:ol/extent~Extent} maxExtent Max extent.
|
||||
* @struct
|
||||
*/
|
||||
const WebGLTextureReplay = function(tolerance, maxExtent) {
|
||||
WebGLReplay.call(this, tolerance, maxExtent);
|
||||
class WebGLTextureReplay {
|
||||
constructor(tolerance, maxExtent) {
|
||||
WebGLReplay.call(this, tolerance, maxExtent);
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.anchorX = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.anchorY = undefined;
|
||||
|
||||
/**
|
||||
* @type {Array.<number>}
|
||||
* @protected
|
||||
*/
|
||||
this.groupIndices = [];
|
||||
|
||||
/**
|
||||
* @type {Array.<number>}
|
||||
* @protected
|
||||
*/
|
||||
this.hitDetectionGroupIndices = [];
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.height = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.imageHeight = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.imageWidth = undefined;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {module:ol/render/webgl/texturereplay/defaultshader/Locations}
|
||||
*/
|
||||
this.defaultLocations = null;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.opacity = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.originX = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.originY = undefined;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {boolean|undefined}
|
||||
*/
|
||||
this.rotateWithView = undefined;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.rotation = undefined;
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.scale = undefined;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.width = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.anchorX = undefined;
|
||||
getDeleteResourcesFunction(context) {
|
||||
const verticesBuffer = this.verticesBuffer;
|
||||
const indicesBuffer = this.indicesBuffer;
|
||||
const textures = this.getTextures(true);
|
||||
const gl = context.getGL();
|
||||
return function() {
|
||||
if (!gl.isContextLost()) {
|
||||
let i, ii;
|
||||
for (i = 0, ii = textures.length; i < ii; ++i) {
|
||||
gl.deleteTexture(textures[i]);
|
||||
}
|
||||
}
|
||||
context.deleteBuffer(verticesBuffer);
|
||||
context.deleteBuffer(indicesBuffer);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
* @return {number} My end.
|
||||
* @protected
|
||||
*/
|
||||
this.anchorY = undefined;
|
||||
drawCoordinates(flatCoordinates, offset, end, stride) {
|
||||
const anchorX = /** @type {number} */ (this.anchorX);
|
||||
const anchorY = /** @type {number} */ (this.anchorY);
|
||||
const height = /** @type {number} */ (this.height);
|
||||
const imageHeight = /** @type {number} */ (this.imageHeight);
|
||||
const imageWidth = /** @type {number} */ (this.imageWidth);
|
||||
const opacity = /** @type {number} */ (this.opacity);
|
||||
const originX = /** @type {number} */ (this.originX);
|
||||
const originY = /** @type {number} */ (this.originY);
|
||||
const rotateWithView = this.rotateWithView ? 1.0 : 0.0;
|
||||
// this.rotation_ is anti-clockwise, but rotation is clockwise
|
||||
const rotation = /** @type {number} */ (-this.rotation);
|
||||
const scale = /** @type {number} */ (this.scale);
|
||||
const width = /** @type {number} */ (this.width);
|
||||
const cos = Math.cos(rotation);
|
||||
const sin = Math.sin(rotation);
|
||||
let numIndices = this.indices.length;
|
||||
let numVertices = this.vertices.length;
|
||||
let i, n, offsetX, offsetY, x, y;
|
||||
for (i = offset; i < end; i += stride) {
|
||||
x = flatCoordinates[i] - this.origin[0];
|
||||
y = flatCoordinates[i + 1] - this.origin[1];
|
||||
|
||||
/**
|
||||
* @type {Array.<number>}
|
||||
* @protected
|
||||
*/
|
||||
this.groupIndices = [];
|
||||
// There are 4 vertices per [x, y] point, one for each corner of the
|
||||
// rectangle we're going to draw. We'd use 1 vertex per [x, y] point if
|
||||
// WebGL supported Geometry Shaders (which can emit new vertices), but that
|
||||
// is not currently the case.
|
||||
//
|
||||
// And each vertex includes 8 values: the x and y coordinates, the x and
|
||||
// y offsets used to calculate the position of the corner, the u and
|
||||
// v texture coordinates for the corner, the opacity, and whether the
|
||||
// the image should be rotated with the view (rotateWithView).
|
||||
|
||||
/**
|
||||
* @type {Array.<number>}
|
||||
* @protected
|
||||
*/
|
||||
this.hitDetectionGroupIndices = [];
|
||||
n = numVertices / 8;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.height = undefined;
|
||||
// bottom-left corner
|
||||
offsetX = -scale * anchorX;
|
||||
offsetY = -scale * (height - anchorY);
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = originX / imageWidth;
|
||||
this.vertices[numVertices++] = (originY + height) / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.imageHeight = undefined;
|
||||
// bottom-right corner
|
||||
offsetX = scale * (width - anchorX);
|
||||
offsetY = -scale * (height - anchorY);
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = (originX + width) / imageWidth;
|
||||
this.vertices[numVertices++] = (originY + height) / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
*/
|
||||
this.imageWidth = undefined;
|
||||
// top-right corner
|
||||
offsetX = scale * (width - anchorX);
|
||||
offsetY = scale * anchorY;
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = (originX + width) / imageWidth;
|
||||
this.vertices[numVertices++] = originY / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
// top-left corner
|
||||
offsetX = -scale * anchorX;
|
||||
offsetY = scale * anchorY;
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = originX / imageWidth;
|
||||
this.vertices[numVertices++] = originY / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = n + 1;
|
||||
this.indices[numIndices++] = n + 2;
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = n + 2;
|
||||
this.indices[numIndices++] = n + 3;
|
||||
}
|
||||
|
||||
return numVertices;
|
||||
}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {module:ol/render/webgl/texturereplay/defaultshader/Locations}
|
||||
* @param {Array.<WebGLTexture>} textures Textures.
|
||||
* @param {Array.<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>} images Images.
|
||||
* @param {!Object.<string, WebGLTexture>} texturePerImage Texture cache.
|
||||
* @param {WebGLRenderingContext} gl Gl.
|
||||
*/
|
||||
this.defaultLocations = null;
|
||||
createTextures(textures, images, texturePerImage, gl) {
|
||||
let texture, image, uid, i;
|
||||
const ii = images.length;
|
||||
for (i = 0; i < ii; ++i) {
|
||||
image = images[i];
|
||||
|
||||
uid = getUid(image).toString();
|
||||
if (uid in texturePerImage) {
|
||||
texture = texturePerImage[uid];
|
||||
} else {
|
||||
texture = createTexture(
|
||||
gl, image, CLAMP_TO_EDGE, CLAMP_TO_EDGE);
|
||||
texturePerImage[uid] = texture;
|
||||
}
|
||||
textures[i] = texture;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number|undefined}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.opacity = undefined;
|
||||
setUpProgram(gl, context, size, pixelRatio) {
|
||||
// get the program
|
||||
const program = context.getProgram(fragment, vertex);
|
||||
|
||||
// get the locations
|
||||
let locations;
|
||||
if (!this.defaultLocations) {
|
||||
locations = new Locations(gl, program);
|
||||
this.defaultLocations = locations;
|
||||
} else {
|
||||
locations = this.defaultLocations;
|
||||
}
|
||||
|
||||
// use the program (FIXME: use the return value)
|
||||
context.useProgram(program);
|
||||
|
||||
// enable the vertex attrib arrays
|
||||
gl.enableVertexAttribArray(locations.a_position);
|
||||
gl.vertexAttribPointer(locations.a_position, 2, FLOAT,
|
||||
false, 32, 0);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_offsets);
|
||||
gl.vertexAttribPointer(locations.a_offsets, 2, FLOAT,
|
||||
false, 32, 8);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_texCoord);
|
||||
gl.vertexAttribPointer(locations.a_texCoord, 2, FLOAT,
|
||||
false, 32, 16);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_opacity);
|
||||
gl.vertexAttribPointer(locations.a_opacity, 1, FLOAT,
|
||||
false, 32, 24);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_rotateWithView);
|
||||
gl.vertexAttribPointer(locations.a_rotateWithView, 1, FLOAT,
|
||||
false, 32, 28);
|
||||
|
||||
return locations;
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.originX = undefined;
|
||||
shutDownProgram(gl, locations) {
|
||||
gl.disableVertexAttribArray(locations.a_position);
|
||||
gl.disableVertexAttribArray(locations.a_offsets);
|
||||
gl.disableVertexAttribArray(locations.a_texCoord);
|
||||
gl.disableVertexAttribArray(locations.a_opacity);
|
||||
gl.disableVertexAttribArray(locations.a_rotateWithView);
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @protected
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.originY = undefined;
|
||||
drawReplay(gl, context, skippedFeaturesHash, hitDetection) {
|
||||
const textures = hitDetection ? this.getHitDetectionTextures() : this.getTextures();
|
||||
const groupIndices = hitDetection ? this.hitDetectionGroupIndices : this.groupIndices;
|
||||
|
||||
if (!isEmpty(skippedFeaturesHash)) {
|
||||
this.drawReplaySkipping(gl, context, skippedFeaturesHash, textures, groupIndices);
|
||||
} else {
|
||||
let i, ii, start;
|
||||
for (i = 0, ii = textures.length, start = 0; i < ii; ++i) {
|
||||
gl.bindTexture(TEXTURE_2D, textures[i]);
|
||||
const end = groupIndices[i];
|
||||
this.drawElements(gl, context, start, end);
|
||||
start = end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw the replay while paying attention to skipped features.
|
||||
*
|
||||
* This functions creates groups of features that can be drawn to together,
|
||||
* so that the number of `drawElements` calls is minimized.
|
||||
*
|
||||
* For example given the following texture groups:
|
||||
*
|
||||
* Group 1: A B C
|
||||
* Group 2: D [E] F G
|
||||
*
|
||||
* If feature E should be skipped, the following `drawElements` calls will be
|
||||
* made:
|
||||
*
|
||||
* drawElements with feature A, B and C
|
||||
* drawElements with feature D
|
||||
* drawElements with feature F and G
|
||||
*
|
||||
* @protected
|
||||
* @type {boolean|undefined}
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
|
||||
* to skip.
|
||||
* @param {Array.<WebGLTexture>} textures Textures.
|
||||
* @param {Array.<number>} groupIndices Texture group indices.
|
||||
*/
|
||||
this.rotateWithView = undefined;
|
||||
drawReplaySkipping(gl, context, skippedFeaturesHash, textures, groupIndices) {
|
||||
let featureIndex = 0;
|
||||
|
||||
let i, ii;
|
||||
for (i = 0, ii = textures.length; i < ii; ++i) {
|
||||
gl.bindTexture(TEXTURE_2D, textures[i]);
|
||||
const groupStart = (i > 0) ? groupIndices[i - 1] : 0;
|
||||
const groupEnd = groupIndices[i];
|
||||
|
||||
let start = groupStart;
|
||||
let end = groupStart;
|
||||
while (featureIndex < this.startIndices.length &&
|
||||
this.startIndices[featureIndex] <= groupEnd) {
|
||||
const feature = this.startIndicesFeature[featureIndex];
|
||||
|
||||
const featureUid = getUid(feature).toString();
|
||||
if (skippedFeaturesHash[featureUid] !== undefined) {
|
||||
// feature should be skipped
|
||||
if (start !== end) {
|
||||
// draw the features so far
|
||||
this.drawElements(gl, context, start, end);
|
||||
}
|
||||
// continue with the next feature
|
||||
start = (featureIndex === this.startIndices.length - 1) ?
|
||||
groupEnd : this.startIndices[featureIndex + 1];
|
||||
end = start;
|
||||
} else {
|
||||
// the feature is not skipped, augment the end index
|
||||
end = (featureIndex === this.startIndices.length - 1) ?
|
||||
groupEnd : this.startIndices[featureIndex + 1];
|
||||
}
|
||||
featureIndex++;
|
||||
}
|
||||
|
||||
if (start !== end) {
|
||||
// draw the remaining features (in case there was no skipped feature
|
||||
// in this texture group, all features of a group are drawn together)
|
||||
this.drawElements(gl, context, start, end);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number|undefined}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.rotation = undefined;
|
||||
drawHitDetectionReplayOneByOne(gl, context, skippedFeaturesHash, featureCallback, opt_hitExtent) {
|
||||
let i, groupStart, start, end, feature, featureUid;
|
||||
let featureIndex = this.startIndices.length - 1;
|
||||
const hitDetectionTextures = this.getHitDetectionTextures();
|
||||
for (i = hitDetectionTextures.length - 1; i >= 0; --i) {
|
||||
gl.bindTexture(TEXTURE_2D, hitDetectionTextures[i]);
|
||||
groupStart = (i > 0) ? this.hitDetectionGroupIndices[i - 1] : 0;
|
||||
end = this.hitDetectionGroupIndices[i];
|
||||
|
||||
// draw all features for this texture group
|
||||
while (featureIndex >= 0 &&
|
||||
this.startIndices[featureIndex] >= groupStart) {
|
||||
start = this.startIndices[featureIndex];
|
||||
feature = this.startIndicesFeature[featureIndex];
|
||||
featureUid = getUid(feature).toString();
|
||||
|
||||
if (skippedFeaturesHash[featureUid] === undefined &&
|
||||
feature.getGeometry() &&
|
||||
(opt_hitExtent === undefined || intersects(
|
||||
/** @type {Array<number>} */ (opt_hitExtent),
|
||||
feature.getGeometry().getExtent()))) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
this.drawElements(gl, context, start, end);
|
||||
|
||||
const result = featureCallback(feature);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
end = start;
|
||||
featureIndex--;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @type {number|undefined}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.scale = undefined;
|
||||
finish(context) {
|
||||
this.anchorX = undefined;
|
||||
this.anchorY = undefined;
|
||||
this.height = undefined;
|
||||
this.imageHeight = undefined;
|
||||
this.imageWidth = undefined;
|
||||
this.indices = null;
|
||||
this.opacity = undefined;
|
||||
this.originX = undefined;
|
||||
this.originY = undefined;
|
||||
this.rotateWithView = undefined;
|
||||
this.rotation = undefined;
|
||||
this.scale = undefined;
|
||||
this.vertices = null;
|
||||
this.width = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {boolean=} opt_all Return hit detection textures with regular ones.
|
||||
* @returns {Array.<WebGLTexture>} Textures.
|
||||
*/
|
||||
this.width = undefined;
|
||||
};
|
||||
getTextures(opt_all) {}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @returns {Array.<WebGLTexture>} Textures.
|
||||
*/
|
||||
getHitDetectionTextures() {}
|
||||
}
|
||||
|
||||
inherits(WebGLTextureReplay, WebGLReplay);
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLTextureReplay.prototype.getDeleteResourcesFunction = function(context) {
|
||||
const verticesBuffer = this.verticesBuffer;
|
||||
const indicesBuffer = this.indicesBuffer;
|
||||
const textures = this.getTextures(true);
|
||||
const gl = context.getGL();
|
||||
return function() {
|
||||
if (!gl.isContextLost()) {
|
||||
let i, ii;
|
||||
for (i = 0, ii = textures.length; i < ii; ++i) {
|
||||
gl.deleteTexture(textures[i]);
|
||||
}
|
||||
}
|
||||
context.deleteBuffer(verticesBuffer);
|
||||
context.deleteBuffer(indicesBuffer);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
* @return {number} My end.
|
||||
* @protected
|
||||
*/
|
||||
WebGLTextureReplay.prototype.drawCoordinates = function(flatCoordinates, offset, end, stride) {
|
||||
const anchorX = /** @type {number} */ (this.anchorX);
|
||||
const anchorY = /** @type {number} */ (this.anchorY);
|
||||
const height = /** @type {number} */ (this.height);
|
||||
const imageHeight = /** @type {number} */ (this.imageHeight);
|
||||
const imageWidth = /** @type {number} */ (this.imageWidth);
|
||||
const opacity = /** @type {number} */ (this.opacity);
|
||||
const originX = /** @type {number} */ (this.originX);
|
||||
const originY = /** @type {number} */ (this.originY);
|
||||
const rotateWithView = this.rotateWithView ? 1.0 : 0.0;
|
||||
// this.rotation_ is anti-clockwise, but rotation is clockwise
|
||||
const rotation = /** @type {number} */ (-this.rotation);
|
||||
const scale = /** @type {number} */ (this.scale);
|
||||
const width = /** @type {number} */ (this.width);
|
||||
const cos = Math.cos(rotation);
|
||||
const sin = Math.sin(rotation);
|
||||
let numIndices = this.indices.length;
|
||||
let numVertices = this.vertices.length;
|
||||
let i, n, offsetX, offsetY, x, y;
|
||||
for (i = offset; i < end; i += stride) {
|
||||
x = flatCoordinates[i] - this.origin[0];
|
||||
y = flatCoordinates[i + 1] - this.origin[1];
|
||||
|
||||
// There are 4 vertices per [x, y] point, one for each corner of the
|
||||
// rectangle we're going to draw. We'd use 1 vertex per [x, y] point if
|
||||
// WebGL supported Geometry Shaders (which can emit new vertices), but that
|
||||
// is not currently the case.
|
||||
//
|
||||
// And each vertex includes 8 values: the x and y coordinates, the x and
|
||||
// y offsets used to calculate the position of the corner, the u and
|
||||
// v texture coordinates for the corner, the opacity, and whether the
|
||||
// the image should be rotated with the view (rotateWithView).
|
||||
|
||||
n = numVertices / 8;
|
||||
|
||||
// bottom-left corner
|
||||
offsetX = -scale * anchorX;
|
||||
offsetY = -scale * (height - anchorY);
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = originX / imageWidth;
|
||||
this.vertices[numVertices++] = (originY + height) / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
// bottom-right corner
|
||||
offsetX = scale * (width - anchorX);
|
||||
offsetY = -scale * (height - anchorY);
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = (originX + width) / imageWidth;
|
||||
this.vertices[numVertices++] = (originY + height) / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
// top-right corner
|
||||
offsetX = scale * (width - anchorX);
|
||||
offsetY = scale * anchorY;
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = (originX + width) / imageWidth;
|
||||
this.vertices[numVertices++] = originY / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
// top-left corner
|
||||
offsetX = -scale * anchorX;
|
||||
offsetY = scale * anchorY;
|
||||
this.vertices[numVertices++] = x;
|
||||
this.vertices[numVertices++] = y;
|
||||
this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
|
||||
this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
|
||||
this.vertices[numVertices++] = originX / imageWidth;
|
||||
this.vertices[numVertices++] = originY / imageHeight;
|
||||
this.vertices[numVertices++] = opacity;
|
||||
this.vertices[numVertices++] = rotateWithView;
|
||||
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = n + 1;
|
||||
this.indices[numIndices++] = n + 2;
|
||||
this.indices[numIndices++] = n;
|
||||
this.indices[numIndices++] = n + 2;
|
||||
this.indices[numIndices++] = n + 3;
|
||||
}
|
||||
|
||||
return numVertices;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @param {Array.<WebGLTexture>} textures Textures.
|
||||
* @param {Array.<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>} images Images.
|
||||
* @param {!Object.<string, WebGLTexture>} texturePerImage Texture cache.
|
||||
* @param {WebGLRenderingContext} gl Gl.
|
||||
*/
|
||||
WebGLTextureReplay.prototype.createTextures = function(textures, images, texturePerImage, gl) {
|
||||
let texture, image, uid, i;
|
||||
const ii = images.length;
|
||||
for (i = 0; i < ii; ++i) {
|
||||
image = images[i];
|
||||
|
||||
uid = getUid(image).toString();
|
||||
if (uid in texturePerImage) {
|
||||
texture = texturePerImage[uid];
|
||||
} else {
|
||||
texture = createTexture(
|
||||
gl, image, CLAMP_TO_EDGE, CLAMP_TO_EDGE);
|
||||
texturePerImage[uid] = texture;
|
||||
}
|
||||
textures[i] = texture;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLTextureReplay.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
|
||||
// get the program
|
||||
const program = context.getProgram(fragment, vertex);
|
||||
|
||||
// get the locations
|
||||
let locations;
|
||||
if (!this.defaultLocations) {
|
||||
locations = new Locations(gl, program);
|
||||
this.defaultLocations = locations;
|
||||
} else {
|
||||
locations = this.defaultLocations;
|
||||
}
|
||||
|
||||
// use the program (FIXME: use the return value)
|
||||
context.useProgram(program);
|
||||
|
||||
// enable the vertex attrib arrays
|
||||
gl.enableVertexAttribArray(locations.a_position);
|
||||
gl.vertexAttribPointer(locations.a_position, 2, FLOAT,
|
||||
false, 32, 0);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_offsets);
|
||||
gl.vertexAttribPointer(locations.a_offsets, 2, FLOAT,
|
||||
false, 32, 8);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_texCoord);
|
||||
gl.vertexAttribPointer(locations.a_texCoord, 2, FLOAT,
|
||||
false, 32, 16);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_opacity);
|
||||
gl.vertexAttribPointer(locations.a_opacity, 1, FLOAT,
|
||||
false, 32, 24);
|
||||
|
||||
gl.enableVertexAttribArray(locations.a_rotateWithView);
|
||||
gl.vertexAttribPointer(locations.a_rotateWithView, 1, FLOAT,
|
||||
false, 32, 28);
|
||||
|
||||
return locations;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLTextureReplay.prototype.shutDownProgram = function(gl, locations) {
|
||||
gl.disableVertexAttribArray(locations.a_position);
|
||||
gl.disableVertexAttribArray(locations.a_offsets);
|
||||
gl.disableVertexAttribArray(locations.a_texCoord);
|
||||
gl.disableVertexAttribArray(locations.a_opacity);
|
||||
gl.disableVertexAttribArray(locations.a_rotateWithView);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLTextureReplay.prototype.drawReplay = function(gl, context, skippedFeaturesHash, hitDetection) {
|
||||
const textures = hitDetection ? this.getHitDetectionTextures() : this.getTextures();
|
||||
const groupIndices = hitDetection ? this.hitDetectionGroupIndices : this.groupIndices;
|
||||
|
||||
if (!isEmpty(skippedFeaturesHash)) {
|
||||
this.drawReplaySkipping(gl, context, skippedFeaturesHash, textures, groupIndices);
|
||||
} else {
|
||||
let i, ii, start;
|
||||
for (i = 0, ii = textures.length, start = 0; i < ii; ++i) {
|
||||
gl.bindTexture(TEXTURE_2D, textures[i]);
|
||||
const end = groupIndices[i];
|
||||
this.drawElements(gl, context, start, end);
|
||||
start = end;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Draw the replay while paying attention to skipped features.
|
||||
*
|
||||
* This functions creates groups of features that can be drawn to together,
|
||||
* so that the number of `drawElements` calls is minimized.
|
||||
*
|
||||
* For example given the following texture groups:
|
||||
*
|
||||
* Group 1: A B C
|
||||
* Group 2: D [E] F G
|
||||
*
|
||||
* If feature E should be skipped, the following `drawElements` calls will be
|
||||
* made:
|
||||
*
|
||||
* drawElements with feature A, B and C
|
||||
* drawElements with feature D
|
||||
* drawElements with feature F and G
|
||||
*
|
||||
* @protected
|
||||
* @param {WebGLRenderingContext} gl gl.
|
||||
* @param {module:ol/webgl/Context} context Context.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
|
||||
* to skip.
|
||||
* @param {Array.<WebGLTexture>} textures Textures.
|
||||
* @param {Array.<number>} groupIndices Texture group indices.
|
||||
*/
|
||||
WebGLTextureReplay.prototype.drawReplaySkipping = function(gl, context, skippedFeaturesHash, textures,
|
||||
groupIndices) {
|
||||
let featureIndex = 0;
|
||||
|
||||
let i, ii;
|
||||
for (i = 0, ii = textures.length; i < ii; ++i) {
|
||||
gl.bindTexture(TEXTURE_2D, textures[i]);
|
||||
const groupStart = (i > 0) ? groupIndices[i - 1] : 0;
|
||||
const groupEnd = groupIndices[i];
|
||||
|
||||
let start = groupStart;
|
||||
let end = groupStart;
|
||||
while (featureIndex < this.startIndices.length &&
|
||||
this.startIndices[featureIndex] <= groupEnd) {
|
||||
const feature = this.startIndicesFeature[featureIndex];
|
||||
|
||||
const featureUid = getUid(feature).toString();
|
||||
if (skippedFeaturesHash[featureUid] !== undefined) {
|
||||
// feature should be skipped
|
||||
if (start !== end) {
|
||||
// draw the features so far
|
||||
this.drawElements(gl, context, start, end);
|
||||
}
|
||||
// continue with the next feature
|
||||
start = (featureIndex === this.startIndices.length - 1) ?
|
||||
groupEnd : this.startIndices[featureIndex + 1];
|
||||
end = start;
|
||||
} else {
|
||||
// the feature is not skipped, augment the end index
|
||||
end = (featureIndex === this.startIndices.length - 1) ?
|
||||
groupEnd : this.startIndices[featureIndex + 1];
|
||||
}
|
||||
featureIndex++;
|
||||
}
|
||||
|
||||
if (start !== end) {
|
||||
// draw the remaining features (in case there was no skipped feature
|
||||
// in this texture group, all features of a group are drawn together)
|
||||
this.drawElements(gl, context, start, end);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLTextureReplay.prototype.drawHitDetectionReplayOneByOne = function(gl, context, skippedFeaturesHash,
|
||||
featureCallback, opt_hitExtent) {
|
||||
let i, groupStart, start, end, feature, featureUid;
|
||||
let featureIndex = this.startIndices.length - 1;
|
||||
const hitDetectionTextures = this.getHitDetectionTextures();
|
||||
for (i = hitDetectionTextures.length - 1; i >= 0; --i) {
|
||||
gl.bindTexture(TEXTURE_2D, hitDetectionTextures[i]);
|
||||
groupStart = (i > 0) ? this.hitDetectionGroupIndices[i - 1] : 0;
|
||||
end = this.hitDetectionGroupIndices[i];
|
||||
|
||||
// draw all features for this texture group
|
||||
while (featureIndex >= 0 &&
|
||||
this.startIndices[featureIndex] >= groupStart) {
|
||||
start = this.startIndices[featureIndex];
|
||||
feature = this.startIndicesFeature[featureIndex];
|
||||
featureUid = getUid(feature).toString();
|
||||
|
||||
if (skippedFeaturesHash[featureUid] === undefined &&
|
||||
feature.getGeometry() &&
|
||||
(opt_hitExtent === undefined || intersects(
|
||||
/** @type {Array<number>} */ (opt_hitExtent),
|
||||
feature.getGeometry().getExtent()))) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
this.drawElements(gl, context, start, end);
|
||||
|
||||
const result = featureCallback(feature);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
end = start;
|
||||
featureIndex--;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
WebGLTextureReplay.prototype.finish = function(context) {
|
||||
this.anchorX = undefined;
|
||||
this.anchorY = undefined;
|
||||
this.height = undefined;
|
||||
this.imageHeight = undefined;
|
||||
this.imageWidth = undefined;
|
||||
this.indices = null;
|
||||
this.opacity = undefined;
|
||||
this.originX = undefined;
|
||||
this.originY = undefined;
|
||||
this.rotateWithView = undefined;
|
||||
this.rotation = undefined;
|
||||
this.scale = undefined;
|
||||
this.vertices = null;
|
||||
this.width = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @param {boolean=} opt_all Return hit detection textures with regular ones.
|
||||
* @returns {Array.<WebGLTexture>} Textures.
|
||||
*/
|
||||
WebGLTextureReplay.prototype.getTextures = function(opt_all) {};
|
||||
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @protected
|
||||
* @returns {Array.<WebGLTexture>} Textures.
|
||||
*/
|
||||
WebGLTextureReplay.prototype.getHitDetectionTextures = function() {};
|
||||
export default WebGLTextureReplay;
|
||||
|
||||
Reference in New Issue
Block a user