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

Lint removal

Browse Source
This commit is contained in:
Tim Schaub
2018-07-16 17:57:57 -06:00
parent f78d0d4cfa
commit d0ab8dce38
63 changed files with 2945 additions and 2917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/ol/render/Box.js
View File

@@ -13,117 +13,117 @@ import Polygon from '../geom/Polygon.js';
* @param {string} className CSS class name.
*/
class RenderBox {
constructor(className) {
constructor(className) {
/**
/**
* @type {module:ol/geom/Polygon}
* @private
*/
this.geometry_ = null;
this.geometry_ = null;
/**
/**
* @type {HTMLDivElement}
* @private
*/
this.element_ = /** @type {HTMLDivElement} */ (document.createElement('div'));
this.element_.style.position = 'absolute';
this.element_.className = 'ol-box ' + className;
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;
this.map_ = null;
/**
/**
* @private
* @type {module:ol~Pixel}
*/
this.startPixel_ = null;
this.startPixel_ = null;
/**
/**
* @private
* @type {module:ol~Pixel}
*/
this.endPixel_ = null;
this.endPixel_ = null;
}
}
/**
/**
* @inheritDoc
*/
disposeInternal() {
this.setMap(null);
}
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;
}
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_);
}
}
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_();
}
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]);
}
}
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_;
}
getGeometry() {
return this.geometry_;
}
}
inherits(RenderBox, Disposable);

239
src/ol/render/Feature.js
View File

@@ -12,6 +12,13 @@ import {get as getProjection} from '../proj.js';
import {transform2D} from '../geom/flat/transform.js';
import {create as createTransform, compose as composeTransform} from '../transform.js';
/**
* @type {module:ol/transform~Transform}
*/
const tmpTransform = createTransform();
/**
* Lightweight, read-only, {@link module:ol/Feature~Feature} and {@link module:ol/geom/Geometry~Geometry} like
* structure, optimized for vector tile rendering and styling. Geometry access
@@ -26,219 +33,213 @@ import {create as createTransform, compose as composeTransform} from '../transfo
* @param {number|string|undefined} id Feature id.
*/
class RenderFeature {
constructor(type, flatCoordinates, ends, properties, id) {
/**
constructor(type, flatCoordinates, ends, properties, id) {
/**
* @private
* @type {module:ol/extent~Extent|undefined}
*/
this.extent_;
this.extent_;
/**
/**
* @private
* @type {number|string|undefined}
*/
this.id_ = id;
this.id_ = id;
/**
/**
* @private
* @type {module:ol/geom/GeometryType}
*/
this.type_ = type;
this.type_ = type;
/**
/**
* @private
* @type {Array.<number>}
*/
this.flatCoordinates_ = flatCoordinates;
this.flatCoordinates_ = flatCoordinates;
/**
/**
* @private
* @type {Array.<number>}
*/
this.flatInteriorPoints_ = null;
this.flatInteriorPoints_ = null;
/**
/**
* @private
* @type {Array.<number>}
*/
this.flatMidpoints_ = null;
this.flatMidpoints_ = null;
/**
/**
* @private
* @type {Array.<number>|Array.<Array.<number>>}
*/
this.ends_ = ends;
this.ends_ = ends;
/**
/**
* @private
* @type {Object.<string, *>}
*/
this.properties_ = properties;
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(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);
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 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_;
}
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_;
}
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_;
}
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_;
}
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_;
}
getId() {
return this.id_;
}
/**
/**
* @return {Array.<number>} Flat coordinates.
*/
getOrientedFlatCoordinates() {
return this.flatCoordinates_;
}
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;
}
getGeometry() {
return this;
}
/**
/**
* Get the feature properties.
* @return {Object.<string, *>} Feature properties.
* @api
*/
getProperties() {
return this.properties_;
}
getProperties() {
return this.properties_;
}
/**
/**
* @return {number} Stride.
*/
getStride() {
return 2;
}
getStride() {
return 2;
}
/**
/**
* Get the type of this feature's geometry.
* @return {module:ol/geom/GeometryType} Geometry type.
* @api
*/
getType() {
return this.type_;
}
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_);
}
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_);
}
}
/**
* @type {module:ol/transform~Transform}
*/
const tmpTransform = createTransform();
/**
* @return {Array.<number>|Array.<Array.<number>>} Ends or endss.
*/

