ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Automated class transform

Browse Source 
npx lebab --replace src --transform class
This commit is contained in:
Tim Schaub
2018-07-16 16:18:16 -06:00
parent 60e85e7d89
commit 7b4a73f3b9
145 changed files with 32887 additions and 33714 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/render/Box.js
+107 -109
View File
@@ -12,123 +12,121 @@ import Polygon from '../geom/Polygon.js';
* @extends {module:ol/Disposable}
* @param {string} className CSS class name.
*/
const RenderBox = function(className) {
class RenderBox {
constructor(className) {
/**
* @type {module:ol/geom/Polygon}
* @private
*/
this.geometry_ = null;
/**
* @type {module:ol/geom/Polygon}
* @private
*/
this.geometry_ = null;
/**
* @type {HTMLDivElement}
* @private
*/
this.element_ = /** @type {HTMLDivElement} */ (document.createElement('div'));
this.element_.style.position = 'absolute';
this.element_.className = 'ol-box ' + className;
/**
* @type {HTMLDivElement}
* @private
*/
this.element_ = /** @type {HTMLDivElement} */ (document.createElement('div'));
this.element_.style.position = 'absolute';
this.element_.className = 'ol-box ' + className;
/**
* @private
* @type {module:ol/PluggableMap}
*/
this.map_ = null;
/**
* @private
* @type {module:ol/PluggableMap}
*/
this.map_ = null;
/**
* @private
* @type {module:ol~Pixel}
*/
this.startPixel_ = null;
/**
* @private
* @type {module:ol~Pixel}
*/
this.startPixel_ = null;
/**
* @private
* @type {module:ol~Pixel}
*/
this.endPixel_ = null;
/**
* @private
* @type {module:ol~Pixel}
*/
this.endPixel_ = null;
};
}
/**
* @inheritDoc
*/
disposeInternal() {
this.setMap(null);
}
/**
* @private
*/
render_() {
const startPixel = this.startPixel_;
const endPixel = this.endPixel_;
const px = 'px';
const style = this.element_.style;
style.left = Math.min(startPixel[0], endPixel[0]) + px;
style.top = Math.min(startPixel[1], endPixel[1]) + px;
style.width = Math.abs(endPixel[0] - startPixel[0]) + px;
style.height = Math.abs(endPixel[1] - startPixel[1]) + px;
}
/**
* @param {module:ol/PluggableMap} map Map.
*/
setMap(map) {
if (this.map_) {
this.map_.getOverlayContainer().removeChild(this.element_);
const style = this.element_.style;
style.left = style.top = style.width = style.height = 'inherit';
}
this.map_ = map;
if (this.map_) {
this.map_.getOverlayContainer().appendChild(this.element_);
}
}
/**
* @param {module:ol~Pixel} startPixel Start pixel.
* @param {module:ol~Pixel} endPixel End pixel.
*/
setPixels(startPixel, endPixel) {
this.startPixel_ = startPixel;
this.endPixel_ = endPixel;
this.createOrUpdateGeometry();
this.render_();
}
/**
* Creates or updates the cached geometry.
*/
createOrUpdateGeometry() {
const startPixel = this.startPixel_;
const endPixel = this.endPixel_;
const pixels = [
startPixel,
[startPixel[0], endPixel[1]],
endPixel,
[endPixel[0], startPixel[1]]
];
const coordinates = pixels.map(this.map_.getCoordinateFromPixel, this.map_);
// close the polygon
coordinates[4] = coordinates[0].slice();
if (!this.geometry_) {
this.geometry_ = new Polygon([coordinates]);
} else {
this.geometry_.setCoordinates([coordinates]);
}
}
/**
* @return {module:ol/geom/Polygon} Geometry.
*/
getGeometry() {
return this.geometry_;
}
}
inherits(RenderBox, Disposable);
/**
* @inheritDoc
*/
RenderBox.prototype.disposeInternal = function() {
this.setMap(null);
};
/**
* @private
*/
RenderBox.prototype.render_ = function() {
const startPixel = this.startPixel_;
const endPixel = this.endPixel_;
const px = 'px';
const style = this.element_.style;
style.left = Math.min(startPixel[0], endPixel[0]) + px;
style.top = Math.min(startPixel[1], endPixel[1]) + px;
style.width = Math.abs(endPixel[0] - startPixel[0]) + px;
style.height = Math.abs(endPixel[1] - startPixel[1]) + px;
};
/**
* @param {module:ol/PluggableMap} map Map.
*/
RenderBox.prototype.setMap = function(map) {
if (this.map_) {
this.map_.getOverlayContainer().removeChild(this.element_);
const style = this.element_.style;
style.left = style.top = style.width = style.height = 'inherit';
}
this.map_ = map;
if (this.map_) {
this.map_.getOverlayContainer().appendChild(this.element_);
}
};
/**
* @param {module:ol~Pixel} startPixel Start pixel.
* @param {module:ol~Pixel} endPixel End pixel.
*/
RenderBox.prototype.setPixels = function(startPixel, endPixel) {
this.startPixel_ = startPixel;
this.endPixel_ = endPixel;
this.createOrUpdateGeometry();
this.render_();
};
/**
* Creates or updates the cached geometry.
*/
RenderBox.prototype.createOrUpdateGeometry = function() {
const startPixel = this.startPixel_;
const endPixel = this.endPixel_;
const pixels = [
startPixel,
[startPixel[0], endPixel[1]],
endPixel,
[endPixel[0], startPixel[1]]
];
const coordinates = pixels.map(this.map_.getCoordinateFromPixel, this.map_);
// close the polygon
coordinates[4] = coordinates[0].slice();
if (!this.geometry_) {
this.geometry_ = new Polygon([coordinates]);
} else {
this.geometry_.setCoordinates([coordinates]);
}
};
/**
* @return {module:ol/geom/Polygon} Geometry.
*/
RenderBox.prototype.getGeometry = function() {
return this.geometry_;
};
export default RenderBox;
src/ol/render/Feature.js
+198 -205
View File
@@ -25,56 +25,212 @@ import {create as createTransform, compose as composeTransform} from '../transfo
* @param {Object.<string, *>} properties Properties.
* @param {number|string|undefined} id Feature id.
*/
const RenderFeature = function(type, flatCoordinates, ends, properties, id) {
/**
* @private
* @type {module:ol/extent~Extent|undefined}
*/
this.extent_;
class RenderFeature {
constructor(type, flatCoordinates, ends, properties, id) {
/**
* @private
* @type {module:ol/extent~Extent|undefined}
*/
this.extent_;
/**
* @private
* @type {number|string|undefined}
*/
this.id_ = id;
/**
* @private
* @type {number|string|undefined}
*/
this.id_ = id;
/**
* @private
* @type {module:ol/geom/GeometryType}
*/
this.type_ = type;
/**
* @private
* @type {module:ol/geom/GeometryType}
*/
this.type_ = type;
/**
* @private
* @type {Array.<number>}
*/
this.flatCoordinates_ = flatCoordinates;
/**
* @private
* @type {Array.<number>}
*/
this.flatCoordinates_ = flatCoordinates;
/**
* @private
* @type {Array.<number>}
*/
this.flatInteriorPoints_ = null;
/**
* @private
* @type {Array.<number>}
*/
this.flatInteriorPoints_ = null;
/**
* @private
* @type {Array.<number>}
*/
this.flatMidpoints_ = null;
/**
* @private
* @type {Array.<number>}
*/
this.flatMidpoints_ = null;
/**
* @private
* @type {Array.<number>|Array.<Array.<number>>}
*/
this.ends_ = ends;
/**
* @private
* @type {Array.<number>|Array.<Array.<number>>}
*/
this.ends_ = ends;
/**
* @private
* @type {Object.<string, *>}
*/
this.properties_ = properties;
/**
* @private
* @type {Object.<string, *>}
*/
this.properties_ = properties;
};
}
/**
* Get a feature property by its key.
* @param {string} key Key
* @return {*} Value for the requested key.
* @api
*/
get(key) {
return this.properties_[key];
}
/**
* Get the extent of this feature's geometry.
* @return {module:ol/extent~Extent} Extent.
* @api
*/
getExtent() {
if (!this.extent_) {
this.extent_ = this.type_ === GeometryType.POINT ?
createOrUpdateFromCoordinate(this.flatCoordinates_) :
createOrUpdateFromFlatCoordinates(
this.flatCoordinates_, 0, this.flatCoordinates_.length, 2);
}
return this.extent_;
}
/**
* @return {Array.<number>} Flat interior points.
*/
getFlatInteriorPoint() {
if (!this.flatInteriorPoints_) {
const flatCenter = getCenter(this.getExtent());
this.flatInteriorPoints_ = getInteriorPointOfArray(
this.flatCoordinates_, 0, this.ends_, 2, flatCenter, 0);
}
return this.flatInteriorPoints_;
}
/**
* @return {Array.<number>} Flat interior points.
*/
getFlatInteriorPoints() {
if (!this.flatInteriorPoints_) {
const flatCenters = linearRingssCenter(
this.flatCoordinates_, 0, this.ends_, 2);
this.flatInteriorPoints_ = getInteriorPointsOfMultiArray(
this.flatCoordinates_, 0, this.ends_, 2, flatCenters);
}
return this.flatInteriorPoints_;
}
/**
* @return {Array.<number>} Flat midpoint.
*/
getFlatMidpoint() {
if (!this.flatMidpoints_) {
this.flatMidpoints_ = interpolatePoint(
this.flatCoordinates_, 0, this.flatCoordinates_.length, 2, 0.5);
}
return this.flatMidpoints_;
}
/**
* @return {Array.<number>} Flat midpoints.
*/
getFlatMidpoints() {
if (!this.flatMidpoints_) {
this.flatMidpoints_ = [];
const flatCoordinates = this.flatCoordinates_;
let offset = 0;
const ends = this.ends_;
for (let i = 0, ii = ends.length; i < ii; ++i) {
const end = ends[i];
const midpoint = interpolatePoint(
flatCoordinates, offset, end, 2, 0.5);
extend(this.flatMidpoints_, midpoint);
offset = end;
}
}
return this.flatMidpoints_;
}
/**
* Get the feature identifier. This is a stable identifier for the feature and
* is set when reading data from a remote source.
* @return {number|string|undefined} Id.
* @api
*/
getId() {
return this.id_;
}
/**
* @return {Array.<number>} Flat coordinates.
*/
getOrientedFlatCoordinates() {
return this.flatCoordinates_;
}
/**
* For API compatibility with {@link module:ol/Feature~Feature}, this method is useful when
* determining the geometry type in style function (see {@link #getType}).
* @return {module:ol/render/Feature} Feature.
* @api
*/
getGeometry() {
return this;
}
/**
* Get the feature properties.
* @return {Object.<string, *>} Feature properties.
* @api
*/
getProperties() {
return this.properties_;
}
/**
* @return {number} Stride.
*/
getStride() {
return 2;
}
/**
* Get the type of this feature's geometry.
* @return {module:ol/geom/GeometryType} Geometry type.
* @api
*/
getType() {
return this.type_;
}
/**
* Transform geometry coordinates from tile pixel space to projected.
* The SRS of the source and destination are expected to be the same.
*
* @param {module:ol/proj~ProjectionLike} source The current projection
* @param {module:ol/proj~ProjectionLike} destination The desired projection.
*/
transform(source, destination) {
source = getProjection(source);
const pixelExtent = source.getExtent();
const projectedExtent = source.getWorldExtent();
const scale = getHeight(projectedExtent) / getHeight(pixelExtent);
composeTransform(tmpTransform,
projectedExtent[0], projectedExtent[3],
scale, -scale, 0,
0, 0);
transform2D(this.flatCoordinates_, 0, this.flatCoordinates_.length, 2,
tmpTransform, this.flatCoordinates_);
}
}
/**
@@ -83,17 +239,6 @@ const RenderFeature = function(type, flatCoordinates, ends, properties, id) {
const tmpTransform = createTransform();
/**
* Get a feature property by its key.
* @param {string} key Key
* @return {*} Value for the requested key.
* @api
*/
RenderFeature.prototype.get = function(key) {
return this.properties_[key];
};
/**
* @return {Array.<number>|Array.<Array.<number>>} Ends or endss.
*/
@@ -103,101 +248,6 @@ RenderFeature.prototype.getEndss = function() {
};
/**
* Get the extent of this feature's geometry.
* @return {module:ol/extent~Extent} Extent.
* @api
*/
RenderFeature.prototype.getExtent = function() {
if (!this.extent_) {
this.extent_ = this.type_ === GeometryType.POINT ?
createOrUpdateFromCoordinate(this.flatCoordinates_) :
createOrUpdateFromFlatCoordinates(
this.flatCoordinates_, 0, this.flatCoordinates_.length, 2);
}
return this.extent_;
};
/**
* @return {Array.<number>} Flat interior points.
*/
RenderFeature.prototype.getFlatInteriorPoint = function() {
if (!this.flatInteriorPoints_) {
const flatCenter = getCenter(this.getExtent());
this.flatInteriorPoints_ = getInteriorPointOfArray(
this.flatCoordinates_, 0, this.ends_, 2, flatCenter, 0);
}
return this.flatInteriorPoints_;
};
/**
* @return {Array.<number>} Flat interior points.
*/
RenderFeature.prototype.getFlatInteriorPoints = function() {
if (!this.flatInteriorPoints_) {
const flatCenters = linearRingssCenter(
this.flatCoordinates_, 0, this.ends_, 2);
this.flatInteriorPoints_ = getInteriorPointsOfMultiArray(
this.flatCoordinates_, 0, this.ends_, 2, flatCenters);
}
return this.flatInteriorPoints_;
};
/**
* @return {Array.<number>} Flat midpoint.
*/
RenderFeature.prototype.getFlatMidpoint = function() {
if (!this.flatMidpoints_) {
this.flatMidpoints_ = interpolatePoint(
this.flatCoordinates_, 0, this.flatCoordinates_.length, 2, 0.5);
}
return this.flatMidpoints_;
};
/**
* @return {Array.<number>} Flat midpoints.
*/
RenderFeature.prototype.getFlatMidpoints = function() {
if (!this.flatMidpoints_) {
this.flatMidpoints_ = [];
const flatCoordinates = this.flatCoordinates_;
let offset = 0;
const ends = this.ends_;
for (let i = 0, ii = ends.length; i < ii; ++i) {
const end = ends[i];
const midpoint = interpolatePoint(
flatCoordinates, offset, end, 2, 0.5);
extend(this.flatMidpoints_, midpoint);
offset = end;
}
}
return this.flatMidpoints_;
};
/**
* Get the feature identifier. This is a stable identifier for the feature and
* is set when reading data from a remote source.
* @return {number|string|undefined} Id.
* @api
*/
RenderFeature.prototype.getId = function() {
return this.id_;
};
/**
* @return {Array.<number>} Flat coordinates.
*/
RenderFeature.prototype.getOrientedFlatCoordinates = function() {
return this.flatCoordinates_;
};
/**
* @return {Array.<number>} Flat coordinates.
*/
@@ -205,27 +255,6 @@ RenderFeature.prototype.getFlatCoordinates =
RenderFeature.prototype.getOrientedFlatCoordinates;
/**
* For API compatibility with {@link module:ol/Feature~Feature}, this method is useful when
* determining the geometry type in style function (see {@link #getType}).
* @return {module:ol/render/Feature} Feature.
* @api
*/
RenderFeature.prototype.getGeometry = function() {
return this;
};
/**
* Get the feature properties.
* @return {Object.<string, *>} Feature properties.
* @api
*/
RenderFeature.prototype.getProperties = function() {
return this.properties_;
};
/**
* Get the feature for working with its geometry.
* @return {module:ol/render/Feature} Feature.
@@ -234,46 +263,10 @@ RenderFeature.prototype.getSimplifiedGeometry =
RenderFeature.prototype.getGeometry;
/**
* @return {number} Stride.
*/
RenderFeature.prototype.getStride = function() {
return 2;
};
/**
* @return {undefined}
*/
RenderFeature.prototype.getStyleFunction = UNDEFINED;
/**
* Get the type of this feature's geometry.
* @return {module:ol/geom/GeometryType} Geometry type.
* @api
*/
RenderFeature.prototype.getType = function() {
return this.type_;
};
/**
* Transform geometry coordinates from tile pixel space to projected.
* The SRS of the source and destination are expected to be the same.
*
* @param {module:ol/proj~ProjectionLike} source The current projection
* @param {module:ol/proj~ProjectionLike} destination The desired projection.
*/
RenderFeature.prototype.transform = function(source, destination) {
source = getProjection(source);
const pixelExtent = source.getExtent();
const projectedExtent = source.getWorldExtent();
const scale = getHeight(projectedExtent) / getHeight(pixelExtent);
composeTransform(tmpTransform,
projectedExtent[0], projectedExtent[3],
scale, -scale, 0,
0, 0);
transform2D(this.flatCoordinates_, 0, this.flatCoordinates_.length, 2,
tmpTransform, this.flatCoordinates_);
};
export default RenderFeature;
src/ol/render/ReplayGroup.js
+14 -15
View File
@@ -6,21 +6,20 @@
* @constructor
* @abstract
*/
const ReplayGroup = function() {};
class ReplayGroup {
/**
* @abstract
* @param {number|undefined} zIndex Z index.
* @param {module:ol/render/ReplayType} replayType Replay type.
* @return {module:ol/render/VectorContext} Replay.
*/
getReplay(zIndex, replayType) {}
/**
* @abstract
* @return {boolean} Is empty.
*/
isEmpty() {}
}
/**
* @abstract
* @param {number|undefined} zIndex Z index.
* @param {module:ol/render/ReplayType} replayType Replay type.
* @return {module:ol/render/VectorContext} Replay.
*/
ReplayGroup.prototype.getReplay = function(zIndex, replayType) {};
/**
* @abstract
* @return {boolean} Is empty.
*/
ReplayGroup.prototype.isEmpty = function() {};
export default ReplayGroup;
src/ol/render/VectorContext.js
+88 -104
View File
@@ -9,124 +9,108 @@
* @struct
* @api
*/
const VectorContext = function() {
};
class VectorContext {
/**
* Render a geometry with a custom renderer.
*
* @param {module:ol/geom/SimpleGeometry} geometry Geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
* @param {Function} renderer Renderer.
*/
drawCustom(geometry, feature, renderer) {}
/**
* Render a geometry.
*
* @param {module:ol/geom/Geometry} geometry The geometry to render.
*/
drawGeometry(geometry) {}
/**
* Render a geometry with a custom renderer.
*
* @param {module:ol/geom/SimpleGeometry} geometry Geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
* @param {Function} renderer Renderer.
*/
VectorContext.prototype.drawCustom = function(geometry, feature, renderer) {};
/**
* Set the rendering style.
*
* @param {module:ol/style/Style} style The rendering style.
*/
setStyle(style) {}
/**
* @param {module:ol/geom/Circle} circleGeometry Circle geometry.
* @param {module:ol/Feature} feature Feature.
*/
drawCircle(circleGeometry, feature) {}
/**
* Render a geometry.
*
* @param {module:ol/geom/Geometry} geometry The geometry to render.
*/
VectorContext.prototype.drawGeometry = function(geometry) {};
/**
* @param {module:ol/Feature} feature Feature.
* @param {module:ol/style/Style} style Style.
*/
drawFeature(feature, style) {}
/**
* @param {module:ol/geom/GeometryCollection} geometryCollectionGeometry Geometry
* collection.
* @param {module:ol/Feature} feature Feature.
*/
drawGeometryCollection(geometryCollectionGeometry, feature) {}
/**
* Set the rendering style.
*
* @param {module:ol/style/Style} style The rendering style.
*/
VectorContext.prototype.setStyle = function(style) {};
/**
* @param {module:ol/geom/LineString|module:ol/render/Feature} lineStringGeometry Line string geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
drawLineString(lineStringGeometry, feature) {}
/**
* @param {module:ol/geom/MultiLineString|module:ol/render/Feature} multiLineStringGeometry MultiLineString geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
drawMultiLineString(multiLineStringGeometry, feature) {}
/**
* @param {module:ol/geom/Circle} circleGeometry Circle geometry.
* @param {module:ol/Feature} feature Feature.
*/
VectorContext.prototype.drawCircle = function(circleGeometry, feature) {};
/**
* @param {module:ol/geom/MultiPoint|module:ol/render/Feature} multiPointGeometry MultiPoint geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
drawMultiPoint(multiPointGeometry, feature) {}
/**
* @param {module:ol/geom/MultiPolygon} multiPolygonGeometry MultiPolygon geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
drawMultiPolygon(multiPolygonGeometry, feature) {}
/**
* @param {module:ol/Feature} feature Feature.
* @param {module:ol/style/Style} style Style.
*/
VectorContext.prototype.drawFeature = function(feature, style) {};
/**
* @param {module:ol/geom/Point|module:ol/render/Feature} pointGeometry Point geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
drawPoint(pointGeometry, feature) {}
/**
* @param {module:ol/geom/Polygon|module:ol/render/Feature} polygonGeometry Polygon geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
drawPolygon(polygonGeometry, feature) {}
/**
* @param {module:ol/geom/GeometryCollection} geometryCollectionGeometry Geometry
* collection.
* @param {module:ol/Feature} feature Feature.
*/
VectorContext.prototype.drawGeometryCollection = function(geometryCollectionGeometry, feature) {};
/**
* @param {module:ol/geom/Geometry|module:ol/render/Feature} geometry Geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
drawText(geometry, feature) {}
/**
* @param {module:ol/style/Fill} fillStyle Fill style.
* @param {module:ol/style/Stroke} strokeStyle Stroke style.
*/
setFillStrokeStyle(fillStyle, strokeStyle) {}
/**
* @param {module:ol/geom/LineString|module:ol/render/Feature} lineStringGeometry Line string geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
VectorContext.prototype.drawLineString = function(lineStringGeometry, feature) {};
/**
* @param {module:ol/style/Image} imageStyle Image style.
* @param {module:ol/render/canvas~DeclutterGroup=} opt_declutterGroup Declutter.
*/
setImageStyle(imageStyle, opt_declutterGroup) {}
/**
* @param {module:ol/style/Text} textStyle Text style.
* @param {module:ol/render/canvas~DeclutterGroup=} opt_declutterGroup Declutter.
*/
setTextStyle(textStyle, opt_declutterGroup) {}
}
/**
* @param {module:ol/geom/MultiLineString|module:ol/render/Feature} multiLineStringGeometry MultiLineString geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
VectorContext.prototype.drawMultiLineString = function(multiLineStringGeometry, feature) {};
/**
* @param {module:ol/geom/MultiPoint|module:ol/render/Feature} multiPointGeometry MultiPoint geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
VectorContext.prototype.drawMultiPoint = function(multiPointGeometry, feature) {};
/**
* @param {module:ol/geom/MultiPolygon} multiPolygonGeometry MultiPolygon geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
VectorContext.prototype.drawMultiPolygon = function(multiPolygonGeometry, feature) {};
/**
* @param {module:ol/geom/Point|module:ol/render/Feature} pointGeometry Point geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
VectorContext.prototype.drawPoint = function(pointGeometry, feature) {};
/**
* @param {module:ol/geom/Polygon|module:ol/render/Feature} polygonGeometry Polygon geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
VectorContext.prototype.drawPolygon = function(polygonGeometry, feature) {};
/**
* @param {module:ol/geom/Geometry|module:ol/render/Feature} geometry Geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
VectorContext.prototype.drawText = function(geometry, feature) {};
/**
* @param {module:ol/style/Fill} fillStyle Fill style.
* @param {module:ol/style/Stroke} strokeStyle Stroke style.
*/
VectorContext.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {};
/**
* @param {module:ol/style/Image} imageStyle Image style.
* @param {module:ol/render/canvas~DeclutterGroup=} opt_declutterGroup Declutter.
*/
VectorContext.prototype.setImageStyle = function(imageStyle, opt_declutterGroup) {};
/**
* @param {module:ol/style/Text} textStyle Text style.
* @param {module:ol/render/canvas~DeclutterGroup=} opt_declutterGroup Declutter.
*/
VectorContext.prototype.setTextStyle = function(textStyle, opt_declutterGroup) {};
export default VectorContext;
src/ol/render/canvas/ImageReplay.js
+193 -195
View File
@@ -16,218 +16,216 @@ import CanvasReplay from '../canvas/Replay.js';
* @param {?} declutterTree Declutter tree.
* @struct
*/
const CanvasImageReplay = function(
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
CanvasReplay.call(this,
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
class CanvasImageReplay {
constructor(tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
CanvasReplay.call(this,
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
/**
* @private
* @type {module:ol/render/canvas~DeclutterGroup}
*/
this.declutterGroup_ = null;
/**
* @private
* @type {module:ol/render/canvas~DeclutterGroup}
*/
this.declutterGroup_ = null;
/**
* @private
* @type {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement}
*/
this.hitDetectionImage_ = null;
/**
* @private
* @type {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement}
*/
this.hitDetectionImage_ = null;
/**
* @private
* @type {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement}
*/
this.image_ = null;
/**
* @private
* @type {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement}
*/
this.image_ = null;
/**
* @private
* @type {number|undefined}
*/
this.anchorX_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.anchorX_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.anchorY_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.anchorY_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.height_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.height_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.opacity_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.opacity_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.originX_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.originX_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.originY_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.originY_ = undefined;
/**
* @private
* @type {boolean|undefined}
*/
this.rotateWithView_ = undefined;
/**
* @private
* @type {boolean|undefined}
*/
this.rotateWithView_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.rotation_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.rotation_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.scale_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.scale_ = undefined;
/**
* @private
* @type {boolean|undefined}
*/
this.snapToPixel_ = undefined;
/**
* @private
* @type {boolean|undefined}
*/
this.snapToPixel_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.width_ = undefined;
/**
* @private
* @type {number|undefined}
*/
this.width_ = undefined;
};
}
/**
* @param {Array.<number>} flatCoordinates Flat coordinates.
* @param {number} offset Offset.
* @param {number} end End.
* @param {number} stride Stride.
* @private
* @return {number} My end.
*/
drawCoordinates_(flatCoordinates, offset, end, stride) {
return this.appendFlatCoordinates(flatCoordinates, offset, end, stride, false, false);
}
/**
* @inheritDoc
*/
drawPoint(pointGeometry, feature) {
if (!this.image_) {
return;
}
this.beginGeometry(pointGeometry, feature);
const flatCoordinates = pointGeometry.getFlatCoordinates();
const stride = pointGeometry.getStride();
const myBegin = this.coordinates.length;
const myEnd = this.drawCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
this.instructions.push([
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
// Remaining arguments to DRAW_IMAGE are in alphabetical order
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
this.scale_ * this.pixelRatio, this.snapToPixel_, this.width_
]);
this.hitDetectionInstructions.push([
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.hitDetectionImage_,
// Remaining arguments to DRAW_IMAGE are in alphabetical order
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
this.scale_, this.snapToPixel_, this.width_
]);
this.endGeometry(pointGeometry, feature);
}
/**
* @inheritDoc
*/
drawMultiPoint(multiPointGeometry, feature) {
if (!this.image_) {
return;
}
this.beginGeometry(multiPointGeometry, feature);
const flatCoordinates = multiPointGeometry.getFlatCoordinates();
const stride = multiPointGeometry.getStride();
const myBegin = this.coordinates.length;
const myEnd = this.drawCoordinates_(
flatCoordinates, 0, flatCoordinates.length, stride);
this.instructions.push([
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
// Remaining arguments to DRAW_IMAGE are in alphabetical order
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
this.scale_ * this.pixelRatio, this.snapToPixel_, this.width_
]);
this.hitDetectionInstructions.push([
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.hitDetectionImage_,
// Remaining arguments to DRAW_IMAGE are in alphabetical order
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
this.scale_, this.snapToPixel_, this.width_
]);
this.endGeometry(multiPointGeometry, feature);
}
/**
* @inheritDoc
*/
finish() {
this.reverseHitDetectionInstructions();
// FIXME this doesn't really protect us against further calls to draw*Geometry
this.anchorX_ = undefined;
this.anchorY_ = undefined;
this.hitDetectionImage_ = null;
this.image_ = null;
this.height_ = undefined;
this.scale_ = undefined;
this.opacity_ = undefined;
this.originX_ = undefined;
this.originY_ = undefined;
this.rotateWithView_ = undefined;
this.rotation_ = undefined;
this.snapToPixel_ = undefined;
this.width_ = undefined;
}
/**
* @inheritDoc
*/
setImageStyle(imageStyle, declutterGroup) {
const anchor = imageStyle.getAnchor();
const size = imageStyle.getSize();
const hitDetectionImage = imageStyle.getHitDetectionImage(1);
const image = imageStyle.getImage(1);
const origin = imageStyle.getOrigin();
this.anchorX_ = anchor[0];
this.anchorY_ = anchor[1];
this.declutterGroup_ = /** @type {module:ol/render/canvas~DeclutterGroup} */ (declutterGroup);
this.hitDetectionImage_ = hitDetectionImage;
this.image_ = image;
this.height_ = size[1];
this.opacity_ = imageStyle.getOpacity();
this.originX_ = origin[0];
this.originY_ = origin[1];
this.rotateWithView_ = imageStyle.getRotateWithView();
this.rotation_ = imageStyle.getRotation();
this.scale_ = imageStyle.getScale();
this.snapToPixel_ = imageStyle.getSnapToPixel();
this.width_ = size[0];
}
}
inherits(CanvasImageReplay, CanvasReplay);
/**
* @param {Array.<number>} flatCoordinates Flat coordinates.
* @param {number} offset Offset.
* @param {number} end End.
* @param {number} stride Stride.
* @private
* @return {number} My end.
*/
CanvasImageReplay.prototype.drawCoordinates_ = function(flatCoordinates, offset, end, stride) {
return this.appendFlatCoordinates(flatCoordinates, offset, end, stride, false, false);
};
/**
* @inheritDoc
*/
CanvasImageReplay.prototype.drawPoint = function(pointGeometry, feature) {
if (!this.image_) {
return;
}
this.beginGeometry(pointGeometry, feature);
const flatCoordinates = pointGeometry.getFlatCoordinates();
const stride = pointGeometry.getStride();
const myBegin = this.coordinates.length;
const myEnd = this.drawCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
this.instructions.push([
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
// Remaining arguments to DRAW_IMAGE are in alphabetical order
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
this.scale_ * this.pixelRatio, this.snapToPixel_, this.width_
]);
this.hitDetectionInstructions.push([
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.hitDetectionImage_,
// Remaining arguments to DRAW_IMAGE are in alphabetical order
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
this.scale_, this.snapToPixel_, this.width_
]);
this.endGeometry(pointGeometry, feature);
};
/**
* @inheritDoc
*/
CanvasImageReplay.prototype.drawMultiPoint = function(multiPointGeometry, feature) {
if (!this.image_) {
return;
}
this.beginGeometry(multiPointGeometry, feature);
const flatCoordinates = multiPointGeometry.getFlatCoordinates();
const stride = multiPointGeometry.getStride();
const myBegin = this.coordinates.length;
const myEnd = this.drawCoordinates_(
flatCoordinates, 0, flatCoordinates.length, stride);
this.instructions.push([
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
// Remaining arguments to DRAW_IMAGE are in alphabetical order
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
this.scale_ * this.pixelRatio, this.snapToPixel_, this.width_
]);
this.hitDetectionInstructions.push([
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.hitDetectionImage_,
// Remaining arguments to DRAW_IMAGE are in alphabetical order
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
this.scale_, this.snapToPixel_, this.width_
]);
this.endGeometry(multiPointGeometry, feature);
};
/**
* @inheritDoc
*/
CanvasImageReplay.prototype.finish = function() {
this.reverseHitDetectionInstructions();
// FIXME this doesn't really protect us against further calls to draw*Geometry
this.anchorX_ = undefined;
this.anchorY_ = undefined;
this.hitDetectionImage_ = null;
this.image_ = null;
this.height_ = undefined;
this.scale_ = undefined;
this.opacity_ = undefined;
this.originX_ = undefined;
this.originY_ = undefined;
this.rotateWithView_ = undefined;
this.rotation_ = undefined;
this.snapToPixel_ = undefined;
this.width_ = undefined;
};
/**
* @inheritDoc
*/
CanvasImageReplay.prototype.setImageStyle = function(imageStyle, declutterGroup) {
const anchor = imageStyle.getAnchor();
const size = imageStyle.getSize();
const hitDetectionImage = imageStyle.getHitDetectionImage(1);
const image = imageStyle.getImage(1);
const origin = imageStyle.getOrigin();
this.anchorX_ = anchor[0];
this.anchorY_ = anchor[1];
this.declutterGroup_ = /** @type {module:ol/render/canvas~DeclutterGroup} */ (declutterGroup);
this.hitDetectionImage_ = hitDetectionImage;
this.image_ = image;
this.height_ = size[1];
this.opacity_ = imageStyle.getOpacity();
this.originX_ = origin[0];
this.originY_ = origin[1];
this.rotateWithView_ = imageStyle.getRotateWithView();
this.rotation_ = imageStyle.getRotation();
this.scale_ = imageStyle.getScale();
this.snapToPixel_ = imageStyle.getSnapToPixel();
this.width_ = size[0];
};
export default CanvasImageReplay;
src/ol/render/canvas/Immediate.js
+837 -854
View File
File diff suppressed because it is too large Load Diff
src/ol/render/canvas/LineStringReplay.js
+101 -103
View File
@@ -16,111 +16,109 @@ import CanvasReplay from '../canvas/Replay.js';
* @param {?} declutterTree Declutter tree.
* @struct
*/
const CanvasLineStringReplay = function(
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
CanvasReplay.call(this,
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
};
class CanvasLineStringReplay {
constructor(tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
CanvasReplay.call(this,
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
}
/**
* @param {Array.<number>} flatCoordinates Flat coordinates.
* @param {number} offset Offset.
* @param {number} end End.
* @param {number} stride Stride.
* @private
* @return {number} end.
*/
drawFlatCoordinates_(flatCoordinates, offset, end, stride) {
const myBegin = this.coordinates.length;
const myEnd = this.appendFlatCoordinates(
flatCoordinates, offset, end, stride, false, false);
const moveToLineToInstruction = [CanvasInstruction.MOVE_TO_LINE_TO, myBegin, myEnd];
this.instructions.push(moveToLineToInstruction);
this.hitDetectionInstructions.push(moveToLineToInstruction);
return end;
}
/**
* @inheritDoc
*/
drawLineString(lineStringGeometry, feature) {
const state = this.state;
const strokeStyle = state.strokeStyle;
const lineWidth = state.lineWidth;
if (strokeStyle === undefined || lineWidth === undefined) {
return;
}
this.updateStrokeStyle(state, this.applyStroke);
this.beginGeometry(lineStringGeometry, feature);
this.hitDetectionInstructions.push([
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
], beginPathInstruction);
const flatCoordinates = lineStringGeometry.getFlatCoordinates();
const stride = lineStringGeometry.getStride();
this.drawFlatCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
this.hitDetectionInstructions.push(strokeInstruction);
this.endGeometry(lineStringGeometry, feature);
}
/**
* @inheritDoc
*/
drawMultiLineString(multiLineStringGeometry, feature) {
const state = this.state;
const strokeStyle = state.strokeStyle;
const lineWidth = state.lineWidth;
if (strokeStyle === undefined || lineWidth === undefined) {
return;
}
this.updateStrokeStyle(state, this.applyStroke);
this.beginGeometry(multiLineStringGeometry, feature);
this.hitDetectionInstructions.push([
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
], beginPathInstruction);
const ends = multiLineStringGeometry.getEnds();
const flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
const stride = multiLineStringGeometry.getStride();
let offset = 0;
for (let i = 0, ii = ends.length; i < ii; ++i) {
offset = this.drawFlatCoordinates_(flatCoordinates, offset, ends[i], stride);
}
this.hitDetectionInstructions.push(strokeInstruction);
this.endGeometry(multiLineStringGeometry, feature);
}
/**
* @inheritDoc
*/
finish() {
const state = this.state;
if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
this.instructions.push(strokeInstruction);
}
this.reverseHitDetectionInstructions();
this.state = null;
}
/**
* @inheritDoc.
*/
applyStroke(state) {
if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
this.instructions.push(strokeInstruction);
state.lastStroke = this.coordinates.length;
}
state.lastStroke = 0;
CanvasReplay.prototype.applyStroke.call(this, state);
this.instructions.push(beginPathInstruction);
}
}
inherits(CanvasLineStringReplay, CanvasReplay);
/**
* @param {Array.<number>} flatCoordinates Flat coordinates.
* @param {number} offset Offset.
* @param {number} end End.
* @param {number} stride Stride.
* @private
* @return {number} end.
*/
CanvasLineStringReplay.prototype.drawFlatCoordinates_ = function(flatCoordinates, offset, end, stride) {
const myBegin = this.coordinates.length;
const myEnd = this.appendFlatCoordinates(
flatCoordinates, offset, end, stride, false, false);
const moveToLineToInstruction = [CanvasInstruction.MOVE_TO_LINE_TO, myBegin, myEnd];
this.instructions.push(moveToLineToInstruction);
this.hitDetectionInstructions.push(moveToLineToInstruction);
return end;
};
/**
* @inheritDoc
*/
CanvasLineStringReplay.prototype.drawLineString = function(lineStringGeometry, feature) {
const state = this.state;
const strokeStyle = state.strokeStyle;
const lineWidth = state.lineWidth;
if (strokeStyle === undefined || lineWidth === undefined) {
return;
}
this.updateStrokeStyle(state, this.applyStroke);
this.beginGeometry(lineStringGeometry, feature);
this.hitDetectionInstructions.push([
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
], beginPathInstruction);
const flatCoordinates = lineStringGeometry.getFlatCoordinates();
const stride = lineStringGeometry.getStride();
this.drawFlatCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
this.hitDetectionInstructions.push(strokeInstruction);
this.endGeometry(lineStringGeometry, feature);
};
/**
* @inheritDoc
*/
CanvasLineStringReplay.prototype.drawMultiLineString = function(multiLineStringGeometry, feature) {
const state = this.state;
const strokeStyle = state.strokeStyle;
const lineWidth = state.lineWidth;
if (strokeStyle === undefined || lineWidth === undefined) {
return;
}
this.updateStrokeStyle(state, this.applyStroke);
this.beginGeometry(multiLineStringGeometry, feature);
this.hitDetectionInstructions.push([
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
], beginPathInstruction);
const ends = multiLineStringGeometry.getEnds();
const flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
const stride = multiLineStringGeometry.getStride();
let offset = 0;
for (let i = 0, ii = ends.length; i < ii; ++i) {
offset = this.drawFlatCoordinates_(flatCoordinates, offset, ends[i], stride);
}
this.hitDetectionInstructions.push(strokeInstruction);
this.endGeometry(multiLineStringGeometry, feature);
};
/**
* @inheritDoc
*/
CanvasLineStringReplay.prototype.finish = function() {
const state = this.state;
if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
this.instructions.push(strokeInstruction);
}
this.reverseHitDetectionInstructions();
this.state = null;
};
/**
* @inheritDoc.
*/
CanvasLineStringReplay.prototype.applyStroke = function(state) {
if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
this.instructions.push(strokeInstruction);
state.lastStroke = this.coordinates.length;
}
state.lastStroke = 0;
CanvasReplay.prototype.applyStroke.call(this, state);
this.instructions.push(beginPathInstruction);
};
export default CanvasLineStringReplay;
src/ol/render/canvas/PolygonReplay.js
+192 -195
View File
@@ -22,203 +22,200 @@ import CanvasReplay from '../canvas/Replay.js';
* @param {?} declutterTree Declutter tree.
* @struct
*/
const CanvasPolygonReplay = function(
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
CanvasReplay.call(this,
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
};
class CanvasPolygonReplay {
constructor(tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
CanvasReplay.call(this,
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
}
/**
* @param {Array.<number>} flatCoordinates Flat coordinates.
* @param {number} offset Offset.
* @param {Array.<number>} ends Ends.
* @param {number} stride Stride.
* @private
* @return {number} End.
*/
drawFlatCoordinatess_(flatCoordinates, offset, ends, stride) {
const state = this.state;
const fill = state.fillStyle !== undefined;
const stroke = state.strokeStyle != undefined;
const numEnds = ends.length;
this.instructions.push(beginPathInstruction);
this.hitDetectionInstructions.push(beginPathInstruction);
for (let i = 0; i < numEnds; ++i) {
const end = ends[i];
const myBegin = this.coordinates.length;
const myEnd = this.appendFlatCoordinates(flatCoordinates, offset, end, stride, true, !stroke);
const moveToLineToInstruction = [CanvasInstruction.MOVE_TO_LINE_TO, myBegin, myEnd];
this.instructions.push(moveToLineToInstruction);
this.hitDetectionInstructions.push(moveToLineToInstruction);
if (stroke) {
// Performance optimization: only call closePath() when we have a stroke.
// Otherwise the ring is closed already (see appendFlatCoordinates above).
this.instructions.push(closePathInstruction);
this.hitDetectionInstructions.push(closePathInstruction);
}
offset = end;
}
if (fill) {
this.instructions.push(fillInstruction);
this.hitDetectionInstructions.push(fillInstruction);
}
if (stroke) {
this.instructions.push(strokeInstruction);
this.hitDetectionInstructions.push(strokeInstruction);
}
return offset;
}
/**
* @inheritDoc
*/
drawCircle(circleGeometry, feature) {
const state = this.state;
const fillStyle = state.fillStyle;
const strokeStyle = state.strokeStyle;
if (fillStyle === undefined && strokeStyle === undefined) {
return;
}
this.setFillStrokeStyles_(circleGeometry);
this.beginGeometry(circleGeometry, feature);
if (state.fillStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_FILL_STYLE,
asString(defaultFillStyle)
]);
}
if (state.strokeStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
]);
}
const flatCoordinates = circleGeometry.getFlatCoordinates();
const stride = circleGeometry.getStride();
const myBegin = this.coordinates.length;
this.appendFlatCoordinates(
flatCoordinates, 0, flatCoordinates.length, stride, false, false);
const circleInstruction = [CanvasInstruction.CIRCLE, myBegin];
this.instructions.push(beginPathInstruction, circleInstruction);
this.hitDetectionInstructions.push(beginPathInstruction, circleInstruction);
this.hitDetectionInstructions.push(fillInstruction);
if (state.fillStyle !== undefined) {
this.instructions.push(fillInstruction);
}
if (state.strokeStyle !== undefined) {
this.instructions.push(strokeInstruction);
this.hitDetectionInstructions.push(strokeInstruction);
}
this.endGeometry(circleGeometry, feature);
}
/**
* @inheritDoc
*/
drawPolygon(polygonGeometry, feature) {
const state = this.state;
const fillStyle = state.fillStyle;
const strokeStyle = state.strokeStyle;
if (fillStyle === undefined && strokeStyle === undefined) {
return;
}
this.setFillStrokeStyles_(polygonGeometry);
this.beginGeometry(polygonGeometry, feature);
if (state.fillStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_FILL_STYLE,
asString(defaultFillStyle)
]);
}
if (state.strokeStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
]);
}
const ends = polygonGeometry.getEnds();
const flatCoordinates = polygonGeometry.getOrientedFlatCoordinates();
const stride = polygonGeometry.getStride();
this.drawFlatCoordinatess_(flatCoordinates, 0, ends, stride);
this.endGeometry(polygonGeometry, feature);
}
/**
* @inheritDoc
*/
drawMultiPolygon(multiPolygonGeometry, feature) {
const state = this.state;
const fillStyle = state.fillStyle;
const strokeStyle = state.strokeStyle;
if (fillStyle === undefined && strokeStyle === undefined) {
return;
}
this.setFillStrokeStyles_(multiPolygonGeometry);
this.beginGeometry(multiPolygonGeometry, feature);
if (state.fillStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_FILL_STYLE,
asString(defaultFillStyle)
]);
}
if (state.strokeStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
]);
}
const endss = multiPolygonGeometry.getEndss();
const flatCoordinates = multiPolygonGeometry.getOrientedFlatCoordinates();
const stride = multiPolygonGeometry.getStride();
let offset = 0;
for (let i = 0, ii = endss.length; i < ii; ++i) {
offset = this.drawFlatCoordinatess_(flatCoordinates, offset, endss[i], stride);
}
this.endGeometry(multiPolygonGeometry, feature);
}
/**
* @inheritDoc
*/
finish() {
this.reverseHitDetectionInstructions();
this.state = null;
// We want to preserve topology when drawing polygons. Polygons are
// simplified using quantization and point elimination. However, we might
// have received a mix of quantized and non-quantized geometries, so ensure
// that all are quantized by quantizing all coordinates in the batch.
const tolerance = this.tolerance;
if (tolerance !== 0) {
const coordinates = this.coordinates;
for (let i = 0, ii = coordinates.length; i < ii; ++i) {
coordinates[i] = snap(coordinates[i], tolerance);
}
}
}
/**
* @private
* @param {module:ol/geom/Geometry|module:ol/render/Feature} geometry Geometry.
*/
setFillStrokeStyles_(geometry) {
const state = this.state;
const fillStyle = state.fillStyle;
if (fillStyle !== undefined) {
this.updateFillStyle(state, this.createFill, geometry);
}
if (state.strokeStyle !== undefined) {
this.updateStrokeStyle(state, this.applyStroke);
}
}
}
inherits(CanvasPolygonReplay, CanvasReplay);
/**
* @param {Array.<number>} flatCoordinates Flat coordinates.
* @param {number} offset Offset.
* @param {Array.<number>} ends Ends.
* @param {number} stride Stride.
* @private
* @return {number} End.
*/
CanvasPolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCoordinates, offset, ends, stride) {
const state = this.state;
const fill = state.fillStyle !== undefined;
const stroke = state.strokeStyle != undefined;
const numEnds = ends.length;
this.instructions.push(beginPathInstruction);
this.hitDetectionInstructions.push(beginPathInstruction);
for (let i = 0; i < numEnds; ++i) {
const end = ends[i];
const myBegin = this.coordinates.length;
const myEnd = this.appendFlatCoordinates(flatCoordinates, offset, end, stride, true, !stroke);
const moveToLineToInstruction = [CanvasInstruction.MOVE_TO_LINE_TO, myBegin, myEnd];
this.instructions.push(moveToLineToInstruction);
this.hitDetectionInstructions.push(moveToLineToInstruction);
if (stroke) {
// Performance optimization: only call closePath() when we have a stroke.
// Otherwise the ring is closed already (see appendFlatCoordinates above).
this.instructions.push(closePathInstruction);
this.hitDetectionInstructions.push(closePathInstruction);
}
offset = end;
}
if (fill) {
this.instructions.push(fillInstruction);
this.hitDetectionInstructions.push(fillInstruction);
}
if (stroke) {
this.instructions.push(strokeInstruction);
this.hitDetectionInstructions.push(strokeInstruction);
}
return offset;
};
/**
* @inheritDoc
*/
CanvasPolygonReplay.prototype.drawCircle = function(circleGeometry, feature) {
const state = this.state;
const fillStyle = state.fillStyle;
const strokeStyle = state.strokeStyle;
if (fillStyle === undefined && strokeStyle === undefined) {
return;
}
this.setFillStrokeStyles_(circleGeometry);
this.beginGeometry(circleGeometry, feature);
if (state.fillStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_FILL_STYLE,
asString(defaultFillStyle)
]);
}
if (state.strokeStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
]);
}
const flatCoordinates = circleGeometry.getFlatCoordinates();
const stride = circleGeometry.getStride();
const myBegin = this.coordinates.length;
this.appendFlatCoordinates(
flatCoordinates, 0, flatCoordinates.length, stride, false, false);
const circleInstruction = [CanvasInstruction.CIRCLE, myBegin];
this.instructions.push(beginPathInstruction, circleInstruction);
this.hitDetectionInstructions.push(beginPathInstruction, circleInstruction);
this.hitDetectionInstructions.push(fillInstruction);
if (state.fillStyle !== undefined) {
this.instructions.push(fillInstruction);
}
if (state.strokeStyle !== undefined) {
this.instructions.push(strokeInstruction);
this.hitDetectionInstructions.push(strokeInstruction);
}
this.endGeometry(circleGeometry, feature);
};
/**
* @inheritDoc
*/
CanvasPolygonReplay.prototype.drawPolygon = function(polygonGeometry, feature) {
const state = this.state;
const fillStyle = state.fillStyle;
const strokeStyle = state.strokeStyle;
if (fillStyle === undefined && strokeStyle === undefined) {
return;
}
this.setFillStrokeStyles_(polygonGeometry);
this.beginGeometry(polygonGeometry, feature);
if (state.fillStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_FILL_STYLE,
asString(defaultFillStyle)
]);
}
if (state.strokeStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
]);
}
const ends = polygonGeometry.getEnds();
const flatCoordinates = polygonGeometry.getOrientedFlatCoordinates();
const stride = polygonGeometry.getStride();
this.drawFlatCoordinatess_(flatCoordinates, 0, ends, stride);
this.endGeometry(polygonGeometry, feature);
};
/**
* @inheritDoc
*/
CanvasPolygonReplay.prototype.drawMultiPolygon = function(multiPolygonGeometry, feature) {
const state = this.state;
const fillStyle = state.fillStyle;
const strokeStyle = state.strokeStyle;
if (fillStyle === undefined && strokeStyle === undefined) {
return;
}
this.setFillStrokeStyles_(multiPolygonGeometry);
this.beginGeometry(multiPolygonGeometry, feature);
if (state.fillStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_FILL_STYLE,
asString(defaultFillStyle)
]);
}
if (state.strokeStyle !== undefined) {
this.hitDetectionInstructions.push([
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
]);
}
const endss = multiPolygonGeometry.getEndss();
const flatCoordinates = multiPolygonGeometry.getOrientedFlatCoordinates();
const stride = multiPolygonGeometry.getStride();
let offset = 0;
for (let i = 0, ii = endss.length; i < ii; ++i) {
offset = this.drawFlatCoordinatess_(flatCoordinates, offset, endss[i], stride);
}
this.endGeometry(multiPolygonGeometry, feature);
};
/**
* @inheritDoc
*/
CanvasPolygonReplay.prototype.finish = function() {
this.reverseHitDetectionInstructions();
this.state = null;
// We want to preserve topology when drawing polygons. Polygons are
// simplified using quantization and point elimination. However, we might
// have received a mix of quantized and non-quantized geometries, so ensure
// that all are quantized by quantizing all coordinates in the batch.
const tolerance = this.tolerance;
if (tolerance !== 0) {
const coordinates = this.coordinates;
for (let i = 0, ii = coordinates.length; i < ii; ++i) {
coordinates[i] = snap(coordinates[i], tolerance);
}
}
};
/**
* @private
* @param {module:ol/geom/Geometry|module:ol/render/Feature} geometry Geometry.
*/
CanvasPolygonReplay.prototype.setFillStrokeStyles_ = function(geometry) {
const state = this.state;
const fillStyle = state.fillStyle;
if (fillStyle !== undefined) {
this.updateFillStyle(state, this.createFill, geometry);
}
if (state.strokeStyle !== undefined) {
this.updateStrokeStyle(state, this.applyStroke);
}
};
export default CanvasPolygonReplay;
src/ol/render/canvas/Replay.js
+999 -991
View File
File diff suppressed because it is too large Load Diff
src/ol/render/canvas/ReplayGroup.js
+329 -316
View File
@@ -46,76 +46,366 @@ const BATCH_CONSTRUCTORS = {
* @param {number=} opt_renderBuffer Optional rendering buffer.
* @struct
*/
const CanvasReplayGroup = function(
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree, opt_renderBuffer) {
ReplayGroup.call(this);
class CanvasReplayGroup {
constructor(
tolerance,
maxExtent,
resolution,
pixelRatio,
overlaps,
declutterTree,
opt_renderBuffer
) {
ReplayGroup.call(this);
/**
* Declutter tree.
* @private
*/
this.declutterTree_ = declutterTree;
/**
* @type {module:ol/render/canvas~DeclutterGroup}
* @private
*/
this.declutterGroup_ = null;
/**
* @private
* @type {number}
*/
this.tolerance_ = tolerance;
/**
* @private
* @type {module:ol/extent~Extent}
*/
this.maxExtent_ = maxExtent;
/**
* @private
* @type {boolean}
*/
this.overlaps_ = overlaps;
/**
* @private
* @type {number}
*/
this.pixelRatio_ = pixelRatio;
/**
* @private
* @type {number}
*/
this.resolution_ = resolution;
/**
* @private
* @type {number|undefined}
*/
this.renderBuffer_ = opt_renderBuffer;
/**
* @private
* @type {!Object.<string, !Object.<module:ol/render/ReplayType, module:ol/render/canvas/Replay>>}
*/
this.replaysByZIndex_ = {};
/**
* @private
* @type {CanvasRenderingContext2D}
*/
this.hitDetectionContext_ = createCanvasContext2D(1, 1);
/**
* @private
* @type {module:ol/transform~Transform}
*/
this.hitDetectionTransform_ = createTransform();
}
/**
* Declutter tree.
* @private
* @param {boolean} group Group with previous replay.
* @return {module:ol/render/canvas~DeclutterGroup} Declutter instruction group.
*/
this.declutterTree_ = declutterTree;
addDeclutter(group) {
let declutter = null;
if (this.declutterTree_) {
if (group) {
declutter = this.declutterGroup_;
/** @type {number} */ (declutter[4])++;
} else {
declutter = this.declutterGroup_ = createEmpty();
declutter.push(1);
}
}
return declutter;
}
/**
* @type {module:ol/render/canvas~DeclutterGroup}
* @private
* @param {CanvasRenderingContext2D} context Context.
* @param {module:ol/transform~Transform} transform Transform.
*/
this.declutterGroup_ = null;
clip(context, transform) {
const flatClipCoords = this.getClipCoords(transform);
context.beginPath();
context.moveTo(flatClipCoords[0], flatClipCoords[1]);
context.lineTo(flatClipCoords[2], flatClipCoords[3]);
context.lineTo(flatClipCoords[4], flatClipCoords[5]);
context.lineTo(flatClipCoords[6], flatClipCoords[7]);
context.clip();
}
/**
* @private
* @type {number}
* @param {Array.<module:ol/render/ReplayType>} replays Replays.
* @return {boolean} Has replays of the provided types.
*/
this.tolerance_ = tolerance;
hasReplays(replays) {
for (const zIndex in this.replaysByZIndex_) {
const candidates = this.replaysByZIndex_[zIndex];
for (let i = 0, ii = replays.length; i < ii; ++i) {
if (replays[i] in candidates) {
return true;
}
}
}
return false;
}
/**
* @private
* @type {module:ol/extent~Extent}
* FIXME empty description for jsdoc
*/
this.maxExtent_ = maxExtent;
finish() {
for (const zKey in this.replaysByZIndex_) {
const replays = this.replaysByZIndex_[zKey];
for (const replayKey in replays) {
replays[replayKey].finish();
}
}
}
/**
* @private
* @type {boolean}
* @param {module:ol/coordinate~Coordinate} coordinate Coordinate.
* @param {number} resolution Resolution.
* @param {number} rotation Rotation.
* @param {number} hitTolerance Hit tolerance in pixels.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
* @param {function((module:ol/Feature|module:ol/render/Feature)): T} callback Feature callback.
* @param {Object.<string, module:ol/render/canvas~DeclutterGroup>} declutterReplays Declutter replays.
* @return {T|undefined} Callback result.
* @template T
*/
this.overlaps_ = overlaps;
forEachFeatureAtCoordinate(
coordinate,
resolution,
rotation,
hitTolerance,
skippedFeaturesHash,
callback,
declutterReplays
) {
hitTolerance = Math.round(hitTolerance);
const contextSize = hitTolerance * 2 + 1;
const transform = composeTransform(this.hitDetectionTransform_,
hitTolerance + 0.5, hitTolerance + 0.5,
1 / resolution, -1 / resolution,
-rotation,
-coordinate[0], -coordinate[1]);
const context = this.hitDetectionContext_;
if (context.canvas.width !== contextSize || context.canvas.height !== contextSize) {
context.canvas.width = contextSize;
context.canvas.height = contextSize;
} else {
context.clearRect(0, 0, contextSize, contextSize);
}
/**
* @type {module:ol/extent~Extent}
*/
let hitExtent;
if (this.renderBuffer_ !== undefined) {
hitExtent = createEmpty();
extendCoordinate(hitExtent, coordinate);
buffer(hitExtent, resolution * (this.renderBuffer_ + hitTolerance), hitExtent);
}
const mask = getCircleArray(hitTolerance);
let declutteredFeatures;
if (this.declutterTree_) {
declutteredFeatures = this.declutterTree_.all().map(function(entry) {
return entry.value;
});
}
let replayType;
/**
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
* @return {?} Callback result.
*/
function featureCallback(feature) {
const imageData = context.getImageData(0, 0, contextSize, contextSize).data;
for (let i = 0; i < contextSize; i++) {
for (let j = 0; j < contextSize; j++) {
if (mask[i][j]) {
if (imageData[(j * contextSize + i) * 4 + 3] > 0) {
let result;
if (!(declutteredFeatures && (replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) ||
declutteredFeatures.indexOf(feature) !== -1) {
result = callback(feature);
}
if (result) {
return result;
} else {
context.clearRect(0, 0, contextSize, contextSize);
return undefined;
}
}
}
}
}
}
/** @type {Array.<number>} */
const zs = Object.keys(this.replaysByZIndex_).map(Number);
zs.sort(numberSafeCompareFunction);
let i, j, replays, replay, result;
for (i = zs.length - 1; i >= 0; --i) {
const zIndexKey = zs[i].toString();
replays = this.replaysByZIndex_[zIndexKey];
for (j = ORDER.length - 1; j >= 0; --j) {
replayType = ORDER[j];
replay = replays[replayType];
if (replay !== undefined) {
if (declutterReplays &&
(replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) {
const declutter = declutterReplays[zIndexKey];
if (!declutter) {
declutterReplays[zIndexKey] = [replay, transform.slice(0)];
} else {
declutter.push(replay, transform.slice(0));
}
} else {
result = replay.replayHitDetection(context, transform, rotation,
skippedFeaturesHash, featureCallback, hitExtent);
if (result) {
return result;
}
}
}
}
}
return undefined;
}
/**
* @private
* @type {number}
* @param {module:ol/transform~Transform} transform Transform.
* @return {Array.<number>} Clip coordinates.
*/
this.pixelRatio_ = pixelRatio;
getClipCoords(transform) {
const maxExtent = this.maxExtent_;
const minX = maxExtent[0];
const minY = maxExtent[1];
const maxX = maxExtent[2];
const maxY = maxExtent[3];
const flatClipCoords = [minX, minY, minX, maxY, maxX, maxY, maxX, minY];
transform2D(
flatClipCoords, 0, 8, 2, transform, flatClipCoords);
return flatClipCoords;
}
/**
* @private
* @type {number}
* @inheritDoc
*/
this.resolution_ = resolution;
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) {
const Constructor = BATCH_CONSTRUCTORS[replayType];
replay = new Constructor(this.tolerance_, this.maxExtent_,
this.resolution_, this.pixelRatio_, this.overlaps_, this.declutterTree_);
replays[replayType] = replay;
}
return replay;
}
/**
* @private
* @type {number|undefined}
* @return {Object.<string, Object.<module:ol/render/ReplayType, module:ol/render/canvas/Replay>>} Replays.
*/
this.renderBuffer_ = opt_renderBuffer;
getReplays() {
return this.replaysByZIndex_;
}
/**
* @private
* @type {!Object.<string, !Object.<module:ol/render/ReplayType, module:ol/render/canvas/Replay>>}
* @inheritDoc
*/
this.replaysByZIndex_ = {};
isEmpty() {
return isEmpty(this.replaysByZIndex_);
}
/**
* @private
* @type {CanvasRenderingContext2D}
* @param {CanvasRenderingContext2D} context Context.
* @param {module:ol/transform~Transform} transform Transform.
* @param {number} viewRotation View rotation.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
* @param {Array.<module:ol/render/ReplayType>=} opt_replayTypes Ordered replay types to replay.
* Default is {@link module:ol/render/replay~ORDER}
* @param {Object.<string, module:ol/render/canvas~DeclutterGroup>=} opt_declutterReplays Declutter replays.
*/
this.hitDetectionContext_ = createCanvasContext2D(1, 1);
replay(
context,
transform,
viewRotation,
skippedFeaturesHash,
opt_replayTypes,
opt_declutterReplays
) {
/**
* @private
* @type {module:ol/transform~Transform}
*/
this.hitDetectionTransform_ = createTransform();
};
/** @type {Array.<number>} */
const zs = Object.keys(this.replaysByZIndex_).map(Number);
zs.sort(numberSafeCompareFunction);
// setup clipping so that the parts of over-simplified geometries are not
// visible outside the current extent when panning
context.save();
this.clip(context, transform);
const replayTypes = opt_replayTypes ? opt_replayTypes : ORDER;
let i, ii, j, jj, replays, replay;
for (i = 0, ii = zs.length; i < ii; ++i) {
const zIndexKey = zs[i].toString();
replays = this.replaysByZIndex_[zIndexKey];
for (j = 0, jj = replayTypes.length; j < jj; ++j) {
const replayType = replayTypes[j];
replay = replays[replayType];
if (replay !== undefined) {
if (opt_declutterReplays &&
(replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) {
const declutter = opt_declutterReplays[zIndexKey];
if (!declutter) {
opt_declutterReplays[zIndexKey] = [replay, transform.slice(0)];
} else {
declutter.push(replay, transform.slice(0));
}
} else {
replay.replay(context, transform, viewRotation, skippedFeaturesHash);
}
}
}
}
context.restore();
}
}
inherits(CanvasReplayGroup, ReplayGroup);
@@ -217,281 +507,4 @@ export function replayDeclutter(declutterReplays, context, rotation) {
}
/**
* @param {boolean} group Group with previous replay.
* @return {module:ol/render/canvas~DeclutterGroup} Declutter instruction group.
*/
CanvasReplayGroup.prototype.addDeclutter = function(group) {
let declutter = null;
if (this.declutterTree_) {
if (group) {
declutter = this.declutterGroup_;
/** @type {number} */ (declutter[4])++;
} else {
declutter = this.declutterGroup_ = createEmpty();
declutter.push(1);
}
}
return declutter;
};
/**
* @param {CanvasRenderingContext2D} context Context.
* @param {module:ol/transform~Transform} transform Transform.
*/
CanvasReplayGroup.prototype.clip = function(context, transform) {
const flatClipCoords = this.getClipCoords(transform);
context.beginPath();
context.moveTo(flatClipCoords[0], flatClipCoords[1]);
context.lineTo(flatClipCoords[2], flatClipCoords[3]);
context.lineTo(flatClipCoords[4], flatClipCoords[5]);
context.lineTo(flatClipCoords[6], flatClipCoords[7]);
context.clip();
};
/**
* @param {Array.<module:ol/render/ReplayType>} replays Replays.
* @return {boolean} Has replays of the provided types.
*/
CanvasReplayGroup.prototype.hasReplays = function(replays) {
for (const zIndex in this.replaysByZIndex_) {
const candidates = this.replaysByZIndex_[zIndex];
for (let i = 0, ii = replays.length; i < ii; ++i) {
if (replays[i] in candidates) {
return true;
}
}
}
return false;
};
/**
* FIXME empty description for jsdoc
*/
CanvasReplayGroup.prototype.finish = function() {
for (const zKey in this.replaysByZIndex_) {
const replays = this.replaysByZIndex_[zKey];
for (const replayKey in replays) {
replays[replayKey].finish();
}
}
};
/**
* @param {module:ol/coordinate~Coordinate} coordinate Coordinate.
* @param {number} resolution Resolution.
* @param {number} rotation Rotation.
* @param {number} hitTolerance Hit tolerance in pixels.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
* @param {function((module:ol/Feature|module:ol/render/Feature)): T} callback Feature callback.
* @param {Object.<string, module:ol/render/canvas~DeclutterGroup>} declutterReplays Declutter replays.
* @return {T|undefined} Callback result.
* @template T
*/
CanvasReplayGroup.prototype.forEachFeatureAtCoordinate = function(
coordinate, resolution, rotation, hitTolerance, skippedFeaturesHash, callback, declutterReplays) {
hitTolerance = Math.round(hitTolerance);
const contextSize = hitTolerance * 2 + 1;
const transform = composeTransform(this.hitDetectionTransform_,
hitTolerance + 0.5, hitTolerance + 0.5,
1 / resolution, -1 / resolution,
-rotation,
-coordinate[0], -coordinate[1]);
const context = this.hitDetectionContext_;
if (context.canvas.width !== contextSize || context.canvas.height !== contextSize) {
context.canvas.width = contextSize;
context.canvas.height = contextSize;
} else {
context.clearRect(0, 0, contextSize, contextSize);
}
/**
* @type {module:ol/extent~Extent}
*/
let hitExtent;
if (this.renderBuffer_ !== undefined) {
hitExtent = createEmpty();
extendCoordinate(hitExtent, coordinate);
buffer(hitExtent, resolution * (this.renderBuffer_ + hitTolerance), hitExtent);
}
const mask = getCircleArray(hitTolerance);
let declutteredFeatures;
if (this.declutterTree_) {
declutteredFeatures = this.declutterTree_.all().map(function(entry) {
return entry.value;
});
}
let replayType;
/**
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
* @return {?} Callback result.
*/
function featureCallback(feature) {
const imageData = context.getImageData(0, 0, contextSize, contextSize).data;
for (let i = 0; i < contextSize; i++) {
for (let j = 0; j < contextSize; j++) {
if (mask[i][j]) {
if (imageData[(j * contextSize + i) * 4 + 3] > 0) {
let result;
if (!(declutteredFeatures && (replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) ||
declutteredFeatures.indexOf(feature) !== -1) {
result = callback(feature);
}
if (result) {
return result;
} else {
context.clearRect(0, 0, contextSize, contextSize);
return undefined;
}
}
}
}
}
}
/** @type {Array.<number>} */
const zs = Object.keys(this.replaysByZIndex_).map(Number);
zs.sort(numberSafeCompareFunction);
let i, j, replays, replay, result;
for (i = zs.length - 1; i >= 0; --i) {
const zIndexKey = zs[i].toString();
replays = this.replaysByZIndex_[zIndexKey];
for (j = ORDER.length - 1; j >= 0; --j) {
replayType = ORDER[j];
replay = replays[replayType];
if (replay !== undefined) {
if (declutterReplays &&
(replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) {
const declutter = declutterReplays[zIndexKey];
if (!declutter) {
declutterReplays[zIndexKey] = [replay, transform.slice(0)];
} else {
declutter.push(replay, transform.slice(0));
}
} else {
result = replay.replayHitDetection(context, transform, rotation,
skippedFeaturesHash, featureCallback, hitExtent);
if (result) {
return result;
}
}
}
}
}
return undefined;
};
/**
* @param {module:ol/transform~Transform} transform Transform.
* @return {Array.<number>} Clip coordinates.
*/
CanvasReplayGroup.prototype.getClipCoords = function(transform) {
const maxExtent = this.maxExtent_;
const minX = maxExtent[0];
const minY = maxExtent[1];
const maxX = maxExtent[2];
const maxY = maxExtent[3];
const flatClipCoords = [minX, minY, minX, maxY, maxX, maxY, maxX, minY];
transform2D(
flatClipCoords, 0, 8, 2, transform, flatClipCoords);
return flatClipCoords;
};
/**
* @inheritDoc
*/
CanvasReplayGroup.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) {
const Constructor = BATCH_CONSTRUCTORS[replayType];
replay = new Constructor(this.tolerance_, this.maxExtent_,
this.resolution_, this.pixelRatio_, this.overlaps_, this.declutterTree_);
replays[replayType] = replay;
}
return replay;
};
/**
* @return {Object.<string, Object.<module:ol/render/ReplayType, module:ol/render/canvas/Replay>>} Replays.
*/
CanvasReplayGroup.prototype.getReplays = function() {
return this.replaysByZIndex_;
};
/**
* @inheritDoc
*/
CanvasReplayGroup.prototype.isEmpty = function() {
return isEmpty(this.replaysByZIndex_);
};
/**
* @param {CanvasRenderingContext2D} context Context.
* @param {module:ol/transform~Transform} transform Transform.
* @param {number} viewRotation View rotation.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
* @param {Array.<module:ol/render/ReplayType>=} opt_replayTypes Ordered replay types to replay.
* Default is {@link module:ol/render/replay~ORDER}
* @param {Object.<string, module:ol/render/canvas~DeclutterGroup>=} opt_declutterReplays Declutter replays.
*/
CanvasReplayGroup.prototype.replay = function(context,
transform, viewRotation, skippedFeaturesHash, opt_replayTypes, opt_declutterReplays) {
/** @type {Array.<number>} */
const zs = Object.keys(this.replaysByZIndex_).map(Number);
zs.sort(numberSafeCompareFunction);
// setup clipping so that the parts of over-simplified geometries are not
// visible outside the current extent when panning
context.save();
this.clip(context, transform);
const replayTypes = opt_replayTypes ? opt_replayTypes : ORDER;
let i, ii, j, jj, replays, replay;
for (i = 0, ii = zs.length; i < ii; ++i) {
const zIndexKey = zs[i].toString();
replays = this.replaysByZIndex_[zIndexKey];
for (j = 0, jj = replayTypes.length; j < jj; ++j) {
const replayType = replayTypes[j];
replay = replays[replayType];
if (replay !== undefined) {
if (opt_declutterReplays &&
(replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) {
const declutter = opt_declutterReplays[zIndexKey];
if (!declutter) {
opt_declutterReplays[zIndexKey] = [replay, transform.slice(0)];
} else {
declutter.push(replay, transform.slice(0));
}
} else {
replay.replay(context, transform, viewRotation, skippedFeaturesHash);
}
}
}
}
context.restore();
};
export default CanvasReplayGroup;
src/ol/render/canvas/TextReplay.js
+479 -481
View File
@@ -25,113 +25,501 @@ import TextPlacement from '../../style/TextPlacement.js';
* @param {?} declutterTree Declutter tree.
* @struct
*/
const CanvasTextReplay = function(
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
CanvasReplay.call(this,
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
class CanvasTextReplay {
constructor(tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
CanvasReplay.call(this,
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
/**
* @private
* @type {module:ol/render/canvas~DeclutterGroup}
*/
this.declutterGroup_;
/**
* @private
* @type {Array.<HTMLCanvasElement>}
*/
this.labels_ = null;
/**
* @private
* @type {string}
*/
this.text_ = '';
/**
* @private
* @type {number}
*/
this.textOffsetX_ = 0;
/**
* @private
* @type {number}
*/
this.textOffsetY_ = 0;
/**
* @private
* @type {boolean|undefined}
*/
this.textRotateWithView_ = undefined;
/**
* @private
* @type {number}
*/
this.textRotation_ = 0;
/**
* @private
* @type {?module:ol/render/canvas~FillState}
*/
this.textFillState_ = null;
/**
* @type {!Object.<string, module:ol/render/canvas~FillState>}
*/
this.fillStates = {};
/**
* @private
* @type {?module:ol/render/canvas~StrokeState}
*/
this.textStrokeState_ = null;
/**
* @type {!Object.<string, module:ol/render/canvas~StrokeState>}
*/
this.strokeStates = {};
/**
* @private
* @type {module:ol/render/canvas~TextState}
*/
this.textState_ = /** @type {module:ol/render/canvas~TextState} */ ({});
/**
* @type {!Object.<string, module:ol/render/canvas~TextState>}
*/
this.textStates = {};
/**
* @private
* @type {string}
*/
this.textKey_ = '';
/**
* @private
* @type {string}
*/
this.fillKey_ = '';
/**
* @private
* @type {string}
*/
this.strokeKey_ = '';
/**
* @private
* @type {Object.<string, Object.<string, number>>}
*/
this.widths_ = {};
labelCache.prune();
}
/**
* @inheritDoc
*/
drawText(geometry, feature) {
const fillState = this.textFillState_;
const strokeState = this.textStrokeState_;
const textState = this.textState_;
if (this.text_ === '' || !textState || (!fillState && !strokeState)) {
return;
}
let begin = this.coordinates.length;
const geometryType = geometry.getType();
let flatCoordinates = null;
let end = 2;
let stride = 2;
let i, ii;
if (textState.placement === TextPlacement.LINE) {
if (!intersects(this.getBufferedMaxExtent(), geometry.getExtent())) {
return;
}
let ends;
flatCoordinates = geometry.getFlatCoordinates();
stride = geometry.getStride();
if (geometryType == GeometryType.LINE_STRING) {
ends = [flatCoordinates.length];
} else if (geometryType == GeometryType.MULTI_LINE_STRING) {
ends = geometry.getEnds();
} else if (geometryType == GeometryType.POLYGON) {
ends = geometry.getEnds().slice(0, 1);
} else if (geometryType == GeometryType.MULTI_POLYGON) {
const endss = geometry.getEndss();
ends = [];
for (i = 0, ii = endss.length; i < ii; ++i) {
ends.push(endss[i][0]);
}
}
this.beginGeometry(geometry, feature);
const textAlign = textState.textAlign;
let flatOffset = 0;
let flatEnd;
for (let o = 0, oo = ends.length; o < oo; ++o) {
if (textAlign == undefined) {
const range = matchingChunk(textState.maxAngle, flatCoordinates, flatOffset, ends[o], stride);
flatOffset = range[0];
flatEnd = range[1];
} else {
flatEnd = ends[o];
}
for (i = flatOffset; i < flatEnd; i += stride) {
this.coordinates.push(flatCoordinates[i], flatCoordinates[i + 1]);
}
end = this.coordinates.length;
flatOffset = ends[o];
this.drawChars_(begin, end, this.declutterGroup_);
begin = end;
}
this.endGeometry(geometry, feature);
} else {
const label = this.getImage(this.text_, this.textKey_, this.fillKey_, this.strokeKey_);
const width = label.width / this.pixelRatio;
switch (geometryType) {
case GeometryType.POINT:
case GeometryType.MULTI_POINT:
flatCoordinates = geometry.getFlatCoordinates();
end = flatCoordinates.length;
break;
case GeometryType.LINE_STRING:
flatCoordinates = /** @type {module:ol/geom/LineString} */ (geometry).getFlatMidpoint();
break;
case GeometryType.CIRCLE:
flatCoordinates = /** @type {module:ol/geom/Circle} */ (geometry).getCenter();
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();
if (!textState.overflow && flatCoordinates[2] / this.resolution < width) {
return;
}
stride = 3;
break;
case GeometryType.MULTI_POLYGON:
const interiorPoints = /** @type {module:ol/geom/MultiPolygon} */ (geometry).getFlatInteriorPoints();
flatCoordinates = [];
for (i = 0, ii = interiorPoints.length; i < ii; i += 3) {
if (textState.overflow || interiorPoints[i + 2] / this.resolution >= width) {
flatCoordinates.push(interiorPoints[i], interiorPoints[i + 1]);
}
}
end = flatCoordinates.length;
if (end == 0) {
return;
}
break;
default:
}
end = this.appendFlatCoordinates(flatCoordinates, 0, end, stride, false, false);
if (textState.backgroundFill || textState.backgroundStroke) {
this.setFillStrokeStyle(textState.backgroundFill, textState.backgroundStroke);
if (textState.backgroundFill) {
this.updateFillStyle(this.state, this.createFill, geometry);
this.hitDetectionInstructions.push(this.createFill(this.state, geometry));
}
if (textState.backgroundStroke) {
this.updateStrokeStyle(this.state, this.applyStroke);
this.hitDetectionInstructions.push(this.createStroke(this.state));
}
}
this.beginGeometry(geometry, feature);
this.drawTextImage_(label, begin, end);
this.endGeometry(geometry, feature);
}
}
/**
* @param {string} text Text.
* @param {string} textKey Text style key.
* @param {string} fillKey Fill style key.
* @param {string} strokeKey Stroke style key.
* @return {HTMLCanvasElement} Image.
*/
getImage(text, textKey, fillKey, strokeKey) {
let label;
const key = strokeKey + textKey + text + fillKey + this.pixelRatio;
if (!labelCache.containsKey(key)) {
const strokeState = strokeKey ? this.strokeStates[strokeKey] || this.textStrokeState_ : null;
const fillState = fillKey ? this.fillStates[fillKey] || this.textFillState_ : null;
const textState = this.textStates[textKey] || this.textState_;
const pixelRatio = this.pixelRatio;
const scale = textState.scale * pixelRatio;
const align = TEXT_ALIGN[textState.textAlign || defaultTextAlign];
const strokeWidth = strokeKey && strokeState.lineWidth ? strokeState.lineWidth : 0;
const lines = text.split('\n');
const numLines = lines.length;
const widths = [];
const width = measureTextWidths(textState.font, lines, widths);
const lineHeight = measureTextHeight(textState.font);
const height = lineHeight * numLines;
const renderWidth = (width + strokeWidth);
const context = createCanvasContext2D(
Math.ceil(renderWidth * scale),
Math.ceil((height + strokeWidth) * scale));
label = context.canvas;
labelCache.set(key, label);
if (scale != 1) {
context.scale(scale, scale);
}
context.font = textState.font;
if (strokeKey) {
context.strokeStyle = strokeState.strokeStyle;
context.lineWidth = strokeWidth;
context.lineCap = strokeState.lineCap;
context.lineJoin = strokeState.lineJoin;
context.miterLimit = strokeState.miterLimit;
if (CANVAS_LINE_DASH && strokeState.lineDash.length) {
context.setLineDash(strokeState.lineDash);
context.lineDashOffset = strokeState.lineDashOffset;
}
}
if (fillKey) {
context.fillStyle = fillState.fillStyle;
}
context.textBaseline = 'middle';
context.textAlign = 'center';
const leftRight = (0.5 - align);
const x = align * label.width / scale + leftRight * strokeWidth;
let i;
if (strokeKey) {
for (i = 0; i < numLines; ++i) {
context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
}
}
if (fillKey) {
for (i = 0; i < numLines; ++i) {
context.fillText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
}
}
}
return labelCache.get(key);
}
/**
* @private
* @type {module:ol/render/canvas~DeclutterGroup}
* @param {HTMLCanvasElement} label Label.
* @param {number} begin Begin.
* @param {number} end End.
*/
this.declutterGroup_;
drawTextImage_(label, begin, end) {
const textState = this.textState_;
const strokeState = this.textStrokeState_;
const pixelRatio = this.pixelRatio;
const align = TEXT_ALIGN[textState.textAlign || defaultTextAlign];
const baseline = TEXT_ALIGN[textState.textBaseline];
const strokeWidth = strokeState && strokeState.lineWidth ? strokeState.lineWidth : 0;
const anchorX = align * label.width / pixelRatio + 2 * (0.5 - align) * strokeWidth;
const anchorY = baseline * label.height / pixelRatio + 2 * (0.5 - baseline) * strokeWidth;
this.instructions.push([CanvasInstruction.DRAW_IMAGE, begin, end,
label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
1, true, label.width,
textState.padding == defaultPadding ?
defaultPadding : textState.padding.map(function(p) {
return p * pixelRatio;
}),
!!textState.backgroundFill, !!textState.backgroundStroke
]);
this.hitDetectionInstructions.push([CanvasInstruction.DRAW_IMAGE, begin, end,
label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
1 / pixelRatio, true, label.width, textState.padding,
!!textState.backgroundFill, !!textState.backgroundStroke
]);
}
/**
* @private
* @type {Array.<HTMLCanvasElement>}
* @param {number} begin Begin.
* @param {number} end End.
* @param {module:ol/render/canvas~DeclutterGroup} declutterGroup Declutter group.
*/
this.labels_ = null;
drawChars_(begin, end, declutterGroup) {
const strokeState = this.textStrokeState_;
const textState = this.textState_;
const fillState = this.textFillState_;
const strokeKey = this.strokeKey_;
if (strokeState) {
if (!(strokeKey in this.strokeStates)) {
this.strokeStates[strokeKey] = /** @type {module:ol/render/canvas~StrokeState} */ ({
strokeStyle: strokeState.strokeStyle,
lineCap: strokeState.lineCap,
lineDashOffset: strokeState.lineDashOffset,
lineWidth: strokeState.lineWidth,
lineJoin: strokeState.lineJoin,
miterLimit: strokeState.miterLimit,
lineDash: strokeState.lineDash
});
}
}
const textKey = this.textKey_;
if (!(this.textKey_ in this.textStates)) {
this.textStates[this.textKey_] = /** @type {module:ol/render/canvas~TextState} */ ({
font: textState.font,
textAlign: textState.textAlign || defaultTextAlign,
scale: textState.scale
});
}
const fillKey = this.fillKey_;
if (fillState) {
if (!(fillKey in this.fillStates)) {
this.fillStates[fillKey] = /** @type {module:ol/render/canvas~FillState} */ ({
fillStyle: fillState.fillStyle
});
}
}
const pixelRatio = this.pixelRatio;
const baseline = TEXT_ALIGN[textState.textBaseline];
const offsetY = this.textOffsetY_ * pixelRatio;
const text = this.text_;
const font = textState.font;
const textScale = textState.scale;
const strokeWidth = strokeState ? strokeState.lineWidth * textScale / 2 : 0;
let widths = this.widths_[font];
if (!widths) {
this.widths_[font] = widths = {};
}
this.instructions.push([CanvasInstruction.DRAW_CHARS,
begin, end, baseline, declutterGroup,
textState.overflow, fillKey, textState.maxAngle,
function(text) {
let width = widths[text];
if (!width) {
width = widths[text] = measureTextWidth(font, text);
}
return width * textScale * pixelRatio;
},
offsetY, strokeKey, strokeWidth * pixelRatio, text, textKey, 1
]);
this.hitDetectionInstructions.push([CanvasInstruction.DRAW_CHARS,
begin, end, baseline, declutterGroup,
textState.overflow, fillKey, textState.maxAngle,
function(text) {
let width = widths[text];
if (!width) {
width = widths[text] = measureTextWidth(font, text);
}
return width * textScale;
},
offsetY, strokeKey, strokeWidth, text, textKey, 1 / pixelRatio
]);
}
/**
* @private
* @type {string}
* @inheritDoc
*/
this.text_ = '';
setTextStyle(textStyle, declutterGroup) {
let textState, fillState, strokeState;
if (!textStyle) {
this.text_ = '';
} else {
this.declutterGroup_ = /** @type {module:ol/render/canvas~DeclutterGroup} */ (declutterGroup);
/**
* @private
* @type {number}
*/
this.textOffsetX_ = 0;
const textFillStyle = textStyle.getFill();
if (!textFillStyle) {
fillState = this.textFillState_ = null;
} else {
fillState = this.textFillState_;
if (!fillState) {
fillState = this.textFillState_ = /** @type {module:ol/render/canvas~FillState} */ ({});
}
fillState.fillStyle = asColorLike(
textFillStyle.getColor() || defaultFillStyle);
}
/**
* @private
* @type {number}
*/
this.textOffsetY_ = 0;
const textStrokeStyle = textStyle.getStroke();
if (!textStrokeStyle) {
strokeState = this.textStrokeState_ = null;
} else {
strokeState = this.textStrokeState_;
if (!strokeState) {
strokeState = this.textStrokeState_ = /** @type {module:ol/render/canvas~StrokeState} */ ({});
}
const lineDash = textStrokeStyle.getLineDash();
const lineDashOffset = textStrokeStyle.getLineDashOffset();
const lineWidth = textStrokeStyle.getWidth();
const miterLimit = textStrokeStyle.getMiterLimit();
strokeState.lineCap = textStrokeStyle.getLineCap() || defaultLineCap;
strokeState.lineDash = lineDash ? lineDash.slice() : defaultLineDash;
strokeState.lineDashOffset =
lineDashOffset === undefined ? defaultLineDashOffset : lineDashOffset;
strokeState.lineJoin = textStrokeStyle.getLineJoin() || defaultLineJoin;
strokeState.lineWidth =
lineWidth === undefined ? defaultLineWidth : lineWidth;
strokeState.miterLimit =
miterLimit === undefined ? defaultMiterLimit : miterLimit;
strokeState.strokeStyle = asColorLike(
textStrokeStyle.getColor() || defaultStrokeStyle);
}
/**
* @private
* @type {boolean|undefined}
*/
this.textRotateWithView_ = undefined;
textState = this.textState_;
const font = textStyle.getFont() || defaultFont;
checkFont(font);
const textScale = textStyle.getScale();
textState.overflow = textStyle.getOverflow();
textState.font = font;
textState.maxAngle = textStyle.getMaxAngle();
textState.placement = textStyle.getPlacement();
textState.textAlign = textStyle.getTextAlign();
textState.textBaseline = textStyle.getTextBaseline() || defaultTextBaseline;
textState.backgroundFill = textStyle.getBackgroundFill();
textState.backgroundStroke = textStyle.getBackgroundStroke();
textState.padding = textStyle.getPadding() || defaultPadding;
textState.scale = textScale === undefined ? 1 : textScale;
/**
* @private
* @type {number}
*/
this.textRotation_ = 0;
const textOffsetX = textStyle.getOffsetX();
const textOffsetY = textStyle.getOffsetY();
const textRotateWithView = textStyle.getRotateWithView();
const textRotation = textStyle.getRotation();
this.text_ = textStyle.getText() || '';
this.textOffsetX_ = textOffsetX === undefined ? 0 : textOffsetX;
this.textOffsetY_ = textOffsetY === undefined ? 0 : textOffsetY;
this.textRotateWithView_ = textRotateWithView === undefined ? false : textRotateWithView;
this.textRotation_ = textRotation === undefined ? 0 : textRotation;
/**
* @private
* @type {?module:ol/render/canvas~FillState}
*/
this.textFillState_ = null;
/**
* @type {!Object.<string, module:ol/render/canvas~FillState>}
*/
this.fillStates = {};
/**
* @private
* @type {?module:ol/render/canvas~StrokeState}
*/
this.textStrokeState_ = null;
/**
* @type {!Object.<string, module:ol/render/canvas~StrokeState>}
*/
this.strokeStates = {};
/**
* @private
* @type {module:ol/render/canvas~TextState}
*/
this.textState_ = /** @type {module:ol/render/canvas~TextState} */ ({});
/**
* @type {!Object.<string, module:ol/render/canvas~TextState>}
*/
this.textStates = {};
/**
* @private
* @type {string}
*/
this.textKey_ = '';
/**
* @private
* @type {string}
*/
this.fillKey_ = '';
/**
* @private
* @type {string}
*/
this.strokeKey_ = '';
/**
* @private
* @type {Object.<string, Object.<string, number>>}
*/
this.widths_ = {};
labelCache.prune();
};
this.strokeKey_ = strokeState ?
(typeof strokeState.strokeStyle == 'string' ? strokeState.strokeStyle : getUid(strokeState.strokeStyle)) +
strokeState.lineCap + strokeState.lineDashOffset + '|' + strokeState.lineWidth +
strokeState.lineJoin + strokeState.miterLimit + '[' + strokeState.lineDash.join() + ']' :
'';
this.textKey_ = textState.font + textState.scale + (textState.textAlign || '?');
this.fillKey_ = fillState ?
(typeof fillState.fillStyle == 'string' ? fillState.fillStyle : ('|' + getUid(fillState.fillStyle))) :
'';
}
}
}
inherits(CanvasTextReplay, CanvasReplay);
@@ -155,394 +543,4 @@ export function measureTextWidths(font, lines, widths) {
}
/**
* @inheritDoc
*/
CanvasTextReplay.prototype.drawText = function(geometry, feature) {
const fillState = this.textFillState_;
const strokeState = this.textStrokeState_;
const textState = this.textState_;
if (this.text_ === '' || !textState || (!fillState && !strokeState)) {
return;
}
let begin = this.coordinates.length;
const geometryType = geometry.getType();
let flatCoordinates = null;
let end = 2;
let stride = 2;
let i, ii;
if (textState.placement === TextPlacement.LINE) {
if (!intersects(this.getBufferedMaxExtent(), geometry.getExtent())) {
return;
}
let ends;
flatCoordinates = geometry.getFlatCoordinates();
stride = geometry.getStride();
if (geometryType == GeometryType.LINE_STRING) {
ends = [flatCoordinates.length];
} else if (geometryType == GeometryType.MULTI_LINE_STRING) {
ends = geometry.getEnds();
} else if (geometryType == GeometryType.POLYGON) {
ends = geometry.getEnds().slice(0, 1);
} else if (geometryType == GeometryType.MULTI_POLYGON) {
const endss = geometry.getEndss();
ends = [];
for (i = 0, ii = endss.length; i < ii; ++i) {
ends.push(endss[i][0]);
}
}
this.beginGeometry(geometry, feature);
const textAlign = textState.textAlign;
let flatOffset = 0;
let flatEnd;
for (let o = 0, oo = ends.length; o < oo; ++o) {
if (textAlign == undefined) {
const range = matchingChunk(textState.maxAngle, flatCoordinates, flatOffset, ends[o], stride);
flatOffset = range[0];
flatEnd = range[1];
} else {
flatEnd = ends[o];
}
for (i = flatOffset; i < flatEnd; i += stride) {
this.coordinates.push(flatCoordinates[i], flatCoordinates[i + 1]);
}
end = this.coordinates.length;
flatOffset = ends[o];
this.drawChars_(begin, end, this.declutterGroup_);
begin = end;
}
this.endGeometry(geometry, feature);
} else {
const label = this.getImage(this.text_, this.textKey_, this.fillKey_, this.strokeKey_);
const width = label.width / this.pixelRatio;
switch (geometryType) {
case GeometryType.POINT:
case GeometryType.MULTI_POINT:
flatCoordinates = geometry.getFlatCoordinates();
end = flatCoordinates.length;
break;
case GeometryType.LINE_STRING:
flatCoordinates = /** @type {module:ol/geom/LineString} */ (geometry).getFlatMidpoint();
break;
case GeometryType.CIRCLE:
flatCoordinates = /** @type {module:ol/geom/Circle} */ (geometry).getCenter();
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();
if (!textState.overflow && flatCoordinates[2] / this.resolution < width) {
return;
}
stride = 3;
break;
case GeometryType.MULTI_POLYGON:
const interiorPoints = /** @type {module:ol/geom/MultiPolygon} */ (geometry).getFlatInteriorPoints();
flatCoordinates = [];
for (i = 0, ii = interiorPoints.length; i < ii; i += 3) {
if (textState.overflow || interiorPoints[i + 2] / this.resolution >= width) {
flatCoordinates.push(interiorPoints[i], interiorPoints[i + 1]);
}
}
end = flatCoordinates.length;
if (end == 0) {
return;
}
break;
default:
}
end = this.appendFlatCoordinates(flatCoordinates, 0, end, stride, false, false);
if (textState.backgroundFill || textState.backgroundStroke) {
this.setFillStrokeStyle(textState.backgroundFill, textState.backgroundStroke);
if (textState.backgroundFill) {
this.updateFillStyle(this.state, this.createFill, geometry);
this.hitDetectionInstructions.push(this.createFill(this.state, geometry));
}
if (textState.backgroundStroke) {
this.updateStrokeStyle(this.state, this.applyStroke);
this.hitDetectionInstructions.push(this.createStroke(this.state));
}
}
this.beginGeometry(geometry, feature);
this.drawTextImage_(label, begin, end);
this.endGeometry(geometry, feature);
}
};
/**
* @param {string} text Text.
* @param {string} textKey Text style key.
* @param {string} fillKey Fill style key.
* @param {string} strokeKey Stroke style key.
* @return {HTMLCanvasElement} Image.
*/
CanvasTextReplay.prototype.getImage = function(text, textKey, fillKey, strokeKey) {
let label;
const key = strokeKey + textKey + text + fillKey + this.pixelRatio;
if (!labelCache.containsKey(key)) {
const strokeState = strokeKey ? this.strokeStates[strokeKey] || this.textStrokeState_ : null;
const fillState = fillKey ? this.fillStates[fillKey] || this.textFillState_ : null;
const textState = this.textStates[textKey] || this.textState_;
const pixelRatio = this.pixelRatio;
const scale = textState.scale * pixelRatio;
const align = TEXT_ALIGN[textState.textAlign || defaultTextAlign];
const strokeWidth = strokeKey && strokeState.lineWidth ? strokeState.lineWidth : 0;
const lines = text.split('\n');
const numLines = lines.length;
const widths = [];
const width = measureTextWidths(textState.font, lines, widths);
const lineHeight = measureTextHeight(textState.font);
const height = lineHeight * numLines;
const renderWidth = (width + strokeWidth);
const context = createCanvasContext2D(
Math.ceil(renderWidth * scale),
Math.ceil((height + strokeWidth) * scale));
label = context.canvas;
labelCache.set(key, label);
if (scale != 1) {
context.scale(scale, scale);
}
context.font = textState.font;
if (strokeKey) {
context.strokeStyle = strokeState.strokeStyle;
context.lineWidth = strokeWidth;
context.lineCap = strokeState.lineCap;
context.lineJoin = strokeState.lineJoin;
context.miterLimit = strokeState.miterLimit;
if (CANVAS_LINE_DASH && strokeState.lineDash.length) {
context.setLineDash(strokeState.lineDash);
context.lineDashOffset = strokeState.lineDashOffset;
}
}
if (fillKey) {
context.fillStyle = fillState.fillStyle;
}
context.textBaseline = 'middle';
context.textAlign = 'center';
const leftRight = (0.5 - align);
const x = align * label.width / scale + leftRight * strokeWidth;
let i;
if (strokeKey) {
for (i = 0; i < numLines; ++i) {
context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
}
}
if (fillKey) {
for (i = 0; i < numLines; ++i) {
context.fillText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
}
}
}
return labelCache.get(key);
};
/**
* @private
* @param {HTMLCanvasElement} label Label.
* @param {number} begin Begin.
* @param {number} end End.
*/
CanvasTextReplay.prototype.drawTextImage_ = function(label, begin, end) {
const textState = this.textState_;
const strokeState = this.textStrokeState_;
const pixelRatio = this.pixelRatio;
const align = TEXT_ALIGN[textState.textAlign || defaultTextAlign];
const baseline = TEXT_ALIGN[textState.textBaseline];
const strokeWidth = strokeState && strokeState.lineWidth ? strokeState.lineWidth : 0;
const anchorX = align * label.width / pixelRatio + 2 * (0.5 - align) * strokeWidth;
const anchorY = baseline * label.height / pixelRatio + 2 * (0.5 - baseline) * strokeWidth;
this.instructions.push([CanvasInstruction.DRAW_IMAGE, begin, end,
label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
1, true, label.width,
textState.padding == defaultPadding ?
defaultPadding : textState.padding.map(function(p) {
return p * pixelRatio;
}),
!!textState.backgroundFill, !!textState.backgroundStroke
]);
this.hitDetectionInstructions.push([CanvasInstruction.DRAW_IMAGE, begin, end,
label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
1 / pixelRatio, true, label.width, textState.padding,
!!textState.backgroundFill, !!textState.backgroundStroke
]);
};
/**
* @private
* @param {number} begin Begin.
* @param {number} end End.
* @param {module:ol/render/canvas~DeclutterGroup} declutterGroup Declutter group.
*/
CanvasTextReplay.prototype.drawChars_ = function(begin, end, declutterGroup) {
const strokeState = this.textStrokeState_;
const textState = this.textState_;
const fillState = this.textFillState_;
const strokeKey = this.strokeKey_;
if (strokeState) {
if (!(strokeKey in this.strokeStates)) {
this.strokeStates[strokeKey] = /** @type {module:ol/render/canvas~StrokeState} */ ({
strokeStyle: strokeState.strokeStyle,
lineCap: strokeState.lineCap,
lineDashOffset: strokeState.lineDashOffset,
lineWidth: strokeState.lineWidth,
lineJoin: strokeState.lineJoin,
miterLimit: strokeState.miterLimit,
lineDash: strokeState.lineDash
});
}
}
const textKey = this.textKey_;
if (!(this.textKey_ in this.textStates)) {
this.textStates[this.textKey_] = /** @type {module:ol/render/canvas~TextState} */ ({
font: textState.font,
textAlign: textState.textAlign || defaultTextAlign,
scale: textState.scale
});
}
const fillKey = this.fillKey_;
if (fillState) {
if (!(fillKey in this.fillStates)) {
this.fillStates[fillKey] = /** @type {module:ol/render/canvas~FillState} */ ({
fillStyle: fillState.fillStyle
});
}
}
const pixelRatio = this.pixelRatio;
const baseline = TEXT_ALIGN[textState.textBaseline];
const offsetY = this.textOffsetY_ * pixelRatio;
const text = this.text_;
const font = textState.font;
const textScale = textState.scale;
const strokeWidth = strokeState ? strokeState.lineWidth * textScale / 2 : 0;
let widths = this.widths_[font];
if (!widths) {
this.widths_[font] = widths = {};
}
this.instructions.push([CanvasInstruction.DRAW_CHARS,
begin, end, baseline, declutterGroup,
textState.overflow, fillKey, textState.maxAngle,
function(text) {
let width = widths[text];
if (!width) {
width = widths[text] = measureTextWidth(font, text);
}
return width * textScale * pixelRatio;
},
offsetY, strokeKey, strokeWidth * pixelRatio, text, textKey, 1
]);
this.hitDetectionInstructions.push([CanvasInstruction.DRAW_CHARS,
begin, end, baseline, declutterGroup,
textState.overflow, fillKey, textState.maxAngle,
function(text) {
let width = widths[text];
if (!width) {
width = widths[text] = measureTextWidth(font, text);
}
return width * textScale;
},
offsetY, strokeKey, strokeWidth, text, textKey, 1 / pixelRatio
]);
};
/**
* @inheritDoc
*/
CanvasTextReplay.prototype.setTextStyle = function(textStyle, declutterGroup) {
let textState, fillState, strokeState;
if (!textStyle) {
this.text_ = '';
} else {
this.declutterGroup_ = /** @type {module:ol/render/canvas~DeclutterGroup} */ (declutterGroup);
const textFillStyle = textStyle.getFill();
if (!textFillStyle) {
fillState = this.textFillState_ = null;
} else {
fillState = this.textFillState_;
if (!fillState) {
fillState = this.textFillState_ = /** @type {module:ol/render/canvas~FillState} */ ({});
}
fillState.fillStyle = asColorLike(
textFillStyle.getColor() || defaultFillStyle);
}
const textStrokeStyle = textStyle.getStroke();
if (!textStrokeStyle) {
strokeState = this.textStrokeState_ = null;
} else {
strokeState = this.textStrokeState_;
if (!strokeState) {
strokeState = this.textStrokeState_ = /** @type {module:ol/render/canvas~StrokeState} */ ({});
}
const lineDash = textStrokeStyle.getLineDash();
const lineDashOffset = textStrokeStyle.getLineDashOffset();
const lineWidth = textStrokeStyle.getWidth();
const miterLimit = textStrokeStyle.getMiterLimit();
strokeState.lineCap = textStrokeStyle.getLineCap() || defaultLineCap;
strokeState.lineDash = lineDash ? lineDash.slice() : defaultLineDash;
strokeState.lineDashOffset =
lineDashOffset === undefined ? defaultLineDashOffset : lineDashOffset;
strokeState.lineJoin = textStrokeStyle.getLineJoin() || defaultLineJoin;
strokeState.lineWidth =
lineWidth === undefined ? defaultLineWidth : lineWidth;
strokeState.miterLimit =
miterLimit === undefined ? defaultMiterLimit : miterLimit;
strokeState.strokeStyle = asColorLike(
textStrokeStyle.getColor() || defaultStrokeStyle);
}
textState = this.textState_;
const font = textStyle.getFont() || defaultFont;
checkFont(font);
const textScale = textStyle.getScale();
textState.overflow = textStyle.getOverflow();
textState.font = font;
textState.maxAngle = textStyle.getMaxAngle();
textState.placement = textStyle.getPlacement();
textState.textAlign = textStyle.getTextAlign();
textState.textBaseline = textStyle.getTextBaseline() || defaultTextBaseline;
textState.backgroundFill = textStyle.getBackgroundFill();
textState.backgroundStroke = textStyle.getBackgroundStroke();
textState.padding = textStyle.getPadding() || defaultPadding;
textState.scale = textScale === undefined ? 1 : textScale;
const textOffsetX = textStyle.getOffsetX();
const textOffsetY = textStyle.getOffsetY();
const textRotateWithView = textStyle.getRotateWithView();
const textRotation = textStyle.getRotation();
this.text_ = textStyle.getText() || '';
this.textOffsetX_ = textOffsetX === undefined ? 0 : textOffsetX;
this.textOffsetY_ = textOffsetY === undefined ? 0 : textOffsetY;
this.textRotateWithView_ = textRotateWithView === undefined ? false : textRotateWithView;
this.textRotation_ = textRotation === undefined ? 0 : textRotation;
this.strokeKey_ = strokeState ?
(typeof strokeState.strokeStyle == 'string' ? strokeState.strokeStyle : getUid(strokeState.strokeStyle)) +
strokeState.lineCap + strokeState.lineDashOffset + '|' + strokeState.lineWidth +
strokeState.lineJoin + strokeState.miterLimit + '[' + strokeState.lineDash.join() + ']' :
'';
this.textKey_ = textState.font + textState.scale + (textState.textAlign || '?');
this.fillKey_ = fillState ?
(typeof fillState.fillStyle == 'string' ? fillState.fillStyle : ('|' + getUid(fillState.fillStyle))) :
'';
}
};
export default CanvasTextReplay;
src/ol/render/webgl/CircleReplay.js
+331 -341
View File
@@ -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;
src/ol/render/webgl/ImageReplay.js
+137 -139
View File
@@ -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;
src/ol/render/webgl/Immediate.js
+329 -340
View File
@@ -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;
src/ol/render/webgl/LineStringReplay.js
+553 -567
View File
File diff suppressed because it is too large Load Diff
src/ol/render/webgl/PolygonReplay.js
+936 -966
View File
File diff suppressed because it is too large Load Diff
src/ol/render/webgl/Replay.js
+320 -319
View File
@@ -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;
src/ol/render/webgl/ReplayGroup.js
+286 -259
View File
@@ -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;
src/ol/render/webgl/TextReplay.js
+401 -407
View File
@@ -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;
src/ol/render/webgl/TextureReplay.js
+420 -429
View File
@@ -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;