8
src/ol/render/ReplayGroup.js
View File

@@ -7,19 +7,19 @@
* @abstract
*/
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) {}
getReplay(zIndex, replayType) {}
/**
/**
* @abstract
* @return {boolean} Is empty.
*/
isEmpty() {}
isEmpty() {}
}
export default ReplayGroup;

64
src/ol/render/VectorContext.js
View File

@@ -10,107 +10,107 @@
* @api
*/
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) {}
drawCustom(geometry, feature, renderer) {}
/**
/**
* Render a geometry.
*
* @param {module:ol/geom/Geometry} geometry The geometry to render.
*/
drawGeometry(geometry) {}
drawGeometry(geometry) {}
/**
/**
* Set the rendering style.
*
* @param {module:ol/style/Style} style The rendering style.
*/
setStyle(style) {}
setStyle(style) {}
/**
/**
* @param {module:ol/geom/Circle} circleGeometry Circle geometry.
* @param {module:ol/Feature} feature Feature.
*/
drawCircle(circleGeometry, feature) {}
drawCircle(circleGeometry, feature) {}
/**
/**
* @param {module:ol/Feature} feature Feature.
* @param {module:ol/style/Style} style Style.
*/
drawFeature(feature, style) {}
drawFeature(feature, style) {}
/**
/**
* @param {module:ol/geom/GeometryCollection} geometryCollectionGeometry Geometry
* collection.
* @param {module:ol/Feature} feature Feature.
*/
drawGeometryCollection(geometryCollectionGeometry, feature) {}
drawGeometryCollection(geometryCollectionGeometry, feature) {}
/**
/**
* @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) {}
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) {}
drawMultiLineString(multiLineStringGeometry, 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) {}
drawMultiPoint(multiPointGeometry, feature) {}
/**
/**
* @param {module:ol/geom/MultiPolygon} multiPolygonGeometry MultiPolygon geometry.
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
*/
drawMultiPolygon(multiPolygonGeometry, feature) {}
drawMultiPolygon(multiPolygonGeometry, feature) {}
/**
/**
* @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) {}
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) {}
drawPolygon(polygonGeometry, 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) {}
drawText(geometry, feature) {}
/**
/**
* @param {module:ol/style/Fill} fillStyle Fill style.
* @param {module:ol/style/Stroke} strokeStyle Stroke style.
*/
setFillStrokeStyle(fillStyle, strokeStyle) {}
setFillStrokeStyle(fillStyle, strokeStyle) {}
/**
/**
* @param {module:ol/style/Image} imageStyle Image style.
* @param {module:ol/render/canvas~DeclutterGroup=} opt_declutterGroup Declutter.
*/
setImageStyle(imageStyle, opt_declutterGroup) {}
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) {}
setTextStyle(textStyle, opt_declutterGroup) {}
}
export default VectorContext;

258
src/ol/render/canvas/ImageReplay.js
View File

@@ -17,97 +17,97 @@ import CanvasReplay from '../canvas/Replay.js';
* @struct
*/
class CanvasImageReplay {
constructor(tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
CanvasReplay.call(this,
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
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;
this.declutterGroup_ = null;
/**
/**
* @private
* @type {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement}
*/
this.hitDetectionImage_ = null;
this.hitDetectionImage_ = null;
/**
/**
* @private
* @type {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement}
*/
this.image_ = null;
this.image_ = null;
/**
/**
* @private
* @type {number|undefined}
*/
this.anchorX_ = undefined;
this.anchorX_ = undefined;
/**
/**
* @private
* @type {number|undefined}
*/
this.anchorY_ = undefined;
this.anchorY_ = undefined;
/**
/**
* @private
* @type {number|undefined}
*/
this.height_ = undefined;
this.height_ = undefined;
/**
/**
* @private
* @type {number|undefined}
*/
this.opacity_ = undefined;
this.opacity_ = undefined;
/**
/**
* @private
* @type {number|undefined}
*/
this.originX_ = undefined;
this.originX_ = undefined;
/**
/**
* @private
* @type {number|undefined}
*/
this.originY_ = undefined;
this.originY_ = undefined;
/**
/**
* @private
* @type {boolean|undefined}
*/
this.rotateWithView_ = undefined;
this.rotateWithView_ = undefined;
/**
/**
* @private
* @type {number|undefined}
*/
this.rotation_ = undefined;
this.rotation_ = undefined;
/**
/**
* @private
* @type {number|undefined}
*/
this.scale_ = undefined;
this.scale_ = undefined;
/**
/**
* @private
* @type {boolean|undefined}
*/
this.snapToPixel_ = undefined;
this.snapToPixel_ = undefined;
/**
/**
* @private
* @type {number|undefined}
*/
this.width_ = undefined;
this.width_ = undefined;
}
}
/**
/**
* @param {Array.<number>} flatCoordinates Flat coordinates.
* @param {number} offset Offset.
* @param {number} end End.
@@ -115,114 +115,114 @@ class CanvasImageReplay {
* @private
* @return {number} My end.
*/
drawCoordinates_(flatCoordinates, offset, end, stride) {
return this.appendFlatCoordinates(flatCoordinates, offset, end, stride, false, false);
}
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);
}
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);
}
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;
}
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];
}
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);

25
src/ol/render/canvas/Replay.js
View File

@@ -28,6 +28,19 @@ import {
setFromArray as transformSetFromArray
} from '../../transform.js';
/**
* @type {module:ol/extent~Extent}
*/
const tmpExtent = createEmpty();
/**
* @type {!module:ol/transform~Transform}
*/
const tmpTransform = createTransform();
/**
* @constructor
* @extends {module:ol/render/VectorContext}
@@ -1072,18 +1085,6 @@ class CanvasReplay {
inherits(CanvasReplay, VectorContext);
/**
* @type {module:ol/extent~Extent}
*/
const tmpExtent = createEmpty();
/**
* @type {!module:ol/transform~Transform}
*/
const tmpTransform = createTransform();
/**
* FIXME empty description for jsdoc
*/

316
src/ol/render/webgl/Replay.js
View File

@@ -24,23 +24,23 @@ import {ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, TRIANGLES,
* @struct
*/
class WebGLReplay {
constructor(tolerance, maxExtent) {
VectorContext.call(this);
constructor(tolerance, maxExtent) {
VectorContext.call(this);
/**
/**
* @protected
* @type {number}
*/
this.tolerance = tolerance;
this.tolerance = tolerance;
/**
/**
* @protected
* @const
* @type {module:ol/extent~Extent}
*/
this.maxExtent = maxExtent;
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
@@ -48,93 +48,93 @@ class WebGLReplay {
* @protected
* @type {module:ol/coordinate~Coordinate}
*/
this.origin = getCenter(maxExtent);
this.origin = getCenter(maxExtent);
/**
/**
* @private
* @type {module:ol/transform~Transform}
*/
this.projectionMatrix_ = createTransform();
this.projectionMatrix_ = createTransform();
/**
/**
* @private
* @type {module:ol/transform~Transform}
*/
this.offsetRotateMatrix_ = createTransform();
this.offsetRotateMatrix_ = createTransform();
/**
/**
* @private
* @type {module:ol/transform~Transform}
*/
this.offsetScaleMatrix_ = createTransform();
this.offsetScaleMatrix_ = createTransform();
/**
/**
* @private
* @type {Array.<number>}
*/
this.tmpMat4_ = create();
this.tmpMat4_ = create();
/**
/**
* @protected
* @type {Array.<number>}
*/
this.indices = [];
this.indices = [];
/**
/**
* @protected
* @type {?module:ol/webgl/Buffer}
*/
this.indicesBuffer = null;
this.indicesBuffer = null;
/**
/**
* Start index per feature (the index).
* @protected
* @type {Array.<number>}
*/
this.startIndices = [];
this.startIndices = [];
/**
/**
* Start index per feature (the feature).
* @protected
* @type {Array.<module:ol/Feature|module:ol/render/Feature>}
*/
this.startIndicesFeature = [];
this.startIndicesFeature = [];
/**
/**
* @protected
* @type {Array.<number>}
*/
this.vertices = [];
this.vertices = [];
/**
/**
* @protected
* @type {?module:ol/webgl/Buffer}
*/
this.verticesBuffer = null;
this.verticesBuffer = null;
/**
/**
* Optional parameter for PolygonReplay instances.
* @protected
* @type {module:ol/render/webgl/LineStringReplay|undefined}
*/
this.lineStringReplay = undefined;
this.lineStringReplay = undefined;
}
}
/**
/**
* @abstract
* @param {module:ol/webgl/Context} context WebGL context.
* @return {function()} Delete resources function.
*/
getDeleteResourcesFunction(context) {}
getDeleteResourcesFunction(context) {}
/**
/**
* @abstract
* @param {module:ol/webgl/Context} context Context.
*/
finish(context) {}
finish(context) {}
/**
/**
* @abstract
* @protected
* @param {WebGLRenderingContext} gl gl.
@@ -146,9 +146,9 @@ class WebGLReplay {
module:ol/render/webgl/polygonreplay/defaultshader/Locations|
module:ol/render/webgl/texturereplay/defaultshader/Locations} Locations.
*/
setUpProgram(gl, context, size, pixelRatio) {}
setUpProgram(gl, context, size, pixelRatio) {}
/**
/**
* @abstract
* @protected
* @param {WebGLRenderingContext} gl gl.
@@ -157,9 +157,9 @@ class WebGLReplay {
module:ol/render/webgl/polygonreplay/defaultshader/Locations|
module:ol/render/webgl/texturereplay/defaultshader/Locations} locations Locations.
*/
shutDownProgram(gl, locations) {}
shutDownProgram(gl, locations) {}
/**
/**
* @abstract
* @protected
* @param {WebGLRenderingContext} gl gl.
@@ -167,9 +167,9 @@ class WebGLReplay {
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
* @param {boolean} hitDetection Hit detection mode.
*/
drawReplay(gl, context, skippedFeaturesHash, hitDetection) {}
drawReplay(gl, context, skippedFeaturesHash, hitDetection) {}
/**
/**
* @abstract
* @protected
* @param {WebGLRenderingContext} gl gl.
@@ -180,9 +180,9 @@ class WebGLReplay {
* @return {T|undefined} Callback result.
* @template T
*/
drawHitDetectionReplayOneByOne(gl, context, skippedFeaturesHash, featureCallback, opt_hitExtent) {}
drawHitDetectionReplayOneByOne(gl, context, skippedFeaturesHash, featureCallback, opt_hitExtent) {}
/**
/**
* @protected
* @param {WebGLRenderingContext} gl gl.
* @param {module:ol/webgl/Context} context Context.
@@ -194,19 +194,19 @@ class WebGLReplay {
* @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);
}
}
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.
@@ -215,19 +215,19 @@ class WebGLReplay {
* @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);
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;
}
}
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.
@@ -243,120 +243,120 @@ class WebGLReplay {
* @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;
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);
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);
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);
this.lineStringReplay.replay(context,
center, resolution, rotation, size, pixelRatio,
opacity, skippedFeaturesHash,
featureCallback, oneByOne, opt_hitExtent);
gl.stencilMask(0);
gl.stencilFunc(gl.NOTEQUAL, 1, 255);
}
gl.stencilMask(0);
gl.stencilFunc(gl.NOTEQUAL, 1, 255);
}
context.bindBuffer(ARRAY_BUFFER, this.verticesBuffer);
context.bindBuffer(ARRAY_BUFFER, this.verticesBuffer);
context.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
context.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
const locations = this.setUpProgram(gl, context, size, pixelRatio);
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]));
// 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 offsetScaleMatrix = resetTransform(this.offsetScaleMatrix_);
scaleTransform(offsetScaleMatrix, 2 / size[0], 2 / size[1]);
const offsetRotateMatrix = resetTransform(this.offsetRotateMatrix_);
if (rotation !== 0) {
rotateTransform(offsetRotateMatrix, -rotation);
}
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);
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);
}
// 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);
// 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));
}
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;
}
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;
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);
}
const numItems = end - start;
const offsetInBytes = start * elementSize;
gl.drawElements(TRIANGLES, numItems, elementType, offsetInBytes);
}
}
inherits(WebGLReplay, VectorContext);