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

Use blocked scoped variables

Browse Source 
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
This commit is contained in:
Tim Schaub
2018-01-11 23:32:36 -07:00
parent 0bf2b04dee
commit ad62739a6e
684 changed files with 18120 additions and 18184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/renderer/Layer.js
+17 -17
View File
@@ -16,7 +16,7 @@ import SourceState from '../source/State.js';
* @param {ol.layer.Layer} layer Layer.
* @struct
*/
var LayerRenderer = function(layer) {
const LayerRenderer = function(layer) {
Observable.call(this);
@@ -97,7 +97,7 @@ LayerRenderer.prototype.getLayer = function() {
* @private
*/
LayerRenderer.prototype.handleImageChange_ = function(event) {
var image = /** @type {ol.Image} */ (event.target);
const image = /** @type {ol.Image} */ (event.target);
if (image.getState() === ImageState.LOADED) {
this.renderIfReadyAndVisible();
}
@@ -113,7 +113,7 @@ LayerRenderer.prototype.handleImageChange_ = function(event) {
* @protected
*/
LayerRenderer.prototype.loadImage = function(image) {
var imageState = image.getState();
let imageState = image.getState();
if (imageState != ImageState.LOADED && imageState != ImageState.ERROR) {
_ol_events_.listen(image, EventType.CHANGE, this.handleImageChange_, this);
}
@@ -129,7 +129,7 @@ LayerRenderer.prototype.loadImage = function(image) {
* @protected
*/
LayerRenderer.prototype.renderIfReadyAndVisible = function() {
var layer = this.getLayer();
const layer = this.getLayer();
if (layer.getVisible() && layer.getSourceState() == SourceState.READY) {
this.changed();
}
@@ -148,16 +148,16 @@ LayerRenderer.prototype.scheduleExpireCache = function(frameState, tileSource) {
* @param {ol.PluggableMap} map Map.
* @param {olx.FrameState} frameState Frame state.
*/
var postRenderFunction = function(tileSource, map, frameState) {
var tileSourceKey = getUid(tileSource).toString();
const postRenderFunction = function(tileSource, map, frameState) {
const tileSourceKey = getUid(tileSource).toString();
if (tileSourceKey in frameState.usedTiles) {
tileSource.expireCache(frameState.viewState.projection,
frameState.usedTiles[tileSourceKey]);
frameState.usedTiles[tileSourceKey]);
}
}.bind(null, tileSource);
frameState.postRenderFunctions.push(
/** @type {ol.PostRenderFunction} */ (postRenderFunction)
/** @type {ol.PostRenderFunction} */ (postRenderFunction)
);
}
};
@@ -172,8 +172,8 @@ LayerRenderer.prototype.scheduleExpireCache = function(frameState, tileSource) {
*/
LayerRenderer.prototype.updateUsedTiles = function(usedTiles, tileSource, z, tileRange) {
// FIXME should we use tilesToDrawByZ instead?
var tileSourceKey = getUid(tileSource).toString();
var zKey = z.toString();
const tileSourceKey = getUid(tileSource).toString();
const zKey = z.toString();
if (tileSourceKey in usedTiles) {
if (zKey in usedTiles[tileSourceKey]) {
usedTiles[tileSourceKey][zKey].extend(tileRange);
@@ -208,16 +208,16 @@ LayerRenderer.prototype.updateUsedTiles = function(usedTiles, tileSource, z, til
* @template T
*/
LayerRenderer.prototype.manageTilePyramid = function(
frameState, tileSource, tileGrid, pixelRatio, projection, extent,
currentZ, preload, opt_tileCallback, opt_this) {
var tileSourceKey = getUid(tileSource).toString();
frameState, tileSource, tileGrid, pixelRatio, projection, extent,
currentZ, preload, opt_tileCallback, opt_this) {
const tileSourceKey = getUid(tileSource).toString();
if (!(tileSourceKey in frameState.wantedTiles)) {
frameState.wantedTiles[tileSourceKey] = {};
}
var wantedTiles = frameState.wantedTiles[tileSourceKey];
var tileQueue = frameState.tileQueue;
var minZoom = tileGrid.getMinZoom();
var tile, tileRange, tileResolution, x, y, z;
const wantedTiles = frameState.wantedTiles[tileSourceKey];
const tileQueue = frameState.tileQueue;
const minZoom = tileGrid.getMinZoom();
let tile, tileRange, tileResolution, x, y, z;
for (z = minZoom; z <= currentZ; ++z) {
tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z, tileRange);
tileResolution = tileGrid.getResolution(z);
src/ol/renderer/Map.js
+45 -45
View File
@@ -20,7 +20,7 @@ import _ol_transform_ from '../transform.js';
* @param {ol.PluggableMap} map Map.
* @struct
*/
var MapRenderer = function(container, map) {
const MapRenderer = function(container, map) {
Disposable.call(this);
@@ -53,18 +53,18 @@ inherits(MapRenderer, Disposable);
* @protected
*/
MapRenderer.prototype.calculateMatrices2D = function(frameState) {
var viewState = frameState.viewState;
var coordinateToPixelTransform = frameState.coordinateToPixelTransform;
var pixelToCoordinateTransform = frameState.pixelToCoordinateTransform;
const viewState = frameState.viewState;
const coordinateToPixelTransform = frameState.coordinateToPixelTransform;
const pixelToCoordinateTransform = frameState.pixelToCoordinateTransform;
_ol_transform_.compose(coordinateToPixelTransform,
frameState.size[0] / 2, frameState.size[1] / 2,
1 / viewState.resolution, -1 / viewState.resolution,
-viewState.rotation,
-viewState.center[0], -viewState.center[1]);
frameState.size[0] / 2, frameState.size[1] / 2,
1 / viewState.resolution, -1 / viewState.resolution,
-viewState.rotation,
-viewState.center[0], -viewState.center[1]);
_ol_transform_.invert(
_ol_transform_.setFromArray(pixelToCoordinateTransform, coordinateToPixelTransform));
_ol_transform_.setFromArray(pixelToCoordinateTransform, coordinateToPixelTransform));
};
@@ -72,7 +72,7 @@ MapRenderer.prototype.calculateMatrices2D = function(frameState) {
* Removes all layer renderers.
*/
MapRenderer.prototype.removeLayerRenderers = function() {
for (var key in this.layerRenderers_) {
for (const key in this.layerRenderers_) {
this.removeLayerRendererByKey_(key).dispose();
}
};
@@ -104,10 +104,10 @@ MapRenderer.expireIconCache_ = function(map, frameState) {
* @template S,T,U
*/
MapRenderer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg,
layerFilter, thisArg2) {
var result;
var viewState = frameState.viewState;
var viewResolution = viewState.resolution;
layerFilter, thisArg2) {
let result;
const viewState = frameState.viewState;
const viewResolution = viewState.resolution;
/**
* @param {ol.Feature|ol.render.Feature} feature Feature.
@@ -115,39 +115,39 @@ MapRenderer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameSta
* @return {?} Callback result.
*/
function forEachFeatureAtCoordinate(feature, layer) {
var key = getUid(feature).toString();
var managed = frameState.layerStates[getUid(layer)].managed;
const key = getUid(feature).toString();
const managed = frameState.layerStates[getUid(layer)].managed;
if (!(key in frameState.skippedFeatureUids && !managed)) {
return callback.call(thisArg, feature, managed ? layer : null);
}
}
var projection = viewState.projection;
const projection = viewState.projection;
var translatedCoordinate = coordinate;
let translatedCoordinate = coordinate;
if (projection.canWrapX()) {
var projectionExtent = projection.getExtent();
var worldWidth = getWidth(projectionExtent);
var x = coordinate[0];
const projectionExtent = projection.getExtent();
const worldWidth = getWidth(projectionExtent);
const x = coordinate[0];
if (x < projectionExtent[0] || x > projectionExtent[2]) {
var worldsAway = Math.ceil((projectionExtent[0] - x) / worldWidth);
const worldsAway = Math.ceil((projectionExtent[0] - x) / worldWidth);
translatedCoordinate = [x + worldWidth * worldsAway, coordinate[1]];
}
}
var layerStates = frameState.layerStatesArray;
var numLayers = layerStates.length;
var i;
const layerStates = frameState.layerStatesArray;
const numLayers = layerStates.length;
let i;
for (i = numLayers - 1; i >= 0; --i) {
var layerState = layerStates[i];
var layer = layerState.layer;
const layerState = layerStates[i];
const layer = layerState.layer;
if (Layer.visibleAtResolution(layerState, viewResolution) &&
layerFilter.call(thisArg2, layer)) {
var layerRenderer = this.getLayerRenderer(layer);
const layerRenderer = this.getLayerRenderer(layer);
if (layer.getSource()) {
result = layerRenderer.forEachFeatureAtCoordinate(
layer.getSource().getWrapX() ? translatedCoordinate : coordinate,
frameState, hitTolerance, forEachFeatureAtCoordinate, thisArg);
layer.getSource().getWrapX() ? translatedCoordinate : coordinate,
frameState, hitTolerance, forEachFeatureAtCoordinate, thisArg);
}
if (result) {
return result;
@@ -174,7 +174,7 @@ MapRenderer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameSta
* @template S,T,U
*/
MapRenderer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg,
layerFilter, thisArg2) {};
layerFilter, thisArg2) {};
/**
@@ -190,8 +190,8 @@ MapRenderer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback
* @template U
*/
MapRenderer.prototype.hasFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, layerFilter, thisArg) {
var hasFeature = this.forEachFeatureAtCoordinate(
coordinate, frameState, hitTolerance, TRUE, this, layerFilter, thisArg);
const hasFeature = this.forEachFeatureAtCoordinate(
coordinate, frameState, hitTolerance, TRUE, this, layerFilter, thisArg);
return hasFeature !== undefined;
};
@@ -203,15 +203,15 @@ MapRenderer.prototype.hasFeatureAtCoordinate = function(coordinate, frameState,
* @return {ol.renderer.Layer} Layer renderer.
*/
MapRenderer.prototype.getLayerRenderer = function(layer) {
var layerKey = getUid(layer).toString();
const layerKey = getUid(layer).toString();
if (layerKey in this.layerRenderers_) {
return this.layerRenderers_[layerKey];
} else {
var layerRendererPlugins = getLayerRendererPlugins();
var renderer;
var type = this.getType();
for (var i = 0, ii = layerRendererPlugins.length; i < ii; ++i) {
var plugin = layerRendererPlugins[i];
const layerRendererPlugins = getLayerRendererPlugins();
let renderer;
const type = this.getType();
for (let i = 0, ii = layerRendererPlugins.length; i < ii; ++i) {
const plugin = layerRendererPlugins[i];
if (plugin['handles'](type, layer)) {
renderer = plugin['create'](this, layer);
break;
@@ -220,7 +220,7 @@ MapRenderer.prototype.getLayerRenderer = function(layer) {
if (renderer) {
this.layerRenderers_[layerKey] = renderer;
this.layerRendererListeners_[layerKey] = _ol_events_.listen(renderer,
EventType.CHANGE, this.handleLayerRendererChange_, this);
EventType.CHANGE, this.handleLayerRendererChange_, this);
} else {
throw new Error('Unable to create renderer for layer: ' + layer.getType());
}
@@ -278,7 +278,7 @@ MapRenderer.prototype.handleLayerRendererChange_ = function() {
* @private
*/
MapRenderer.prototype.removeLayerRendererByKey_ = function(layerKey) {
var layerRenderer = this.layerRenderers_[layerKey];
const layerRenderer = this.layerRenderers_[layerKey];
delete this.layerRenderers_[layerKey];
_ol_events_.unlistenByKey(this.layerRendererListeners_[layerKey]);
@@ -301,7 +301,7 @@ MapRenderer.prototype.renderFrame = nullFunction;
* @private
*/
MapRenderer.prototype.removeUnusedLayerRenderers_ = function(map, frameState) {
var layerKey;
let layerKey;
for (layerKey in this.layerRenderers_) {
if (!frameState || !(layerKey in frameState.layerStates)) {
this.removeLayerRendererByKey_(layerKey).dispose();
@@ -316,7 +316,7 @@ MapRenderer.prototype.removeUnusedLayerRenderers_ = function(map, frameState) {
*/
MapRenderer.prototype.scheduleExpireIconCache = function(frameState) {
frameState.postRenderFunctions.push(
/** @type {ol.PostRenderFunction} */ (MapRenderer.expireIconCache_)
/** @type {ol.PostRenderFunction} */ (MapRenderer.expireIconCache_)
);
};
@@ -326,11 +326,11 @@ MapRenderer.prototype.scheduleExpireIconCache = function(frameState) {
* @protected
*/
MapRenderer.prototype.scheduleRemoveUnusedLayerRenderers = function(frameState) {
var layerKey;
let layerKey;
for (layerKey in this.layerRenderers_) {
if (!(layerKey in frameState.layerStates)) {
frameState.postRenderFunctions.push(
/** @type {ol.PostRenderFunction} */ (this.removeUnusedLayerRenderers_.bind(this))
/** @type {ol.PostRenderFunction} */ (this.removeUnusedLayerRenderers_.bind(this))
);
return;
}
src/ol/renderer/canvas/ImageLayer.js
+37 -37
View File
@@ -21,7 +21,7 @@ import _ol_transform_ from '../../transform.js';
* @param {ol.layer.Image} imageLayer Single image layer.
* @api
*/
var CanvasImageLayerRenderer = function(imageLayer) {
const CanvasImageLayerRenderer = function(imageLayer) {
IntermediateCanvasRenderer.call(this, imageLayer);
@@ -73,11 +73,11 @@ CanvasImageLayerRenderer['handles'] = function(type, layer) {
* @return {ol.renderer.canvas.ImageLayer} The layer renderer.
*/
CanvasImageLayerRenderer['create'] = function(mapRenderer, layer) {
var renderer = new CanvasImageLayerRenderer(/** @type {ol.layer.Image} */ (layer));
const renderer = new CanvasImageLayerRenderer(/** @type {ol.layer.Image} */ (layer));
if (layer.getType() === LayerType.VECTOR) {
var candidates = getLayerRendererPlugins();
for (var i = 0, ii = candidates.length; i < ii; ++i) {
var candidate = /** @type {Object.<string, Function>} */ (candidates[i]);
const candidates = getLayerRendererPlugins();
for (let i = 0, ii = candidates.length; i < ii; ++i) {
const candidate = /** @type {Object.<string, Function>} */ (candidates[i]);
if (candidate !== CanvasImageLayerRenderer && candidate['handles'](RendererType.CANVAS, layer)) {
renderer.setVectorRenderer(candidate['create'](mapRenderer, layer));
}
@@ -108,36 +108,36 @@ CanvasImageLayerRenderer.prototype.getImageTransform = function() {
*/
CanvasImageLayerRenderer.prototype.prepareFrame = function(frameState, layerState) {
var pixelRatio = frameState.pixelRatio;
var size = frameState.size;
var viewState = frameState.viewState;
var viewCenter = viewState.center;
var viewResolution = viewState.resolution;
const pixelRatio = frameState.pixelRatio;
const size = frameState.size;
const viewState = frameState.viewState;
const viewCenter = viewState.center;
const viewResolution = viewState.resolution;
var image;
var imageLayer = /** @type {ol.layer.Image} */ (this.getLayer());
var imageSource = imageLayer.getSource();
let image;
const imageLayer = /** @type {ol.layer.Image} */ (this.getLayer());
const imageSource = imageLayer.getSource();
var hints = frameState.viewHints;
const hints = frameState.viewHints;
var renderedExtent = frameState.extent;
let renderedExtent = frameState.extent;
if (layerState.extent !== undefined) {
renderedExtent = getIntersection(renderedExtent, layerState.extent);
}
if (!hints[ViewHint.ANIMATING] && !hints[ViewHint.INTERACTING] &&
!isEmpty(renderedExtent)) {
var projection = viewState.projection;
let projection = viewState.projection;
if (!ENABLE_RASTER_REPROJECTION) {
var sourceProjection = imageSource.getProjection();
const sourceProjection = imageSource.getProjection();
if (sourceProjection) {
projection = sourceProjection;
}
}
var vectorRenderer = this.vectorRenderer_;
const vectorRenderer = this.vectorRenderer_;
if (vectorRenderer) {
var context = vectorRenderer.context;
var imageFrameState = /** @type {olx.FrameState} */ (_ol_obj_.assign({}, frameState, {
const context = vectorRenderer.context;
const imageFrameState = /** @type {olx.FrameState} */ (_ol_obj_.assign({}, frameState, {
size: [
getWidth(renderedExtent) / viewResolution,
getHeight(renderedExtent) / viewResolution
@@ -146,7 +146,7 @@ CanvasImageLayerRenderer.prototype.prepareFrame = function(frameState, layerStat
rotation: 0
}))
}));
var skippedFeatures = Object.keys(imageFrameState.skippedFeatureUids).sort();
const skippedFeatures = Object.keys(imageFrameState.skippedFeatureUids).sort();
if (vectorRenderer.prepareFrame(imageFrameState, layerState) &&
(vectorRenderer.replayGroupChanged ||
!equals(skippedFeatures, this.skippedFeatures_))) {
@@ -158,9 +158,9 @@ CanvasImageLayerRenderer.prototype.prepareFrame = function(frameState, layerStat
}
} else {
image = imageSource.getImage(
renderedExtent, viewResolution, pixelRatio, projection);
renderedExtent, viewResolution, pixelRatio, projection);
if (image) {
var loaded = this.loadImage(image);
const loaded = this.loadImage(image);
if (loaded) {
this.image_ = image;
}
@@ -170,22 +170,22 @@ CanvasImageLayerRenderer.prototype.prepareFrame = function(frameState, layerStat
if (this.image_) {
image = this.image_;
var imageExtent = image.getExtent();
var imageResolution = image.getResolution();
var imagePixelRatio = image.getPixelRatio();
var scale = pixelRatio * imageResolution /
const imageExtent = image.getExtent();
const imageResolution = image.getResolution();
const imagePixelRatio = image.getPixelRatio();
const scale = pixelRatio * imageResolution /
(viewResolution * imagePixelRatio);
var transform = _ol_transform_.compose(this.imageTransform_,
pixelRatio * size[0] / 2, pixelRatio * size[1] / 2,
scale, scale,
0,
imagePixelRatio * (imageExtent[0] - viewCenter[0]) / imageResolution,
imagePixelRatio * (viewCenter[1] - imageExtent[3]) / imageResolution);
const transform = _ol_transform_.compose(this.imageTransform_,
pixelRatio * size[0] / 2, pixelRatio * size[1] / 2,
scale, scale,
0,
imagePixelRatio * (imageExtent[0] - viewCenter[0]) / imageResolution,
imagePixelRatio * (viewCenter[1] - imageExtent[3]) / imageResolution);
_ol_transform_.compose(this.coordinateToCanvasPixelTransform,
pixelRatio * size[0] / 2 - transform[4], pixelRatio * size[1] / 2 - transform[5],
pixelRatio / viewResolution, -pixelRatio / viewResolution,
0,
-viewCenter[0], -viewCenter[1]);
pixelRatio * size[0] / 2 - transform[4], pixelRatio * size[1] / 2 - transform[5],
pixelRatio / viewResolution, -pixelRatio / viewResolution,
0,
-viewCenter[0], -viewCenter[1]);
this.renderedResolution = imageResolution * pixelRatio / imagePixelRatio;
}
src/ol/renderer/canvas/IntermediateCanvas.js
+23 -23
View File
@@ -14,7 +14,7 @@ import _ol_transform_ from '../../transform.js';
* @extends {ol.renderer.canvas.Layer}
* @param {ol.layer.Layer} layer Layer.
*/
var IntermediateCanvasRenderer = function(layer) {
const IntermediateCanvasRenderer = function(layer) {
CanvasLayerRenderer.call(this, layer);
@@ -42,33 +42,33 @@ IntermediateCanvasRenderer.prototype.composeFrame = function(frameState, layerSt
this.preCompose(context, frameState);
var image = this.getImage();
const image = this.getImage();
if (image) {
// clipped rendering if layer extent is set
var extent = layerState.extent;
var clipped = extent !== undefined &&
const extent = layerState.extent;
const clipped = extent !== undefined &&
!containsExtent(extent, frameState.extent) &&
intersects(extent, frameState.extent);
if (clipped) {
this.clip(context, frameState, /** @type {ol.Extent} */ (extent));
}
var imageTransform = this.getImageTransform();
const imageTransform = this.getImageTransform();
// for performance reasons, context.save / context.restore is not used
// to save and restore the transformation matrix and the opacity.
// see http://jsperf.com/context-save-restore-versus-variable
var alpha = context.globalAlpha;
const alpha = context.globalAlpha;
context.globalAlpha = layerState.opacity;
// for performance reasons, context.setTransform is only used
// when the view is rotated. see http://jsperf.com/canvas-transform
var dx = imageTransform[4];
var dy = imageTransform[5];
var dw = image.width * imageTransform[0];
var dh = image.height * imageTransform[3];
const dx = imageTransform[4];
const dy = imageTransform[5];
const dw = image.width * imageTransform[0];
const dh = image.height * imageTransform[3];
context.drawImage(image, 0, 0, +image.width, +image.height,
Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh));
Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh));
context.globalAlpha = alpha;
if (clipped) {
@@ -98,20 +98,20 @@ IntermediateCanvasRenderer.prototype.getImageTransform = function() {};
* @inheritDoc
*/
IntermediateCanvasRenderer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg) {
var layer = this.getLayer();
var source = layer.getSource();
var resolution = frameState.viewState.resolution;
var rotation = frameState.viewState.rotation;
var skippedFeatureUids = frameState.skippedFeatureUids;
const layer = this.getLayer();
const source = layer.getSource();
const resolution = frameState.viewState.resolution;
const rotation = frameState.viewState.rotation;
const skippedFeatureUids = frameState.skippedFeatureUids;
return source.forEachFeatureAtCoordinate(
coordinate, resolution, rotation, hitTolerance, skippedFeatureUids,
/**
coordinate, resolution, rotation, hitTolerance, skippedFeatureUids,
/**
* @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
return callback.call(thisArg, feature, layer);
});
function(feature) {
return callback.call(thisArg, feature, layer);
});
};
@@ -128,7 +128,7 @@ IntermediateCanvasRenderer.prototype.forEachLayerAtCoordinate = function(coordin
// so that for example also transparent polygons are detected
return CanvasLayerRenderer.prototype.forEachLayerAtCoordinate.apply(this, arguments);
} else {
var pixel = _ol_transform_.apply(this.coordinateToCanvasPixelTransform, coordinate.slice());
const pixel = _ol_transform_.apply(this.coordinateToCanvasPixelTransform, coordinate.slice());
_ol_coordinate_.scale(pixel, frameState.viewState.resolution / this.renderedResolution);
if (!this.hitCanvasContext_) {
@@ -138,7 +138,7 @@ IntermediateCanvasRenderer.prototype.forEachLayerAtCoordinate = function(coordin
this.hitCanvasContext_.clearRect(0, 0, 1, 1);
this.hitCanvasContext_.drawImage(this.getImage(), pixel[0], pixel[1], 1, 1, 0, 0, 1, 1);
var imageData = this.hitCanvasContext_.getImageData(0, 0, 1, 1).data;
const imageData = this.hitCanvasContext_.getImageData(0, 0, 1, 1).data;
if (imageData[3] > 0) {
return callback.call(thisArg, this.getLayer(), imageData);
} else {
src/ol/renderer/canvas/Layer.js
+29 -29
View File
@@ -17,7 +17,7 @@ import _ol_transform_ from '../../transform.js';
* @extends {ol.renderer.Layer}
* @param {ol.layer.Layer} layer Layer.
*/
var CanvasLayerRenderer = function(layer) {
const CanvasLayerRenderer = function(layer) {
LayerRenderer.call(this, layer);
@@ -45,14 +45,14 @@ inherits(CanvasLayerRenderer, LayerRenderer);
* @protected
*/
CanvasLayerRenderer.prototype.clip = function(context, frameState, extent) {
var pixelRatio = frameState.pixelRatio;
var width = frameState.size[0] * pixelRatio;
var height = frameState.size[1] * pixelRatio;
var rotation = frameState.viewState.rotation;
var topLeft = getTopLeft(/** @type {ol.Extent} */ (extent));
var topRight = getTopRight(/** @type {ol.Extent} */ (extent));
var bottomRight = getBottomRight(/** @type {ol.Extent} */ (extent));
var bottomLeft = getBottomLeft(/** @type {ol.Extent} */ (extent));
const pixelRatio = frameState.pixelRatio;
const width = frameState.size[0] * pixelRatio;
const height = frameState.size[1] * pixelRatio;
const rotation = frameState.viewState.rotation;
const topLeft = getTopLeft(/** @type {ol.Extent} */ (extent));
const topRight = getTopRight(/** @type {ol.Extent} */ (extent));
const bottomRight = getBottomRight(/** @type {ol.Extent} */ (extent));
const bottomLeft = getBottomLeft(/** @type {ol.Extent} */ (extent));
_ol_transform_.apply(frameState.coordinateToPixelTransform, topLeft);
_ol_transform_.apply(frameState.coordinateToPixelTransform, topRight);
@@ -79,19 +79,19 @@ CanvasLayerRenderer.prototype.clip = function(context, frameState, extent) {
* @private
*/
CanvasLayerRenderer.prototype.dispatchComposeEvent_ = function(type, context, frameState, opt_transform) {
var layer = this.getLayer();
const layer = this.getLayer();
if (layer.hasListener(type)) {
var width = frameState.size[0] * frameState.pixelRatio;
var height = frameState.size[1] * frameState.pixelRatio;
var rotation = frameState.viewState.rotation;
const width = frameState.size[0] * frameState.pixelRatio;
const height = frameState.size[1] * frameState.pixelRatio;
const rotation = frameState.viewState.rotation;
_ol_render_canvas_.rotateAtOffset(context, -rotation, width / 2, height / 2);
var transform = opt_transform !== undefined ?
const transform = opt_transform !== undefined ?
opt_transform : this.getTransform(frameState, 0);
var render = new CanvasImmediateRenderer(
context, frameState.pixelRatio, frameState.extent, transform,
frameState.viewState.rotation);
var composeEvent = new RenderEvent(type, render, frameState,
context, null);
const render = new CanvasImmediateRenderer(
context, frameState.pixelRatio, frameState.extent, transform,
frameState.viewState.rotation);
const composeEvent = new RenderEvent(type, render, frameState,
context, null);
layer.dispatchEvent(composeEvent);
_ol_render_canvas_.rotateAtOffset(context, rotation, width / 2, height / 2);
}
@@ -108,7 +108,7 @@ CanvasLayerRenderer.prototype.dispatchComposeEvent_ = function(type, context, fr
* @template S,T,U
*/
CanvasLayerRenderer.prototype.forEachLayerAtCoordinate = function(coordinate, frameState, callback, thisArg) {
var hasFeature = this.forEachFeatureAtCoordinate(coordinate, frameState, 0, TRUE, this);
const hasFeature = this.forEachFeatureAtCoordinate(coordinate, frameState, 0, TRUE, this);
if (hasFeature) {
return callback.call(thisArg, this.getLayer(), null);
@@ -159,15 +159,15 @@ CanvasLayerRenderer.prototype.dispatchRenderEvent = function(context, frameState
* @return {!ol.Transform} Transform.
*/
CanvasLayerRenderer.prototype.getTransform = function(frameState, offsetX) {
var viewState = frameState.viewState;
var pixelRatio = frameState.pixelRatio;
var dx1 = pixelRatio * frameState.size[0] / 2;
var dy1 = pixelRatio * frameState.size[1] / 2;
var sx = pixelRatio / viewState.resolution;
var sy = -sx;
var angle = -viewState.rotation;
var dx2 = -viewState.center[0] + offsetX;
var dy2 = -viewState.center[1];
const viewState = frameState.viewState;
const pixelRatio = frameState.pixelRatio;
const dx1 = pixelRatio * frameState.size[0] / 2;
const dy1 = pixelRatio * frameState.size[1] / 2;
const sx = pixelRatio / viewState.resolution;
const sy = -sx;
const angle = -viewState.rotation;
const dx2 = -viewState.center[0] + offsetX;
const dy2 = -viewState.center[1];
return _ol_transform_.compose(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
};
src/ol/renderer/canvas/Map.js
+41 -41
View File
@@ -24,7 +24,7 @@ import SourceState from '../../source/State.js';
* @param {ol.PluggableMap} map Map.
* @api
*/
var CanvasMapRenderer = function(container, map) {
const CanvasMapRenderer = function(container, map) {
MapRenderer.call(this, container, map);
@@ -90,20 +90,20 @@ CanvasMapRenderer['create'] = function(container, map) {
* @private
*/
CanvasMapRenderer.prototype.dispatchComposeEvent_ = function(type, frameState) {
var map = this.getMap();
var context = this.context_;
const map = this.getMap();
const context = this.context_;
if (map.hasListener(type)) {
var extent = frameState.extent;
var pixelRatio = frameState.pixelRatio;
var viewState = frameState.viewState;
var rotation = viewState.rotation;
const extent = frameState.extent;
const pixelRatio = frameState.pixelRatio;
const viewState = frameState.viewState;
const rotation = viewState.rotation;
var transform = this.getTransform(frameState);
const transform = this.getTransform(frameState);
var vectorContext = new CanvasImmediateRenderer(context, pixelRatio,
extent, transform, rotation);
var composeEvent = new RenderEvent(type, vectorContext,
frameState, context, null);
const vectorContext = new CanvasImmediateRenderer(context, pixelRatio,
extent, transform, rotation);
const composeEvent = new RenderEvent(type, vectorContext,
frameState, context, null);
map.dispatchEvent(composeEvent);
}
};
@@ -115,14 +115,14 @@ CanvasMapRenderer.prototype.dispatchComposeEvent_ = function(type, frameState) {
* @return {!ol.Transform} Transform.
*/
CanvasMapRenderer.prototype.getTransform = function(frameState) {
var viewState = frameState.viewState;
var dx1 = this.canvas_.width / 2;
var dy1 = this.canvas_.height / 2;
var sx = frameState.pixelRatio / viewState.resolution;
var sy = -sx;
var angle = -viewState.rotation;
var dx2 = -viewState.center[0];
var dy2 = -viewState.center[1];
const viewState = frameState.viewState;
const dx1 = this.canvas_.width / 2;
const dy1 = this.canvas_.height / 2;
const sx = frameState.pixelRatio / viewState.resolution;
const sy = -sx;
const angle = -viewState.rotation;
const dx2 = -viewState.center[0];
const dy2 = -viewState.center[1];
return _ol_transform_.compose(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
};
@@ -148,10 +148,10 @@ CanvasMapRenderer.prototype.renderFrame = function(frameState) {
return;
}
var context = this.context_;
var pixelRatio = frameState.pixelRatio;
var width = Math.round(frameState.size[0] * pixelRatio);
var height = Math.round(frameState.size[1] * pixelRatio);
const context = this.context_;
const pixelRatio = frameState.pixelRatio;
const width = Math.round(frameState.size[0] * pixelRatio);
const height = Math.round(frameState.size[1] * pixelRatio);
if (this.canvas_.width != width || this.canvas_.height != height) {
this.canvas_.width = width;
this.canvas_.height = height;
@@ -159,13 +159,13 @@ CanvasMapRenderer.prototype.renderFrame = function(frameState) {
context.clearRect(0, 0, width, height);
}
var rotation = frameState.viewState.rotation;
const rotation = frameState.viewState.rotation;
this.calculateMatrices2D(frameState);
this.dispatchComposeEvent_(RenderEventType.PRECOMPOSE, frameState);
var layerStatesArray = frameState.layerStatesArray;
const layerStatesArray = frameState.layerStatesArray;
stableSort(layerStatesArray, MapRenderer.sortByZIndex);
if (rotation) {
@@ -173,8 +173,8 @@ CanvasMapRenderer.prototype.renderFrame = function(frameState) {
_ol_render_canvas_.rotateAtOffset(context, rotation, width / 2, height / 2);
}
var viewResolution = frameState.viewState.resolution;
var i, ii, layer, layerRenderer, layerState;
const viewResolution = frameState.viewState.resolution;
let i, ii, layer, layerRenderer, layerState;
for (i = 0, ii = layerStatesArray.length; i < ii; ++i) {
layerState = layerStatesArray[i];
layer = layerState.layer;
@@ -208,26 +208,26 @@ CanvasMapRenderer.prototype.renderFrame = function(frameState) {
* @inheritDoc
*/
CanvasMapRenderer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg,
layerFilter, thisArg2) {
var result;
var viewState = frameState.viewState;
var viewResolution = viewState.resolution;
layerFilter, thisArg2) {
let result;
const viewState = frameState.viewState;
const viewResolution = viewState.resolution;
var layerStates = frameState.layerStatesArray;
var numLayers = layerStates.length;
const layerStates = frameState.layerStatesArray;
const numLayers = layerStates.length;
var coordinate = _ol_transform_.apply(
frameState.pixelToCoordinateTransform, pixel.slice());
const coordinate = _ol_transform_.apply(
frameState.pixelToCoordinateTransform, pixel.slice());
var i;
let i;
for (i = numLayers - 1; i >= 0; --i) {
var layerState = layerStates[i];
var layer = layerState.layer;
const layerState = layerStates[i];
const layer = layerState.layer;
if (Layer.visibleAtResolution(layerState, viewResolution) &&
layerFilter.call(thisArg2, layer)) {
var layerRenderer = /** @type {ol.renderer.canvas.Layer} */ (this.getLayerRenderer(layer));
const layerRenderer = /** @type {ol.renderer.canvas.Layer} */ (this.getLayerRenderer(layer));
result = layerRenderer.forEachLayerAtCoordinate(
coordinate, frameState, callback, thisArg);
coordinate, frameState, callback, thisArg);
if (result) {
return result;
}
src/ol/renderer/canvas/TileLayer.js
+63 -63
View File
@@ -18,7 +18,7 @@ import _ol_transform_ from '../../transform.js';
* @param {ol.layer.Tile|ol.layer.VectorTile} tileLayer Tile layer.
* @api
*/
var CanvasTileLayerRenderer = function(tileLayer) {
const CanvasTileLayerRenderer = function(tileLayer) {
IntermediateCanvasRenderer.call(this, tileLayer);
@@ -109,8 +109,8 @@ CanvasTileLayerRenderer['create'] = function(mapRenderer, layer) {
* @return {boolean} Tile is drawable.
*/
CanvasTileLayerRenderer.prototype.isDrawableTile_ = function(tile) {
var tileState = tile.getState();
var useInterimTilesOnError = this.getLayer().getUseInterimTilesOnError();
const tileState = tile.getState();
const useInterimTilesOnError = this.getLayer().getUseInterimTilesOnError();
return tileState == TileState.LOADED ||
tileState == TileState.EMPTY ||
tileState == TileState.ERROR && !useInterimTilesOnError;
@@ -121,21 +121,21 @@ CanvasTileLayerRenderer.prototype.isDrawableTile_ = function(tile) {
*/
CanvasTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState) {
var pixelRatio = frameState.pixelRatio;
var size = frameState.size;
var viewState = frameState.viewState;
var projection = viewState.projection;
var viewResolution = viewState.resolution;
var viewCenter = viewState.center;
const pixelRatio = frameState.pixelRatio;
const size = frameState.size;
const viewState = frameState.viewState;
const projection = viewState.projection;
const viewResolution = viewState.resolution;
const viewCenter = viewState.center;
var tileLayer = this.getLayer();
var tileSource = /** @type {ol.source.Tile} */ (tileLayer.getSource());
var sourceRevision = tileSource.getRevision();
var tileGrid = tileSource.getTileGridForProjection(projection);
var z = tileGrid.getZForResolution(viewResolution, this.zDirection);
var tileResolution = tileGrid.getResolution(z);
var oversampling = Math.round(viewResolution / tileResolution) || 1;
var extent = frameState.extent;
const tileLayer = this.getLayer();
const tileSource = /** @type {ol.source.Tile} */ (tileLayer.getSource());
const sourceRevision = tileSource.getRevision();
const tileGrid = tileSource.getTileGridForProjection(projection);
const z = tileGrid.getZForResolution(viewResolution, this.zDirection);
const tileResolution = tileGrid.getResolution(z);
let oversampling = Math.round(viewResolution / tileResolution) || 1;
let extent = frameState.extent;
if (layerState.extent !== undefined) {
extent = getIntersection(extent, layerState.extent);
@@ -145,24 +145,24 @@ CanvasTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState
return false;
}
var tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
var imageExtent = tileGrid.getTileRangeExtent(z, tileRange);
const tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
const imageExtent = tileGrid.getTileRangeExtent(z, tileRange);
var tilePixelRatio = tileSource.getTilePixelRatio(pixelRatio);
const tilePixelRatio = tileSource.getTilePixelRatio(pixelRatio);
/**
* @type {Object.<number, Object.<string, ol.Tile>>}
*/
var tilesToDrawByZ = {};
const tilesToDrawByZ = {};
tilesToDrawByZ[z] = {};
var findLoadedTiles = this.createLoadedTileFinder(
tileSource, projection, tilesToDrawByZ);
const findLoadedTiles = this.createLoadedTileFinder(
tileSource, projection, tilesToDrawByZ);
var tmpExtent = this.tmpExtent;
var tmpTileRange = this.tmpTileRange_;
var newTiles = false;
var tile, x, y;
const tmpExtent = this.tmpExtent;
const tmpTileRange = this.tmpTileRange_;
let newTiles = false;
let tile, x, y;
for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
tile = tileSource.getTile(z, x, y, pixelRatio, projection);
@@ -179,10 +179,10 @@ CanvasTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState
tile = tile.getInterimTile();
}
if (this.isDrawableTile_(tile)) {
var uid = getUid(this);
const uid = getUid(this);
if (tile.getState() == TileState.LOADED) {
tilesToDrawByZ[z][tile.tileCoord.toString()] = tile;
var inTransition = tile.inTransition(uid);
const inTransition = tile.inTransition(uid);
if (!newTiles && (inTransition || this.renderedTiles.indexOf(tile) === -1)) {
newTiles = true;
}
@@ -193,23 +193,23 @@ CanvasTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState
}
}
var childTileRange = tileGrid.getTileCoordChildTileRange(
tile.tileCoord, tmpTileRange, tmpExtent);
var covered = false;
const childTileRange = tileGrid.getTileCoordChildTileRange(
tile.tileCoord, tmpTileRange, tmpExtent);
let covered = false;
if (childTileRange) {
covered = findLoadedTiles(z + 1, childTileRange);
}
if (!covered) {
tileGrid.forEachTileCoordParentTileRange(
tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent);
tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent);
}
}
}
var renderedResolution = tileResolution * pixelRatio / tilePixelRatio * oversampling;
var hints = frameState.viewHints;
var animatingOrInteracting = hints[ViewHint.ANIMATING] || hints[ViewHint.INTERACTING];
const renderedResolution = tileResolution * pixelRatio / tilePixelRatio * oversampling;
const hints = frameState.viewHints;
const animatingOrInteracting = hints[ViewHint.ANIMATING] || hints[ViewHint.INTERACTING];
if (!(this.renderedResolution && Date.now() - frameState.time > 16 && animatingOrInteracting) && (
newTiles ||
!(this.renderedExtent_ && containsExtent(this.renderedExtent_, extent)) ||
@@ -218,12 +218,12 @@ CanvasTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState
!animatingOrInteracting && renderedResolution != this.renderedResolution
)) {
var context = this.context;
const context = this.context;
if (context) {
var tilePixelSize = tileSource.getTilePixelSize(z, pixelRatio, projection);
var width = Math.round(tileRange.getWidth() * tilePixelSize[0] / oversampling);
var height = Math.round(tileRange.getHeight() * tilePixelSize[1] / oversampling);
var canvas = context.canvas;
const tilePixelSize = tileSource.getTilePixelSize(z, pixelRatio, projection);
const width = Math.round(tileRange.getWidth() * tilePixelSize[0] / oversampling);
const height = Math.round(tileRange.getHeight() * tilePixelSize[1] / oversampling);
const canvas = context.canvas;
if (canvas.width != width || canvas.height != height) {
this.oversampling_ = oversampling;
canvas.width = width;
@@ -238,7 +238,7 @@ CanvasTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState
this.renderedTiles.length = 0;
/** @type {Array.<number>} */
var zs = Object.keys(tilesToDrawByZ).map(Number);
const zs = Object.keys(tilesToDrawByZ).map(Number);
zs.sort(function(a, b) {
if (a === z) {
return 1;
@@ -248,8 +248,8 @@ CanvasTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState
return a > b ? 1 : a < b ? -1 : 0;
}
});
var currentResolution, currentScale, currentTilePixelSize, currentZ, i, ii;
var tileExtent, tileGutter, tilesToDraw, w, h;
let currentResolution, currentScale, currentTilePixelSize, currentZ, i, ii;
let tileExtent, tileGutter, tilesToDraw, w, h;
for (i = 0, ii = zs.length; i < ii; ++i) {
currentZ = zs[i];
currentTilePixelSize = tileSource.getTilePixelSize(currentZ, pixelRatio, projection);
@@ -257,7 +257,7 @@ CanvasTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState
currentScale = currentResolution / tileResolution;
tileGutter = tilePixelRatio * tileSource.getGutter(projection);
tilesToDraw = tilesToDrawByZ[currentZ];
for (var tileCoordKey in tilesToDraw) {
for (const tileCoordKey in tilesToDraw) {
tile = tilesToDraw[tileCoordKey];
tileExtent = tileGrid.getTileCoordExtent(tile.getTileCoord(), tmpExtent);
x = (tileExtent[0] - imageExtent[0]) / tileResolution * tilePixelRatio / oversampling;
@@ -274,23 +274,23 @@ CanvasTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState
this.renderedExtent_ = imageExtent;
}
var scale = this.renderedResolution / viewResolution;
var transform = _ol_transform_.compose(this.imageTransform_,
pixelRatio * size[0] / 2, pixelRatio * size[1] / 2,
scale, scale,
0,
(this.renderedExtent_[0] - viewCenter[0]) / this.renderedResolution * pixelRatio,
(viewCenter[1] - this.renderedExtent_[3]) / this.renderedResolution * pixelRatio);
const scale = this.renderedResolution / viewResolution;
const transform = _ol_transform_.compose(this.imageTransform_,
pixelRatio * size[0] / 2, pixelRatio * size[1] / 2,
scale, scale,
0,
(this.renderedExtent_[0] - viewCenter[0]) / this.renderedResolution * pixelRatio,
(viewCenter[1] - this.renderedExtent_[3]) / this.renderedResolution * pixelRatio);
_ol_transform_.compose(this.coordinateToCanvasPixelTransform,
pixelRatio * size[0] / 2 - transform[4], pixelRatio * size[1] / 2 - transform[5],
pixelRatio / viewResolution, -pixelRatio / viewResolution,
0,
-viewCenter[0], -viewCenter[1]);
pixelRatio * size[0] / 2 - transform[4], pixelRatio * size[1] / 2 - transform[5],
pixelRatio / viewResolution, -pixelRatio / viewResolution,
0,
-viewCenter[0], -viewCenter[1]);
this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
this.manageTilePyramid(frameState, tileSource, tileGrid, pixelRatio,
projection, extent, z, tileLayer.getPreload());
projection, extent, z, tileLayer.getPreload());
this.scheduleExpireCache(frameState, tileSource);
return this.renderedTiles.length > 0;
@@ -309,22 +309,22 @@ CanvasTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState
* @param {boolean} transition Apply an alpha transition.
*/
CanvasTileLayerRenderer.prototype.drawTileImage = function(tile, frameState, layerState, x, y, w, h, gutter, transition) {
var image = tile.getImage(this.getLayer());
const image = tile.getImage(this.getLayer());
if (!image) {
return;
}
var uid = getUid(this);
var alpha = transition ? tile.getAlpha(uid, frameState.time) : 1;
const uid = getUid(this);
const alpha = transition ? tile.getAlpha(uid, frameState.time) : 1;
if (alpha === 1 && !this.getLayer().getSource().getOpaque(frameState.viewState.projection)) {
this.context.clearRect(x, y, w, h);
}
var alphaChanged = alpha !== this.context.globalAlpha;
const alphaChanged = alpha !== this.context.globalAlpha;
if (alphaChanged) {
this.context.save();
this.context.globalAlpha = alpha;
}
this.context.drawImage(image, gutter, gutter,
image.width - 2 * gutter, image.height - 2 * gutter, x, y, w, h);
image.width - 2 * gutter, image.height - 2 * gutter, x, y, w, h);
if (alphaChanged) {
this.context.restore();
@@ -341,7 +341,7 @@ CanvasTileLayerRenderer.prototype.drawTileImage = function(tile, frameState, lay
* @inheritDoc
*/
CanvasTileLayerRenderer.prototype.getImage = function() {
var context = this.context;
const context = this.context;
return context ? context.canvas : null;
};
src/ol/renderer/canvas/VectorLayer.js
+88 -88
View File
@@ -22,7 +22,7 @@ import _ol_renderer_vector_ from '../vector.js';
* @param {ol.layer.Vector} vectorLayer Vector layer.
* @api
*/
var CanvasVectorLayerRenderer = function(vectorLayer) {
const CanvasVectorLayerRenderer = function(vectorLayer) {
CanvasLayerRenderer.call(this, vectorLayer);
@@ -122,42 +122,42 @@ CanvasVectorLayerRenderer.prototype.disposeInternal = function() {
*/
CanvasVectorLayerRenderer.prototype.composeFrame = function(frameState, layerState, context) {
var extent = frameState.extent;
var pixelRatio = frameState.pixelRatio;
var skippedFeatureUids = layerState.managed ?
const extent = frameState.extent;
const pixelRatio = frameState.pixelRatio;
const skippedFeatureUids = layerState.managed ?
frameState.skippedFeatureUids : {};
var viewState = frameState.viewState;
var projection = viewState.projection;
var rotation = viewState.rotation;
var projectionExtent = projection.getExtent();
var vectorSource = /** @type {ol.source.Vector} */ (this.getLayer().getSource());
const viewState = frameState.viewState;
const projection = viewState.projection;
const rotation = viewState.rotation;
const projectionExtent = projection.getExtent();
const vectorSource = /** @type {ol.source.Vector} */ (this.getLayer().getSource());
var transform = this.getTransform(frameState, 0);
let transform = this.getTransform(frameState, 0);
this.preCompose(context, frameState, transform);
// clipped rendering if layer extent is set
var clipExtent = layerState.extent;
var clipped = clipExtent !== undefined;
const clipExtent = layerState.extent;
const clipped = clipExtent !== undefined;
if (clipped) {
this.clip(context, frameState, /** @type {ol.Extent} */ (clipExtent));
}
var replayGroup = this.replayGroup_;
const replayGroup = this.replayGroup_;
if (replayGroup && !replayGroup.isEmpty()) {
if (this.declutterTree_) {
this.declutterTree_.clear();
}
var layer = /** @type {ol.layer.Vector} */ (this.getLayer());
var drawOffsetX = 0;
var drawOffsetY = 0;
var replayContext;
var transparentLayer = layerState.opacity !== 1;
var hasRenderListeners = layer.hasListener(RenderEventType.RENDER);
const layer = /** @type {ol.layer.Vector} */ (this.getLayer());
let drawOffsetX = 0;
let drawOffsetY = 0;
let replayContext;
const transparentLayer = layerState.opacity !== 1;
const hasRenderListeners = layer.hasListener(RenderEventType.RENDER);
if (transparentLayer || hasRenderListeners) {
var drawWidth = context.canvas.width;
var drawHeight = context.canvas.height;
let drawWidth = context.canvas.width;
let drawHeight = context.canvas.height;
if (rotation) {
var drawSize = Math.round(Math.sqrt(drawWidth * drawWidth + drawHeight * drawHeight));
const drawSize = Math.round(Math.sqrt(drawWidth * drawWidth + drawHeight * drawHeight));
drawOffsetX = (drawSize - drawWidth) / 2;
drawOffsetY = (drawSize - drawHeight) / 2;
drawWidth = drawHeight = drawSize;
@@ -170,7 +170,7 @@ CanvasVectorLayerRenderer.prototype.composeFrame = function(frameState, layerSta
replayContext = context;
}
var alpha = replayContext.globalAlpha;
const alpha = replayContext.globalAlpha;
if (!transparentLayer) {
// for performance reasons, context.save / context.restore is not used
// to save and restore the transformation matrix and the opacity.
@@ -182,17 +182,17 @@ CanvasVectorLayerRenderer.prototype.composeFrame = function(frameState, layerSta
replayContext.translate(drawOffsetX, drawOffsetY);
}
var width = frameState.size[0] * pixelRatio;
var height = frameState.size[1] * pixelRatio;
const width = frameState.size[0] * pixelRatio;
const height = frameState.size[1] * pixelRatio;
_ol_render_canvas_.rotateAtOffset(replayContext, -rotation,
width / 2, height / 2);
width / 2, height / 2);
replayGroup.replay(replayContext, transform, rotation, skippedFeatureUids);
if (vectorSource.getWrapX() && projection.canWrapX() &&
!containsExtent(projectionExtent, extent)) {
var startX = extent[0];
var worldWidth = getWidth(projectionExtent);
var world = 0;
var offsetX;
let startX = extent[0];
const worldWidth = getWidth(projectionExtent);
let world = 0;
let offsetX;
while (startX < projectionExtent[0]) {
--world;
offsetX = worldWidth * world;
@@ -213,14 +213,14 @@ CanvasVectorLayerRenderer.prototype.composeFrame = function(frameState, layerSta
transform = this.getTransform(frameState, 0);
}
_ol_render_canvas_.rotateAtOffset(replayContext, rotation,
width / 2, height / 2);
width / 2, height / 2);
if (replayContext != context) {
if (hasRenderListeners) {
this.dispatchRenderEvent(replayContext, frameState, transform);
}
if (transparentLayer) {
var mainContextAlpha = context.globalAlpha;
const mainContextAlpha = context.globalAlpha;
context.globalAlpha = layerState.opacity;
context.drawImage(replayContext.canvas, -drawOffsetX, -drawOffsetY);
context.globalAlpha = mainContextAlpha;
@@ -250,24 +250,24 @@ CanvasVectorLayerRenderer.prototype.forEachFeatureAtCoordinate = function(coordi
if (!this.replayGroup_) {
return undefined;
} else {
var resolution = frameState.viewState.resolution;
var rotation = frameState.viewState.rotation;
var layer = /** @type {ol.layer.Vector} */ (this.getLayer());
const resolution = frameState.viewState.resolution;
const rotation = frameState.viewState.rotation;
const layer = /** @type {ol.layer.Vector} */ (this.getLayer());
/** @type {Object.<string, boolean>} */
var features = {};
var result = this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution,
rotation, hitTolerance, {},
/**
const features = {};
const result = this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution,
rotation, hitTolerance, {},
/**
* @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
var key = getUid(feature).toString();
if (!(key in features)) {
features[key] = true;
return callback.call(thisArg, feature, layer);
}
}, null);
function(feature) {
const key = getUid(feature).toString();
if (!(key in features)) {
features[key] = true;
return callback.call(thisArg, feature, layer);
}
}, null);
return result;
}
};
@@ -277,7 +277,7 @@ CanvasVectorLayerRenderer.prototype.forEachFeatureAtCoordinate = function(coordi
* @param {ol.events.Event} event Event.
*/
CanvasVectorLayerRenderer.prototype.handleFontsChanged_ = function(event) {
var layer = this.getLayer();
const layer = this.getLayer();
if (layer.getVisible() && this.replayGroup_) {
layer.changed();
}
@@ -298,35 +298,35 @@ CanvasVectorLayerRenderer.prototype.handleStyleImageChange_ = function(event) {
* @inheritDoc
*/
CanvasVectorLayerRenderer.prototype.prepareFrame = function(frameState, layerState) {
var vectorLayer = /** @type {ol.layer.Vector} */ (this.getLayer());
var vectorSource = vectorLayer.getSource();
const vectorLayer = /** @type {ol.layer.Vector} */ (this.getLayer());
const vectorSource = vectorLayer.getSource();
var animating = frameState.viewHints[ViewHint.ANIMATING];
var interacting = frameState.viewHints[ViewHint.INTERACTING];
var updateWhileAnimating = vectorLayer.getUpdateWhileAnimating();
var updateWhileInteracting = vectorLayer.getUpdateWhileInteracting();
const animating = frameState.viewHints[ViewHint.ANIMATING];
const interacting = frameState.viewHints[ViewHint.INTERACTING];
const updateWhileAnimating = vectorLayer.getUpdateWhileAnimating();
const updateWhileInteracting = vectorLayer.getUpdateWhileInteracting();
if (!this.dirty_ && (!updateWhileAnimating && animating) ||
(!updateWhileInteracting && interacting)) {
return true;
}
var frameStateExtent = frameState.extent;
var viewState = frameState.viewState;
var projection = viewState.projection;
var resolution = viewState.resolution;
var pixelRatio = frameState.pixelRatio;
var vectorLayerRevision = vectorLayer.getRevision();
var vectorLayerRenderBuffer = vectorLayer.getRenderBuffer();
var vectorLayerRenderOrder = vectorLayer.getRenderOrder();
const frameStateExtent = frameState.extent;
const viewState = frameState.viewState;
const projection = viewState.projection;
const resolution = viewState.resolution;
const pixelRatio = frameState.pixelRatio;
const vectorLayerRevision = vectorLayer.getRevision();
const vectorLayerRenderBuffer = vectorLayer.getRenderBuffer();
let vectorLayerRenderOrder = vectorLayer.getRenderOrder();
if (vectorLayerRenderOrder === undefined) {
vectorLayerRenderOrder = _ol_renderer_vector_.defaultOrder;
}
var extent = buffer(frameStateExtent,
vectorLayerRenderBuffer * resolution);
var projectionExtent = viewState.projection.getExtent();
const extent = buffer(frameStateExtent,
vectorLayerRenderBuffer * resolution);
const projectionExtent = viewState.projection.getExtent();
if (vectorSource.getWrapX() && viewState.projection.canWrapX() &&
!containsExtent(projectionExtent, frameState.extent)) {
@@ -335,8 +335,8 @@ CanvasVectorLayerRenderer.prototype.prepareFrame = function(frameState, layerSta
// to +540°, we add at least 1 world width on each side of the projection
// extent. If the viewport is wider than the world, we need to add half of
// the viewport width to make sure we cover the whole viewport.
var worldWidth = getWidth(projectionExtent);
var gutter = Math.max(getWidth(extent) / 2, worldWidth);
const worldWidth = getWidth(projectionExtent);
const gutter = Math.max(getWidth(extent) / 2, worldWidth);
extent[0] = projectionExtent[0] - gutter;
extent[2] = projectionExtent[2] + gutter;
}
@@ -354,17 +354,17 @@ CanvasVectorLayerRenderer.prototype.prepareFrame = function(frameState, layerSta
this.dirty_ = false;
var replayGroup = new _ol_render_canvas_ReplayGroup_(
_ol_renderer_vector_.getTolerance(resolution, pixelRatio), extent, resolution,
pixelRatio, vectorSource.getOverlaps(), this.declutterTree_, vectorLayer.getRenderBuffer());
const replayGroup = new _ol_render_canvas_ReplayGroup_(
_ol_renderer_vector_.getTolerance(resolution, pixelRatio), extent, resolution,
pixelRatio, vectorSource.getOverlaps(), this.declutterTree_, vectorLayer.getRenderBuffer());
vectorSource.loadFeatures(extent, resolution, projection);
/**
* @param {ol.Feature} feature Feature.
* @this {ol.renderer.canvas.VectorLayer}
*/
var renderFeature = function(feature) {
var styles;
var styleFunction = feature.getStyleFunction();
const renderFeature = function(feature) {
let styles;
let styleFunction = feature.getStyleFunction();
if (styleFunction) {
styles = styleFunction.call(feature, resolution);
} else {
@@ -374,23 +374,23 @@ CanvasVectorLayerRenderer.prototype.prepareFrame = function(frameState, layerSta
}
}
if (styles) {
var dirty = this.renderFeature(
feature, resolution, pixelRatio, styles, replayGroup);
const dirty = this.renderFeature(
feature, resolution, pixelRatio, styles, replayGroup);
this.dirty_ = this.dirty_ || dirty;
}
}.bind(this);
if (vectorLayerRenderOrder) {
/** @type {Array.<ol.Feature>} */
var features = [];
const features = [];
vectorSource.forEachFeatureInExtent(extent,
/**
/**
* @param {ol.Feature} feature Feature.
*/
function(feature) {
features.push(feature);
}, this);
function(feature) {
features.push(feature);
}, this);
features.sort(vectorLayerRenderOrder);
for (var i = 0, ii = features.length; i < ii; ++i) {
for (let i = 0, ii = features.length; i < ii; ++i) {
renderFeature(features[i]);
}
} else {
@@ -422,19 +422,19 @@ CanvasVectorLayerRenderer.prototype.renderFeature = function(feature, resolution
if (!styles) {
return false;
}
var loading = false;
let loading = false;
if (Array.isArray(styles)) {
for (var i = 0, ii = styles.length; i < ii; ++i) {
for (let i = 0, ii = styles.length; i < ii; ++i) {
loading = _ol_renderer_vector_.renderFeature(
replayGroup, feature, styles[i],
_ol_renderer_vector_.getSquaredTolerance(resolution, pixelRatio),
this.handleStyleImageChange_, this) || loading;
replayGroup, feature, styles[i],
_ol_renderer_vector_.getSquaredTolerance(resolution, pixelRatio),
this.handleStyleImageChange_, this) || loading;
}
} else {
loading = _ol_renderer_vector_.renderFeature(
replayGroup, feature, styles,
_ol_renderer_vector_.getSquaredTolerance(resolution, pixelRatio),
this.handleStyleImageChange_, this);
replayGroup, feature, styles,
_ol_renderer_vector_.getSquaredTolerance(resolution, pixelRatio),
this.handleStyleImageChange_, this);
}
return loading;
};
src/ol/renderer/canvas/VectorTileLayer.js
+132 -133
View File
@@ -27,7 +27,7 @@ import _ol_transform_ from '../../transform.js';
* @param {ol.layer.VectorTile} layer VectorTile layer.
* @api
*/
var CanvasVectorTileLayerRenderer = function(layer) {
const CanvasVectorTileLayerRenderer = function(layer) {
/**
* @type {CanvasRenderingContext2D}
@@ -128,11 +128,11 @@ CanvasVectorTileLayerRenderer.prototype.disposeInternal = function() {
* @inheritDoc
*/
CanvasVectorTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState) {
var layer = this.getLayer();
var layerRevision = layer.getRevision();
const layer = this.getLayer();
const layerRevision = layer.getRevision();
if (this.renderedLayerRevision_ != layerRevision) {
this.renderedTiles.length = 0;
var renderMode = layer.getRenderMode();
const renderMode = layer.getRenderMode();
if (!this.context && renderMode != _ol_layer_VectorTileRenderType_.VECTOR) {
this.context = createCanvasContext2D();
}
@@ -151,57 +151,57 @@ CanvasVectorTileLayerRenderer.prototype.prepareFrame = function(frameState, laye
* @private
*/
CanvasVectorTileLayerRenderer.prototype.createReplayGroup_ = function(
tile, frameState) {
var layer = this.getLayer();
var pixelRatio = frameState.pixelRatio;
var projection = frameState.viewState.projection;
var revision = layer.getRevision();
var renderOrder = /** @type {ol.RenderOrderFunction} */
tile, frameState) {
const layer = this.getLayer();
const pixelRatio = frameState.pixelRatio;
const projection = frameState.viewState.projection;
const revision = layer.getRevision();
const renderOrder = /** @type {ol.RenderOrderFunction} */
(layer.getRenderOrder()) || null;
var replayState = tile.getReplayState(layer);
const replayState = tile.getReplayState(layer);
if (!replayState.dirty && replayState.renderedRevision == revision &&
replayState.renderedRenderOrder == renderOrder) {
return;
}
var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
var sourceTileGrid = source.getTileGrid();
var tileGrid = source.getTileGridForProjection(projection);
var resolution = tileGrid.getResolution(tile.tileCoord[0]);
var tileExtent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
const source = /** @type {ol.source.VectorTile} */ (layer.getSource());
const sourceTileGrid = source.getTileGrid();
const tileGrid = source.getTileGridForProjection(projection);
const resolution = tileGrid.getResolution(tile.tileCoord[0]);
const tileExtent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
var zIndexKeys = {};
for (var t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
var sourceTile = tile.getTile(tile.tileKeys[t]);
const zIndexKeys = {};
for (let t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
const sourceTile = tile.getTile(tile.tileKeys[t]);
if (sourceTile.getState() == TileState.ERROR) {
continue;
}
var sourceTileCoord = sourceTile.tileCoord;
var sourceTileExtent = sourceTileGrid.getTileCoordExtent(sourceTileCoord);
var sharedExtent = getIntersection(tileExtent, sourceTileExtent);
var bufferedExtent = equals(sourceTileExtent, sharedExtent) ? null :
const sourceTileCoord = sourceTile.tileCoord;
const sourceTileExtent = sourceTileGrid.getTileCoordExtent(sourceTileCoord);
const sharedExtent = getIntersection(tileExtent, sourceTileExtent);
const bufferedExtent = equals(sourceTileExtent, sharedExtent) ? null :
buffer(sharedExtent, layer.getRenderBuffer() * resolution);
var tileProjection = sourceTile.getProjection();
var reproject = false;
const tileProjection = sourceTile.getProjection();
let reproject = false;
if (!equivalentProjection(projection, tileProjection)) {
reproject = true;
sourceTile.setProjection(projection);
}
replayState.dirty = false;
var replayGroup = new _ol_render_canvas_ReplayGroup_(0, sharedExtent, resolution,
pixelRatio, source.getOverlaps(), this.declutterTree_, layer.getRenderBuffer());
var squaredTolerance = _ol_renderer_vector_.getSquaredTolerance(
resolution, pixelRatio);
const replayGroup = new _ol_render_canvas_ReplayGroup_(0, sharedExtent, resolution,
pixelRatio, source.getOverlaps(), this.declutterTree_, layer.getRenderBuffer());
const squaredTolerance = _ol_renderer_vector_.getSquaredTolerance(
resolution, pixelRatio);
/**
* @param {ol.Feature|ol.render.Feature} feature Feature.
* @this {ol.renderer.canvas.VectorTileLayer}
*/
var renderFeature = function(feature) {
var styles;
var styleFunction = feature.getStyleFunction();
const renderFeature = function(feature) {
let styles;
let styleFunction = feature.getStyleFunction();
if (styleFunction) {
styles = styleFunction.call(/** @type {ol.Feature} */ (feature), resolution);
} else {
@@ -211,20 +211,19 @@ CanvasVectorTileLayerRenderer.prototype.createReplayGroup_ = function(
}
}
if (styles) {
var dirty = this.renderFeature(feature, squaredTolerance, styles,
replayGroup);
const dirty = this.renderFeature(feature, squaredTolerance, styles,
replayGroup);
this.dirty_ = this.dirty_ || dirty;
replayState.dirty = replayState.dirty || dirty;
}
};
var features = sourceTile.getFeatures();
const features = sourceTile.getFeatures();
if (renderOrder && renderOrder !== replayState.renderedRenderOrder) {
features.sort(renderOrder);
}
var feature;
for (var i = 0, ii = features.length; i < ii; ++i) {
feature = features[i];
for (let i = 0, ii = features.length; i < ii; ++i) {
const feature = features[i];
if (reproject) {
if (tileProjection.getUnits() == Units.TILE_PIXELS) {
// projected tile extent
@@ -239,7 +238,7 @@ CanvasVectorTileLayerRenderer.prototype.createReplayGroup_ = function(
}
}
replayGroup.finish();
for (var r in replayGroup.getReplays()) {
for (const r in replayGroup.getReplays()) {
zIndexKeys[r] = true;
}
sourceTile.setReplayGroup(layer, tile.tileCoord.toString(), replayGroup);
@@ -253,8 +252,8 @@ CanvasVectorTileLayerRenderer.prototype.createReplayGroup_ = function(
* @inheritDoc
*/
CanvasVectorTileLayerRenderer.prototype.drawTileImage = function(
tile, frameState, layerState, x, y, w, h, gutter, transition) {
var vectorImageTile = /** @type {ol.VectorImageTile} */ (tile);
tile, frameState, layerState, x, y, w, h, gutter, transition) {
const vectorImageTile = /** @type {ol.VectorImageTile} */ (tile);
this.createReplayGroup_(vectorImageTile, frameState);
if (this.context) {
this.renderTileImage_(vectorImageTile, frameState, layerState);
@@ -267,21 +266,21 @@ CanvasVectorTileLayerRenderer.prototype.drawTileImage = function(
* @inheritDoc
*/
CanvasVectorTileLayerRenderer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg) {
var resolution = frameState.viewState.resolution;
var rotation = frameState.viewState.rotation;
const resolution = frameState.viewState.resolution;
const rotation = frameState.viewState.rotation;
hitTolerance = hitTolerance == undefined ? 0 : hitTolerance;
var layer = this.getLayer();
const layer = this.getLayer();
/** @type {Object.<string, boolean>} */
var features = {};
const features = {};
/** @type {Array.<ol.VectorImageTile>} */
var renderedTiles = this.renderedTiles;
const renderedTiles = this.renderedTiles;
var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
var tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
var bufferedExtent, found;
var i, ii, replayGroup;
var tile, tileCoord, tileExtent;
const source = /** @type {ol.source.VectorTile} */ (layer.getSource());
const tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
let bufferedExtent, found;
let i, ii, replayGroup;
let tile, tileCoord, tileExtent;
for (i = 0, ii = renderedTiles.length; i < ii; ++i) {
tile = renderedTiles[i];
tileCoord = tile.wrappedTileCoord;
@@ -290,25 +289,25 @@ CanvasVectorTileLayerRenderer.prototype.forEachFeatureAtCoordinate = function(co
if (!containsCoordinate(bufferedExtent, coordinate)) {
continue;
}
for (var t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
var sourceTile = tile.getTile(tile.tileKeys[t]);
for (let t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
const sourceTile = tile.getTile(tile.tileKeys[t]);
if (sourceTile.getState() == TileState.ERROR) {
continue;
}
replayGroup = sourceTile.getReplayGroup(layer, tile.tileCoord.toString());
found = found || replayGroup.forEachFeatureAtCoordinate(
coordinate, resolution, rotation, hitTolerance, {},
/**
coordinate, resolution, rotation, hitTolerance, {},
/**
* @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
var key = getUid(feature).toString();
if (!(key in features)) {
features[key] = true;
return callback.call(thisArg, feature, layer);
}
}, null);
function(feature) {
const key = getUid(feature).toString();
if (!(key in features)) {
features[key] = true;
return callback.call(thisArg, feature, layer);
}
}, null);
}
}
return found;
@@ -322,26 +321,26 @@ CanvasVectorTileLayerRenderer.prototype.forEachFeatureAtCoordinate = function(co
* @private
*/
CanvasVectorTileLayerRenderer.prototype.getReplayTransform_ = function(tile, frameState) {
var layer = this.getLayer();
var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
var tileGrid = source.getTileGrid();
var tileCoord = tile.tileCoord;
var tileResolution = tileGrid.getResolution(tileCoord[0]);
var viewState = frameState.viewState;
var pixelRatio = frameState.pixelRatio;
var renderResolution = viewState.resolution / pixelRatio;
var tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
var center = viewState.center;
var origin = getTopLeft(tileExtent);
var size = frameState.size;
var offsetX = Math.round(pixelRatio * size[0] / 2);
var offsetY = Math.round(pixelRatio * size[1] / 2);
const layer = this.getLayer();
const source = /** @type {ol.source.VectorTile} */ (layer.getSource());
const tileGrid = source.getTileGrid();
const tileCoord = tile.tileCoord;
const tileResolution = tileGrid.getResolution(tileCoord[0]);
const viewState = frameState.viewState;
const pixelRatio = frameState.pixelRatio;
const renderResolution = viewState.resolution / pixelRatio;
const tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
const center = viewState.center;
const origin = getTopLeft(tileExtent);
const size = frameState.size;
const offsetX = Math.round(pixelRatio * size[0] / 2);
const offsetY = Math.round(pixelRatio * size[1] / 2);
return _ol_transform_.compose(this.tmpTransform_,
offsetX, offsetY,
tileResolution / renderResolution, tileResolution / renderResolution,
viewState.rotation,
(origin[0] - center[0]) / tileResolution,
(center[1] - origin[1]) / tileResolution);
offsetX, offsetY,
tileResolution / renderResolution, tileResolution / renderResolution,
viewState.rotation,
(origin[0] - center[0]) / tileResolution,
(center[1] - origin[1]) / tileResolution);
};
@@ -349,7 +348,7 @@ CanvasVectorTileLayerRenderer.prototype.getReplayTransform_ = function(tile, fra
* @param {ol.events.Event} event Event.
*/
CanvasVectorTileLayerRenderer.prototype.handleFontsChanged_ = function(event) {
var layer = this.getLayer();
const layer = this.getLayer();
if (layer.getVisible() && this.renderedLayerRevision_ !== undefined) {
layer.changed();
}
@@ -370,15 +369,15 @@ CanvasVectorTileLayerRenderer.prototype.handleStyleImageChange_ = function(event
* @inheritDoc
*/
CanvasVectorTileLayerRenderer.prototype.postCompose = function(context, frameState, layerState) {
var layer = this.getLayer();
var declutterReplays = layer.getDeclutter() ? {} : null;
var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
var renderMode = layer.getRenderMode();
var replayTypes = CanvasVectorTileLayerRenderer.VECTOR_REPLAYS[renderMode];
var pixelRatio = frameState.pixelRatio;
var rotation = frameState.viewState.rotation;
var size = frameState.size;
var offsetX, offsetY;
const layer = this.getLayer();
const declutterReplays = layer.getDeclutter() ? {} : null;
const source = /** @type {ol.source.VectorTile} */ (layer.getSource());
const renderMode = layer.getRenderMode();
const replayTypes = CanvasVectorTileLayerRenderer.VECTOR_REPLAYS[renderMode];
const pixelRatio = frameState.pixelRatio;
const rotation = frameState.viewState.rotation;
const size = frameState.size;
let offsetX, offsetY;
if (rotation) {
offsetX = Math.round(pixelRatio * size[0] / 2);
offsetY = Math.round(pixelRatio * size[1] / 2);
@@ -387,39 +386,39 @@ CanvasVectorTileLayerRenderer.prototype.postCompose = function(context, frameSta
if (declutterReplays) {
this.declutterTree_.clear();
}
var tiles = this.renderedTiles;
var tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
var clips = [];
var zs = [];
for (var i = tiles.length - 1; i >= 0; --i) {
var tile = /** @type {ol.VectorImageTile} */ (tiles[i]);
const tiles = this.renderedTiles;
const tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
const clips = [];
const zs = [];
for (let i = tiles.length - 1; i >= 0; --i) {
const tile = /** @type {ol.VectorImageTile} */ (tiles[i]);
if (tile.getState() == TileState.ABORT) {
continue;
}
var tileCoord = tile.tileCoord;
var worldOffset = tileGrid.getTileCoordExtent(tileCoord)[0] -
const tileCoord = tile.tileCoord;
const worldOffset = tileGrid.getTileCoordExtent(tileCoord)[0] -
tileGrid.getTileCoordExtent(tile.wrappedTileCoord)[0];
var transform = undefined;
for (var t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
var sourceTile = tile.getTile(tile.tileKeys[t]);
let transform = undefined;
for (let t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
const sourceTile = tile.getTile(tile.tileKeys[t]);
if (sourceTile.getState() == TileState.ERROR) {
continue;
}
var replayGroup = sourceTile.getReplayGroup(layer, tileCoord.toString());
const replayGroup = sourceTile.getReplayGroup(layer, tileCoord.toString());
if (renderMode != _ol_layer_VectorTileRenderType_.VECTOR && !replayGroup.hasReplays(replayTypes)) {
continue;
}
if (!transform) {
transform = this.getTransform(frameState, worldOffset);
}
var currentZ = sourceTile.tileCoord[0];
var currentClip = replayGroup.getClipCoords(transform);
const currentZ = sourceTile.tileCoord[0];
const currentClip = replayGroup.getClipCoords(transform);
context.save();
context.globalAlpha = layerState.opacity;
// Create a clip mask for regions in this low resolution tile that are
// already filled by a higher resolution tile
for (var j = 0, jj = clips.length; j < jj; ++j) {
var clip = clips[j];
for (let j = 0, jj = clips.length; j < jj; ++j) {
const clip = clips[j];
if (currentZ < zs[j]) {
context.beginPath();
// counter-clockwise (outer ring) for current tile
@@ -446,7 +445,7 @@ CanvasVectorTileLayerRenderer.prototype.postCompose = function(context, frameSta
}
if (rotation) {
_ol_render_canvas_.rotateAtOffset(context, rotation,
/** @type {number} */ (offsetX), /** @type {number} */ (offsetY));
/** @type {number} */ (offsetX), /** @type {number} */ (offsetY));
}
CanvasTileLayerRenderer.prototype.postCompose.apply(this, arguments);
};
@@ -464,17 +463,17 @@ CanvasVectorTileLayerRenderer.prototype.renderFeature = function(feature, square
if (!styles) {
return false;
}
var loading = false;
let loading = false;
if (Array.isArray(styles)) {
for (var i = 0, ii = styles.length; i < ii; ++i) {
for (let i = 0, ii = styles.length; i < ii; ++i) {
loading = _ol_renderer_vector_.renderFeature(
replayGroup, feature, styles[i], squaredTolerance,
this.handleStyleImageChange_, this) || loading;
replayGroup, feature, styles[i], squaredTolerance,
this.handleStyleImageChange_, this) || loading;
}
} else {
loading = _ol_renderer_vector_.renderFeature(
replayGroup, feature, styles, squaredTolerance,
this.handleStyleImageChange_, this);
replayGroup, feature, styles, squaredTolerance,
this.handleStyleImageChange_, this);
}
return loading;
};
@@ -487,34 +486,34 @@ CanvasVectorTileLayerRenderer.prototype.renderFeature = function(feature, square
* @private
*/
CanvasVectorTileLayerRenderer.prototype.renderTileImage_ = function(
tile, frameState, layerState) {
var layer = this.getLayer();
var replayState = tile.getReplayState(layer);
var revision = layer.getRevision();
var replays = CanvasVectorTileLayerRenderer.IMAGE_REPLAYS[layer.getRenderMode()];
tile, frameState, layerState) {
const layer = this.getLayer();
const replayState = tile.getReplayState(layer);
const revision = layer.getRevision();
const replays = CanvasVectorTileLayerRenderer.IMAGE_REPLAYS[layer.getRenderMode()];
if (replays && replayState.renderedTileRevision !== revision) {
replayState.renderedTileRevision = revision;
var tileCoord = tile.wrappedTileCoord;
var z = tileCoord[0];
var pixelRatio = frameState.pixelRatio;
var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
var tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
var resolution = tileGrid.getResolution(z);
var context = tile.getContext(layer);
var size = source.getTilePixelSize(z, pixelRatio, frameState.viewState.projection);
const tileCoord = tile.wrappedTileCoord;
const z = tileCoord[0];
const pixelRatio = frameState.pixelRatio;
const source = /** @type {ol.source.VectorTile} */ (layer.getSource());
const tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
const resolution = tileGrid.getResolution(z);
const context = tile.getContext(layer);
const size = source.getTilePixelSize(z, pixelRatio, frameState.viewState.projection);
context.canvas.width = size[0];
context.canvas.height = size[1];
var tileExtent = tileGrid.getTileCoordExtent(tileCoord);
for (var i = 0, ii = tile.tileKeys.length; i < ii; ++i) {
var sourceTile = tile.getTile(tile.tileKeys[i]);
const tileExtent = tileGrid.getTileCoordExtent(tileCoord);
for (let i = 0, ii = tile.tileKeys.length; i < ii; ++i) {
const sourceTile = tile.getTile(tile.tileKeys[i]);
if (sourceTile.getState() == TileState.ERROR) {
continue;
}
var pixelScale = pixelRatio / resolution;
var transform = _ol_transform_.reset(this.tmpTransform_);
const pixelScale = pixelRatio / resolution;
const transform = _ol_transform_.reset(this.tmpTransform_);
_ol_transform_.scale(transform, pixelScale, -pixelScale);
_ol_transform_.translate(transform, -tileExtent[0], -tileExtent[3]);
var replayGroup = sourceTile.getReplayGroup(layer, tile.tileCoord.toString());
const replayGroup = sourceTile.getReplayGroup(layer, tile.tileCoord.toString());
replayGroup.replay(context, transform, 0, {}, replays);
}
}
src/ol/renderer/vector.js
+50 -51
View File
@@ -5,13 +5,13 @@ import {getUid} from '../index.js';
import ImageState from '../ImageState.js';
import GeometryType from '../geom/GeometryType.js';
import ReplayType from '../render/ReplayType.js';
var _ol_renderer_vector_ = {};
const _ol_renderer_vector_ = {};
/**
* @type {number} Tolerance for geometry simplification in device pixels.
*/
var SIMPLIFY_TOLERANCE = 0.5;
const SIMPLIFY_TOLERANCE = 0.5;
/**
@@ -30,7 +30,7 @@ _ol_renderer_vector_.defaultOrder = function(feature1, feature2) {
* @return {number} Squared pixel tolerance.
*/
_ol_renderer_vector_.getSquaredTolerance = function(resolution, pixelRatio) {
var tolerance = _ol_renderer_vector_.getTolerance(resolution, pixelRatio);
const tolerance = _ol_renderer_vector_.getTolerance(resolution, pixelRatio);
return tolerance * tolerance;
};
@@ -53,16 +53,16 @@ _ol_renderer_vector_.getTolerance = function(resolution, pixelRatio) {
* @private
*/
_ol_renderer_vector_.renderCircleGeometry_ = function(replayGroup, geometry, style, feature) {
var fillStyle = style.getFill();
var strokeStyle = style.getStroke();
const fillStyle = style.getFill();
const strokeStyle = style.getStroke();
if (fillStyle || strokeStyle) {
var circleReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.CIRCLE);
const circleReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.CIRCLE);
circleReplay.setFillStrokeStyle(fillStyle, strokeStyle);
circleReplay.drawCircle(geometry, feature);
}
var textStyle = style.getText();
const textStyle = style.getText();
if (textStyle) {
var textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
const textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
textReplay.setTextStyle(textStyle, replayGroup.addDeclutter(false));
textReplay.drawText(geometry, feature);
}
@@ -80,12 +80,11 @@ _ol_renderer_vector_.renderCircleGeometry_ = function(replayGroup, geometry, sty
* @template T
*/
_ol_renderer_vector_.renderFeature = function(
replayGroup, feature, style, squaredTolerance, listener, thisArg) {
var loading = false;
var imageStyle, imageState;
imageStyle = style.getImage();
replayGroup, feature, style, squaredTolerance, listener, thisArg) {
let loading = false;
const imageStyle = style.getImage();
if (imageStyle) {
imageState = imageStyle.getImageState();
let imageState = imageStyle.getImageState();
if (imageState == ImageState.LOADED || imageState == ImageState.ERROR) {
imageStyle.unlistenImageChange(listener, thisArg);
} else {
@@ -98,7 +97,7 @@ _ol_renderer_vector_.renderFeature = function(
}
}
_ol_renderer_vector_.renderFeature_(replayGroup, feature, style,
squaredTolerance);
squaredTolerance);
return loading;
};
@@ -112,17 +111,17 @@ _ol_renderer_vector_.renderFeature = function(
* @private
*/
_ol_renderer_vector_.renderFeature_ = function(
replayGroup, feature, style, squaredTolerance) {
var geometry = style.getGeometryFunction()(feature);
replayGroup, feature, style, squaredTolerance) {
const geometry = style.getGeometryFunction()(feature);
if (!geometry) {
return;
}
var simplifiedGeometry = geometry.getSimplifiedGeometry(squaredTolerance);
var renderer = style.getRenderer();
const simplifiedGeometry = geometry.getSimplifiedGeometry(squaredTolerance);
const renderer = style.getRenderer();
if (renderer) {
_ol_renderer_vector_.renderGeometry_(replayGroup, simplifiedGeometry, style, feature);
} else {
var geometryRenderer =
const geometryRenderer =
_ol_renderer_vector_.GEOMETRY_RENDERERS_[simplifiedGeometry.getType()];
geometryRenderer(replayGroup, simplifiedGeometry, style, feature);
}
@@ -138,13 +137,13 @@ _ol_renderer_vector_.renderFeature_ = function(
*/
_ol_renderer_vector_.renderGeometry_ = function(replayGroup, geometry, style, feature) {
if (geometry.getType() == GeometryType.GEOMETRY_COLLECTION) {
var geometries = /** @type {ol.geom.GeometryCollection} */ (geometry).getGeometries();
for (var i = 0, ii = geometries.length; i < ii; ++i) {
const geometries = /** @type {ol.geom.GeometryCollection} */ (geometry).getGeometries();
for (let i = 0, ii = geometries.length; i < ii; ++i) {
_ol_renderer_vector_.renderGeometry_(replayGroup, geometries[i], style, feature);
}
return;
}
var replay = replayGroup.getReplay(style.getZIndex(), ReplayType.DEFAULT);
const replay = replayGroup.getReplay(style.getZIndex(), ReplayType.DEFAULT);
replay.drawCustom(/** @type {ol.geom.SimpleGeometry} */ (geometry), feature, style.getRenderer());
};
@@ -157,10 +156,10 @@ _ol_renderer_vector_.renderGeometry_ = function(replayGroup, geometry, style, fe
* @private
*/
_ol_renderer_vector_.renderGeometryCollectionGeometry_ = function(replayGroup, geometry, style, feature) {
var geometries = geometry.getGeometriesArray();
var i, ii;
const geometries = geometry.getGeometriesArray();
let i, ii;
for (i = 0, ii = geometries.length; i < ii; ++i) {
var geometryRenderer =
const geometryRenderer =
_ol_renderer_vector_.GEOMETRY_RENDERERS_[geometries[i].getType()];
geometryRenderer(replayGroup, geometries[i], style, feature);
}
@@ -175,15 +174,15 @@ _ol_renderer_vector_.renderGeometryCollectionGeometry_ = function(replayGroup, g
* @private
*/
_ol_renderer_vector_.renderLineStringGeometry_ = function(replayGroup, geometry, style, feature) {
var strokeStyle = style.getStroke();
const strokeStyle = style.getStroke();
if (strokeStyle) {
var lineStringReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.LINE_STRING);
const lineStringReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.LINE_STRING);
lineStringReplay.setFillStrokeStyle(null, strokeStyle);
lineStringReplay.drawLineString(geometry, feature);
}
var textStyle = style.getText();
const textStyle = style.getText();
if (textStyle) {
var textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
const textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
textReplay.setTextStyle(textStyle, replayGroup.addDeclutter(false));
textReplay.drawText(geometry, feature);
}
@@ -198,15 +197,15 @@ _ol_renderer_vector_.renderLineStringGeometry_ = function(replayGroup, geometry,
* @private
*/
_ol_renderer_vector_.renderMultiLineStringGeometry_ = function(replayGroup, geometry, style, feature) {
var strokeStyle = style.getStroke();
const strokeStyle = style.getStroke();
if (strokeStyle) {
var lineStringReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.LINE_STRING);
const lineStringReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.LINE_STRING);
lineStringReplay.setFillStrokeStyle(null, strokeStyle);
lineStringReplay.drawMultiLineString(geometry, feature);
}
var textStyle = style.getText();
const textStyle = style.getText();
if (textStyle) {
var textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
const textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
textReplay.setTextStyle(textStyle, replayGroup.addDeclutter(false));
textReplay.drawText(geometry, feature);
}
@@ -221,16 +220,16 @@ _ol_renderer_vector_.renderMultiLineStringGeometry_ = function(replayGroup, geom
* @private
*/
_ol_renderer_vector_.renderMultiPolygonGeometry_ = function(replayGroup, geometry, style, feature) {
var fillStyle = style.getFill();
var strokeStyle = style.getStroke();
const fillStyle = style.getFill();
const strokeStyle = style.getStroke();
if (strokeStyle || fillStyle) {
var polygonReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.POLYGON);
const polygonReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.POLYGON);
polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
polygonReplay.drawMultiPolygon(geometry, feature);
}
var textStyle = style.getText();
const textStyle = style.getText();
if (textStyle) {
var textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
const textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
textReplay.setTextStyle(textStyle, replayGroup.addDeclutter(false));
textReplay.drawText(geometry, feature);
}
@@ -245,18 +244,18 @@ _ol_renderer_vector_.renderMultiPolygonGeometry_ = function(replayGroup, geometr
* @private
*/
_ol_renderer_vector_.renderPointGeometry_ = function(replayGroup, geometry, style, feature) {
var imageStyle = style.getImage();
const imageStyle = style.getImage();
if (imageStyle) {
if (imageStyle.getImageState() != ImageState.LOADED) {
return;
}
var imageReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.IMAGE);
const imageReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.IMAGE);
imageReplay.setImageStyle(imageStyle, replayGroup.addDeclutter(false));
imageReplay.drawPoint(geometry, feature);
}
var textStyle = style.getText();
const textStyle = style.getText();
if (textStyle) {
var textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
const textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
textReplay.setTextStyle(textStyle, replayGroup.addDeclutter(!!imageStyle));
textReplay.drawText(geometry, feature);
}
@@ -271,18 +270,18 @@ _ol_renderer_vector_.renderPointGeometry_ = function(replayGroup, geometry, styl
* @private
*/
_ol_renderer_vector_.renderMultiPointGeometry_ = function(replayGroup, geometry, style, feature) {
var imageStyle = style.getImage();
const imageStyle = style.getImage();
if (imageStyle) {
if (imageStyle.getImageState() != ImageState.LOADED) {
return;
}
var imageReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.IMAGE);
const imageReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.IMAGE);
imageReplay.setImageStyle(imageStyle, replayGroup.addDeclutter(false));
imageReplay.drawMultiPoint(geometry, feature);
}
var textStyle = style.getText();
const textStyle = style.getText();
if (textStyle) {
var textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
const textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
textReplay.setTextStyle(textStyle, replayGroup.addDeclutter(!!imageStyle));
textReplay.drawText(geometry, feature);
}
@@ -297,16 +296,16 @@ _ol_renderer_vector_.renderMultiPointGeometry_ = function(replayGroup, geometry,
* @private
*/
_ol_renderer_vector_.renderPolygonGeometry_ = function(replayGroup, geometry, style, feature) {
var fillStyle = style.getFill();
var strokeStyle = style.getStroke();
const fillStyle = style.getFill();
const strokeStyle = style.getStroke();
if (fillStyle || strokeStyle) {
var polygonReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.POLYGON);
const polygonReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.POLYGON);
polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
polygonReplay.drawPolygon(geometry, feature);
}
var textStyle = style.getText();
const textStyle = style.getText();
if (textStyle) {
var textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
const textReplay = replayGroup.getReplay(style.getZIndex(), ReplayType.TEXT);
textReplay.setTextStyle(textStyle, replayGroup.addDeclutter(false));
textReplay.drawText(geometry, feature);
}
src/ol/renderer/webgl/ImageLayer.js
+62 -62
View File
@@ -21,7 +21,7 @@ import _ol_webgl_Context_ from '../../webgl/Context.js';
* @param {ol.layer.Image} imageLayer Tile layer.
* @api
*/
var WebGLImageLayerRenderer = function(mapRenderer, imageLayer) {
const WebGLImageLayerRenderer = function(mapRenderer, imageLayer) {
WebGLLayerRenderer.call(this, mapRenderer, imageLayer);
@@ -68,8 +68,8 @@ WebGLImageLayerRenderer['handles'] = function(type, layer) {
*/
WebGLImageLayerRenderer['create'] = function(mapRenderer, layer) {
return new WebGLImageLayerRenderer(
/** @type {ol.renderer.webgl.Map} */ (mapRenderer),
/** @type {ol.layer.Image} */ (layer)
/** @type {ol.renderer.webgl.Map} */ (mapRenderer),
/** @type {ol.layer.Image} */ (layer)
);
};
@@ -85,11 +85,11 @@ WebGLImageLayerRenderer.prototype.createTexture_ = function(image) {
// http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences#Non-Power_of_Two_Texture_Support
// http://learningwebgl.com/blog/?p=2101
var imageElement = image.getImage();
var gl = this.mapRenderer.getGL();
const imageElement = image.getImage();
const gl = this.mapRenderer.getGL();
return _ol_webgl_Context_.createTexture(
gl, imageElement, _ol_webgl_.CLAMP_TO_EDGE, _ol_webgl_.CLAMP_TO_EDGE);
gl, imageElement, _ol_webgl_.CLAMP_TO_EDGE, _ol_webgl_.CLAMP_TO_EDGE);
};
@@ -97,21 +97,21 @@ WebGLImageLayerRenderer.prototype.createTexture_ = function(image) {
* @inheritDoc
*/
WebGLImageLayerRenderer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg) {
var layer = this.getLayer();
var source = layer.getSource();
var resolution = frameState.viewState.resolution;
var rotation = frameState.viewState.rotation;
var skippedFeatureUids = frameState.skippedFeatureUids;
const layer = this.getLayer();
const source = layer.getSource();
const resolution = frameState.viewState.resolution;
const rotation = frameState.viewState.rotation;
const skippedFeatureUids = frameState.skippedFeatureUids;
return source.forEachFeatureAtCoordinate(
coordinate, resolution, rotation, hitTolerance, skippedFeatureUids,
coordinate, resolution, rotation, hitTolerance, skippedFeatureUids,
/**
/**
* @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
return callback.call(thisArg, feature, layer);
});
function(feature) {
return callback.call(thisArg, feature, layer);
});
};
@@ -120,38 +120,38 @@ WebGLImageLayerRenderer.prototype.forEachFeatureAtCoordinate = function(coordina
*/
WebGLImageLayerRenderer.prototype.prepareFrame = function(frameState, layerState, context) {
var gl = this.mapRenderer.getGL();
const gl = this.mapRenderer.getGL();
var pixelRatio = frameState.pixelRatio;
var viewState = frameState.viewState;
var viewCenter = viewState.center;
var viewResolution = viewState.resolution;
var viewRotation = viewState.rotation;
const pixelRatio = frameState.pixelRatio;
const viewState = frameState.viewState;
const viewCenter = viewState.center;
const viewResolution = viewState.resolution;
const viewRotation = viewState.rotation;
var image = this.image_;
var texture = this.texture;
var imageLayer = /** @type {ol.layer.Image} */ (this.getLayer());
var imageSource = imageLayer.getSource();
let image = this.image_;
let texture = this.texture;
const imageLayer = /** @type {ol.layer.Image} */ (this.getLayer());
const imageSource = imageLayer.getSource();
var hints = frameState.viewHints;
const hints = frameState.viewHints;
var renderedExtent = frameState.extent;
let renderedExtent = frameState.extent;
if (layerState.extent !== undefined) {
renderedExtent = getIntersection(renderedExtent, layerState.extent);
}
if (!hints[ViewHint.ANIMATING] && !hints[ViewHint.INTERACTING] &&
!isEmpty(renderedExtent)) {
var projection = viewState.projection;
let projection = viewState.projection;
if (!ENABLE_RASTER_REPROJECTION) {
var sourceProjection = imageSource.getProjection();
const sourceProjection = imageSource.getProjection();
if (sourceProjection) {
projection = sourceProjection;
}
}
var image_ = imageSource.getImage(renderedExtent, viewResolution,
pixelRatio, projection);
const image_ = imageSource.getImage(renderedExtent, viewResolution,
pixelRatio, projection);
if (image_) {
var loaded = this.loadImage(image_);
const loaded = this.loadImage(image_);
if (loaded) {
image = image_;
texture = this.createTexture_(image_);
@@ -160,13 +160,13 @@ WebGLImageLayerRenderer.prototype.prepareFrame = function(frameState, layerState
* @param {WebGLRenderingContext} gl GL.
* @param {WebGLTexture} texture Texture.
*/
var postRenderFunction = function(gl, texture) {
const postRenderFunction = function(gl, texture) {
if (!gl.isContextLost()) {
gl.deleteTexture(texture);
}
}.bind(null, gl, this.texture);
frameState.postRenderFunctions.push(
/** @type {ol.PostRenderFunction} */ (postRenderFunction)
/** @type {ol.PostRenderFunction} */ (postRenderFunction)
);
}
}
@@ -174,15 +174,15 @@ WebGLImageLayerRenderer.prototype.prepareFrame = function(frameState, layerState
}
if (image) {
var canvas = this.mapRenderer.getContext().getCanvas();
const canvas = this.mapRenderer.getContext().getCanvas();
this.updateProjectionMatrix_(canvas.width, canvas.height,
pixelRatio, viewCenter, viewResolution, viewRotation,
image.getExtent());
pixelRatio, viewCenter, viewResolution, viewRotation,
image.getExtent());
this.hitTransformationMatrix_ = null;
// Translate and scale to flip the Y coord.
var texCoordMatrix = this.texCoordMatrix;
const texCoordMatrix = this.texCoordMatrix;
_ol_transform_.reset(texCoordMatrix);
_ol_transform_.scale(texCoordMatrix, 1, -1);
_ol_transform_.translate(texCoordMatrix, 0, -1);
@@ -206,23 +206,23 @@ WebGLImageLayerRenderer.prototype.prepareFrame = function(frameState, layerState
* @private
*/
WebGLImageLayerRenderer.prototype.updateProjectionMatrix_ = function(canvasWidth, canvasHeight, pixelRatio,
viewCenter, viewResolution, viewRotation, imageExtent) {
viewCenter, viewResolution, viewRotation, imageExtent) {
var canvasExtentWidth = canvasWidth * viewResolution;
var canvasExtentHeight = canvasHeight * viewResolution;
const canvasExtentWidth = canvasWidth * viewResolution;
const canvasExtentHeight = canvasHeight * viewResolution;
var projectionMatrix = this.projectionMatrix;
const projectionMatrix = this.projectionMatrix;
_ol_transform_.reset(projectionMatrix);
_ol_transform_.scale(projectionMatrix,
pixelRatio * 2 / canvasExtentWidth,
pixelRatio * 2 / canvasExtentHeight);
pixelRatio * 2 / canvasExtentWidth,
pixelRatio * 2 / canvasExtentHeight);
_ol_transform_.rotate(projectionMatrix, -viewRotation);
_ol_transform_.translate(projectionMatrix,
imageExtent[0] - viewCenter[0],
imageExtent[1] - viewCenter[1]);
imageExtent[0] - viewCenter[0],
imageExtent[1] - viewCenter[1]);
_ol_transform_.scale(projectionMatrix,
(imageExtent[2] - imageExtent[0]) / 2,
(imageExtent[3] - imageExtent[1]) / 2);
(imageExtent[2] - imageExtent[0]) / 2,
(imageExtent[3] - imageExtent[1]) / 2);
_ol_transform_.translate(projectionMatrix, 1, 1);
};
@@ -232,7 +232,7 @@ WebGLImageLayerRenderer.prototype.updateProjectionMatrix_ = function(canvasWidth
* @inheritDoc
*/
WebGLImageLayerRenderer.prototype.hasFeatureAtCoordinate = function(coordinate, frameState) {
var hasFeature = this.forEachFeatureAtCoordinate(coordinate, frameState, 0, TRUE, this);
const hasFeature = this.forEachFeatureAtCoordinate(coordinate, frameState, 0, TRUE, this);
return hasFeature !== undefined;
};
@@ -248,9 +248,9 @@ WebGLImageLayerRenderer.prototype.forEachLayerAtPixel = function(pixel, frameSta
if (this.getLayer().getSource().forEachFeatureAtCoordinate !== nullFunction) {
// for ImageCanvas sources use the original hit-detection logic,
// so that for example also transparent polygons are detected
var coordinate = _ol_transform_.apply(
frameState.pixelToCoordinateTransform, pixel.slice());
var hasFeature = this.forEachFeatureAtCoordinate(coordinate, frameState, 0, TRUE, this);
const coordinate = _ol_transform_.apply(
frameState.pixelToCoordinateTransform, pixel.slice());
const hasFeature = this.forEachFeatureAtCoordinate(coordinate, frameState, 0, TRUE, this);
if (hasFeature) {
return callback.call(thisArg, this.getLayer(), null);
@@ -258,16 +258,16 @@ WebGLImageLayerRenderer.prototype.forEachLayerAtPixel = function(pixel, frameSta
return undefined;
}
} else {
var imageSize =
const imageSize =
[this.image_.getImage().width, this.image_.getImage().height];
if (!this.hitTransformationMatrix_) {
this.hitTransformationMatrix_ = this.getHitTransformationMatrix_(
frameState.size, imageSize);
frameState.size, imageSize);
}
var pixelOnFrameBuffer = _ol_transform_.apply(
this.hitTransformationMatrix_, pixel.slice());
const pixelOnFrameBuffer = _ol_transform_.apply(
this.hitTransformationMatrix_, pixel.slice());
if (pixelOnFrameBuffer[0] < 0 || pixelOnFrameBuffer[0] > imageSize[0] ||
pixelOnFrameBuffer[1] < 0 || pixelOnFrameBuffer[1] > imageSize[1]) {
@@ -281,9 +281,9 @@ WebGLImageLayerRenderer.prototype.forEachLayerAtPixel = function(pixel, frameSta
this.hitCanvasContext_.clearRect(0, 0, 1, 1);
this.hitCanvasContext_.drawImage(this.image_.getImage(),
pixelOnFrameBuffer[0], pixelOnFrameBuffer[1], 1, 1, 0, 0, 1, 1);
pixelOnFrameBuffer[0], pixelOnFrameBuffer[1], 1, 1, 0, 0, 1, 1);
var imageData = this.hitCanvasContext_.getImageData(0, 0, 1, 1).data;
const imageData = this.hitCanvasContext_.getImageData(0, 0, 1, 1).data;
if (imageData[3] > 0) {
return callback.call(thisArg, this.getLayer(), imageData);
} else {
@@ -304,7 +304,7 @@ WebGLImageLayerRenderer.prototype.forEachLayerAtPixel = function(pixel, frameSta
WebGLImageLayerRenderer.prototype.getHitTransformationMatrix_ = function(mapSize, imageSize) {
// the first matrix takes a map pixel, flips the y-axis and scales to
// a range between -1 ... 1
var mapCoordTransform = _ol_transform_.create();
const mapCoordTransform = _ol_transform_.create();
_ol_transform_.translate(mapCoordTransform, -1, -1);
_ol_transform_.scale(mapCoordTransform, 2 / mapSize[0], 2 / mapSize[1]);
_ol_transform_.translate(mapCoordTransform, 0, mapSize[1]);
@@ -312,10 +312,10 @@ WebGLImageLayerRenderer.prototype.getHitTransformationMatrix_ = function(mapSize
// the second matrix is the inverse of the projection matrix used in the
// shader for drawing
var projectionMatrixInv = _ol_transform_.invert(this.projectionMatrix.slice());
const projectionMatrixInv = _ol_transform_.invert(this.projectionMatrix.slice());
// the third matrix scales to the image dimensions and flips the y-axis again
var transform = _ol_transform_.create();
const transform = _ol_transform_.create();
_ol_transform_.translate(transform, 0, imageSize[1]);
_ol_transform_.scale(transform, 1, -1);
_ol_transform_.scale(transform, imageSize[0] / 2, imageSize[1] / 2);
src/ol/renderer/webgl/Layer.js
+29 -29
View File
@@ -21,7 +21,7 @@ import _ol_webgl_Context_ from '../../webgl/Context.js';
* @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
* @param {ol.layer.Layer} layer Layer.
*/
var WebGLLayerRenderer = function(mapRenderer, layer) {
const WebGLLayerRenderer = function(mapRenderer, layer) {
LayerRenderer.call(this, layer);
@@ -96,7 +96,7 @@ inherits(WebGLLayerRenderer, LayerRenderer);
*/
WebGLLayerRenderer.prototype.bindFramebuffer = function(frameState, framebufferDimension) {
var gl = this.mapRenderer.getGL();
const gl = this.mapRenderer.getGL();
if (this.framebufferDimension === undefined ||
this.framebufferDimension != framebufferDimension) {
@@ -105,7 +105,7 @@ WebGLLayerRenderer.prototype.bindFramebuffer = function(frameState, framebufferD
* @param {WebGLFramebuffer} framebuffer Framebuffer.
* @param {WebGLTexture} texture Texture.
*/
var postRenderFunction = function(gl, framebuffer, texture) {
const postRenderFunction = function(gl, framebuffer, texture) {
if (!gl.isContextLost()) {
gl.deleteFramebuffer(framebuffer);
gl.deleteTexture(texture);
@@ -113,16 +113,16 @@ WebGLLayerRenderer.prototype.bindFramebuffer = function(frameState, framebufferD
}.bind(null, gl, this.framebuffer, this.texture);
frameState.postRenderFunctions.push(
/** @type {ol.PostRenderFunction} */ (postRenderFunction)
/** @type {ol.PostRenderFunction} */ (postRenderFunction)
);
var texture = _ol_webgl_Context_.createEmptyTexture(
gl, framebufferDimension, framebufferDimension);
const texture = _ol_webgl_Context_.createEmptyTexture(
gl, framebufferDimension, framebufferDimension);
var framebuffer = gl.createFramebuffer();
const framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(_ol_webgl_.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(_ol_webgl_.FRAMEBUFFER,
_ol_webgl_.COLOR_ATTACHMENT0, _ol_webgl_.TEXTURE_2D, texture, 0);
_ol_webgl_.COLOR_ATTACHMENT0, _ol_webgl_.TEXTURE_2D, texture, 0);
this.texture = texture;
this.framebuffer = framebuffer;
@@ -146,14 +146,14 @@ WebGLLayerRenderer.prototype.composeFrame = function(frameState, layerState, con
context.bindBuffer(_ol_webgl_.ARRAY_BUFFER, this.arrayBuffer_);
var gl = context.getGL();
const gl = context.getGL();
var fragmentShader = _ol_renderer_webgl_defaultmapshader_.fragment;
var vertexShader = _ol_renderer_webgl_defaultmapshader_.vertex;
const fragmentShader = _ol_renderer_webgl_defaultmapshader_.fragment;
const vertexShader = _ol_renderer_webgl_defaultmapshader_.vertex;
var program = context.getProgram(fragmentShader, vertexShader);
const program = context.getProgram(fragmentShader, vertexShader);
var locations;
let locations;
if (!this.defaultLocations_) {
locations = new _ol_renderer_webgl_defaultmapshader_Locations_(gl, program);
this.defaultLocations_ = locations;
@@ -164,17 +164,17 @@ WebGLLayerRenderer.prototype.composeFrame = function(frameState, layerState, con
if (context.useProgram(program)) {
gl.enableVertexAttribArray(locations.a_position);
gl.vertexAttribPointer(
locations.a_position, 2, _ol_webgl_.FLOAT, false, 16, 0);
locations.a_position, 2, _ol_webgl_.FLOAT, false, 16, 0);
gl.enableVertexAttribArray(locations.a_texCoord);
gl.vertexAttribPointer(
locations.a_texCoord, 2, _ol_webgl_.FLOAT, false, 16, 8);
locations.a_texCoord, 2, _ol_webgl_.FLOAT, false, 16, 8);
gl.uniform1i(locations.u_texture, 0);
}
gl.uniformMatrix4fv(locations.u_texCoordMatrix, false,
fromTransform(this.tmpMat4_, this.getTexCoordMatrix()));
fromTransform(this.tmpMat4_, this.getTexCoordMatrix()));
gl.uniformMatrix4fv(locations.u_projectionMatrix, false,
fromTransform(this.tmpMat4_, this.getProjectionMatrix()));
fromTransform(this.tmpMat4_, this.getProjectionMatrix()));
gl.uniform1f(locations.u_opacity, layerState.opacity);
gl.bindTexture(_ol_webgl_.TEXTURE_2D, this.getTexture());
gl.drawArrays(_ol_webgl_.TRIANGLE_STRIP, 0, 4);
@@ -190,20 +190,20 @@ WebGLLayerRenderer.prototype.composeFrame = function(frameState, layerState, con
* @private
*/
WebGLLayerRenderer.prototype.dispatchComposeEvent_ = function(type, context, frameState) {
var layer = this.getLayer();
const layer = this.getLayer();
if (layer.hasListener(type)) {
var viewState = frameState.viewState;
var resolution = viewState.resolution;
var pixelRatio = frameState.pixelRatio;
var extent = frameState.extent;
var center = viewState.center;
var rotation = viewState.rotation;
var size = frameState.size;
const viewState = frameState.viewState;
const resolution = viewState.resolution;
const pixelRatio = frameState.pixelRatio;
const extent = frameState.extent;
const center = viewState.center;
const rotation = viewState.rotation;
const size = frameState.size;
var render = new _ol_render_webgl_Immediate_(
context, center, resolution, rotation, size, extent, pixelRatio);
var composeEvent = new RenderEvent(
type, render, frameState, null, context);
const render = new _ol_render_webgl_Immediate_(
context, center, resolution, rotation, size, extent, pixelRatio);
const composeEvent = new RenderEvent(
type, render, frameState, null, context);
layer.dispatchEvent(composeEvent);
}
};
src/ol/renderer/webgl/Map.js
+103 -103
View File
@@ -25,7 +25,7 @@ import ContextEventType from '../../webgl/ContextEventType.js';
/**
* @type {number} Texture cache high water mark.
*/
var WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK = 1024;
const WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK = 1024;
/**
@@ -35,7 +35,7 @@ var WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK = 1024;
* @param {ol.PluggableMap} map Map.
* @api
*/
var WebGLMapRenderer = function(container, map) {
const WebGLMapRenderer = function(container, map) {
MapRenderer.call(this, container, map);
/**
@@ -93,9 +93,9 @@ var WebGLMapRenderer = function(container, map) {
this.context_ = new _ol_webgl_Context_(this.canvas_, this.gl_);
_ol_events_.listen(this.canvas_, ContextEventType.LOST,
this.handleWebGLContextLost, this);
this.handleWebGLContextLost, this);
_ol_events_.listen(this.canvas_, ContextEventType.RESTORED,
this.handleWebGLContextRestored, this);
this.handleWebGLContextRestored, this);
/**
* @private
@@ -114,26 +114,26 @@ var WebGLMapRenderer = function(container, map) {
* @type {ol.structs.PriorityQueue.<Array>}
*/
this.tileTextureQueue_ = new PriorityQueue(
/**
/**
* @param {Array.<*>} element Element.
* @return {number} Priority.
* @this {ol.renderer.webgl.Map}
*/
(function(element) {
var tileCenter = /** @type {ol.Coordinate} */ (element[1]);
var tileResolution = /** @type {number} */ (element[2]);
var deltaX = tileCenter[0] - this.focus_[0];
var deltaY = tileCenter[1] - this.focus_[1];
return 65536 * Math.log(tileResolution) +
(function(element) {
const tileCenter = /** @type {ol.Coordinate} */ (element[1]);
const tileResolution = /** @type {number} */ (element[2]);
const deltaX = tileCenter[0] - this.focus_[0];
const deltaY = tileCenter[1] - this.focus_[1];
return 65536 * Math.log(tileResolution) +
Math.sqrt(deltaX * deltaX + deltaY * deltaY) / tileResolution;
}).bind(this),
/**
}).bind(this),
/**
* @param {Array.<*>} element Element.
* @return {string} Key.
*/
function(element) {
return /** @type {ol.Tile} */ (element[0]).getKey();
});
function(element) {
return /** @type {ol.Tile} */ (element[0]).getKey();
});
/**
@@ -146,12 +146,12 @@ var WebGLMapRenderer = function(container, map) {
function(map, frameState) {
if (!this.tileTextureQueue_.isEmpty()) {
this.tileTextureQueue_.reprioritize();
var element = this.tileTextureQueue_.dequeue();
var tile = /** @type {ol.Tile} */ (element[0]);
var tileSize = /** @type {ol.Size} */ (element[3]);
var tileGutter = /** @type {number} */ (element[4]);
const element = this.tileTextureQueue_.dequeue();
const tile = /** @type {ol.Tile} */ (element[0]);
const tileSize = /** @type {ol.Size} */ (element[3]);
const tileGutter = /** @type {number} */ (element[4]);
this.bindTileTexture(
tile, tileSize, tileGutter, _ol_webgl_.LINEAR, _ol_webgl_.LINEAR);
tile, tileSize, tileGutter, _ol_webgl_.LINEAR, _ol_webgl_.LINEAR);
}
return false;
}.bind(this);
@@ -198,27 +198,27 @@ WebGLMapRenderer['create'] = function(container, map) {
* @param {number} minFilter Min filter.
*/
WebGLMapRenderer.prototype.bindTileTexture = function(tile, tileSize, tileGutter, magFilter, minFilter) {
var gl = this.getGL();
var tileKey = tile.getKey();
const gl = this.getGL();
const tileKey = tile.getKey();
if (this.textureCache_.containsKey(tileKey)) {
var textureCacheEntry = this.textureCache_.get(tileKey);
const textureCacheEntry = this.textureCache_.get(tileKey);
gl.bindTexture(_ol_webgl_.TEXTURE_2D, textureCacheEntry.texture);
if (textureCacheEntry.magFilter != magFilter) {
gl.texParameteri(
_ol_webgl_.TEXTURE_2D, _ol_webgl_.TEXTURE_MAG_FILTER, magFilter);
_ol_webgl_.TEXTURE_2D, _ol_webgl_.TEXTURE_MAG_FILTER, magFilter);
textureCacheEntry.magFilter = magFilter;
}
if (textureCacheEntry.minFilter != minFilter) {
gl.texParameteri(
_ol_webgl_.TEXTURE_2D, _ol_webgl_.TEXTURE_MIN_FILTER, minFilter);
_ol_webgl_.TEXTURE_2D, _ol_webgl_.TEXTURE_MIN_FILTER, minFilter);
textureCacheEntry.minFilter = minFilter;
}
} else {
var texture = gl.createTexture();
const texture = gl.createTexture();
gl.bindTexture(_ol_webgl_.TEXTURE_2D, texture);
if (tileGutter > 0) {
var clipTileCanvas = this.clipTileContext_.canvas;
var clipTileContext = this.clipTileContext_;
const clipTileCanvas = this.clipTileContext_.canvas;
const clipTileContext = this.clipTileContext_;
if (this.clipTileCanvasWidth_ !== tileSize[0] ||
this.clipTileCanvasHeight_ !== tileSize[1]) {
clipTileCanvas.width = tileSize[0];
@@ -229,23 +229,23 @@ WebGLMapRenderer.prototype.bindTileTexture = function(tile, tileSize, tileGutter
clipTileContext.clearRect(0, 0, tileSize[0], tileSize[1]);
}
clipTileContext.drawImage(tile.getImage(), tileGutter, tileGutter,
tileSize[0], tileSize[1], 0, 0, tileSize[0], tileSize[1]);
tileSize[0], tileSize[1], 0, 0, tileSize[0], tileSize[1]);
gl.texImage2D(_ol_webgl_.TEXTURE_2D, 0,
_ol_webgl_.RGBA, _ol_webgl_.RGBA,
_ol_webgl_.UNSIGNED_BYTE, clipTileCanvas);
_ol_webgl_.RGBA, _ol_webgl_.RGBA,
_ol_webgl_.UNSIGNED_BYTE, clipTileCanvas);
} else {
gl.texImage2D(_ol_webgl_.TEXTURE_2D, 0,
_ol_webgl_.RGBA, _ol_webgl_.RGBA,
_ol_webgl_.UNSIGNED_BYTE, tile.getImage());
_ol_webgl_.RGBA, _ol_webgl_.RGBA,
_ol_webgl_.UNSIGNED_BYTE, tile.getImage());
}
gl.texParameteri(
_ol_webgl_.TEXTURE_2D, _ol_webgl_.TEXTURE_MAG_FILTER, magFilter);
_ol_webgl_.TEXTURE_2D, _ol_webgl_.TEXTURE_MAG_FILTER, magFilter);
gl.texParameteri(
_ol_webgl_.TEXTURE_2D, _ol_webgl_.TEXTURE_MIN_FILTER, minFilter);
_ol_webgl_.TEXTURE_2D, _ol_webgl_.TEXTURE_MIN_FILTER, minFilter);
gl.texParameteri(_ol_webgl_.TEXTURE_2D, _ol_webgl_.TEXTURE_WRAP_S,
_ol_webgl_.CLAMP_TO_EDGE);
_ol_webgl_.CLAMP_TO_EDGE);
gl.texParameteri(_ol_webgl_.TEXTURE_2D, _ol_webgl_.TEXTURE_WRAP_T,
_ol_webgl_.CLAMP_TO_EDGE);
_ol_webgl_.CLAMP_TO_EDGE);
this.textureCache_.set(tileKey, {
texture: texture,
magFilter: magFilter,
@@ -261,23 +261,23 @@ WebGLMapRenderer.prototype.bindTileTexture = function(tile, tileSize, tileGutter
* @private
*/
WebGLMapRenderer.prototype.dispatchComposeEvent_ = function(type, frameState) {
var map = this.getMap();
const map = this.getMap();
if (map.hasListener(type)) {
var context = this.context_;
const context = this.context_;
var extent = frameState.extent;
var size = frameState.size;
var viewState = frameState.viewState;
var pixelRatio = frameState.pixelRatio;
const extent = frameState.extent;
const size = frameState.size;
const viewState = frameState.viewState;
const pixelRatio = frameState.pixelRatio;
var resolution = viewState.resolution;
var center = viewState.center;
var rotation = viewState.rotation;
const resolution = viewState.resolution;
const center = viewState.center;
const rotation = viewState.rotation;
var vectorContext = new _ol_render_webgl_Immediate_(context,
center, resolution, rotation, size, extent, pixelRatio);
var composeEvent = new RenderEvent(type, vectorContext,
frameState, null, context);
const vectorContext = new _ol_render_webgl_Immediate_(context,
center, resolution, rotation, size, extent, pixelRatio);
const composeEvent = new RenderEvent(type, vectorContext,
frameState, null, context);
map.dispatchEvent(composeEvent);
}
};
@@ -287,18 +287,18 @@ WebGLMapRenderer.prototype.dispatchComposeEvent_ = function(type, frameState) {
* @inheritDoc
*/
WebGLMapRenderer.prototype.disposeInternal = function() {
var gl = this.getGL();
const gl = this.getGL();
if (!gl.isContextLost()) {
this.textureCache_.forEach(
/**
/**
* @param {?ol.WebglTextureCacheEntry} textureCacheEntry
* Texture cache entry.
*/
function(textureCacheEntry) {
if (textureCacheEntry) {
gl.deleteTexture(textureCacheEntry.texture);
}
});
function(textureCacheEntry) {
if (textureCacheEntry) {
gl.deleteTexture(textureCacheEntry.texture);
}
});
}
this.context_.dispose();
MapRenderer.prototype.disposeInternal.call(this);
@@ -311,8 +311,8 @@ WebGLMapRenderer.prototype.disposeInternal = function() {
* @private
*/
WebGLMapRenderer.prototype.expireCache_ = function(map, frameState) {
var gl = this.getGL();
var textureCacheEntry;
const gl = this.getGL();
let textureCacheEntry;
while (this.textureCache_.getCount() - this.textureCacheFrameMarkerCount_ >
WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK) {
textureCacheEntry = this.textureCache_.peekLast();
@@ -371,9 +371,9 @@ WebGLMapRenderer.prototype.handleWebGLContextLost = function(event) {
this.textureCache_.clear();
this.textureCacheFrameMarkerCount_ = 0;
var renderers = this.getLayerRenderers();
for (var id in renderers) {
var renderer = /** @type {ol.renderer.webgl.Layer} */ (renderers[id]);
const renderers = this.getLayerRenderers();
for (const id in renderers) {
const renderer = /** @type {ol.renderer.webgl.Layer} */ (renderers[id]);
renderer.handleWebGLContextLost();
}
};
@@ -392,11 +392,11 @@ WebGLMapRenderer.prototype.handleWebGLContextRestored = function() {
* @private
*/
WebGLMapRenderer.prototype.initializeGL_ = function() {
var gl = this.gl_;
const gl = this.gl_;
gl.activeTexture(_ol_webgl_.TEXTURE0);
gl.blendFuncSeparate(
_ol_webgl_.SRC_ALPHA, _ol_webgl_.ONE_MINUS_SRC_ALPHA,
_ol_webgl_.ONE, _ol_webgl_.ONE_MINUS_SRC_ALPHA);
_ol_webgl_.SRC_ALPHA, _ol_webgl_.ONE_MINUS_SRC_ALPHA,
_ol_webgl_.ONE, _ol_webgl_.ONE_MINUS_SRC_ALPHA);
gl.disable(_ol_webgl_.CULL_FACE);
gl.disable(_ol_webgl_.DEPTH_TEST);
gl.disable(_ol_webgl_.SCISSOR_TEST);
@@ -418,8 +418,8 @@ WebGLMapRenderer.prototype.isTileTextureLoaded = function(tile) {
*/
WebGLMapRenderer.prototype.renderFrame = function(frameState) {
var context = this.getContext();
var gl = this.getGL();
const context = this.getContext();
const gl = this.getGL();
if (gl.isContextLost()) {
return false;
@@ -441,12 +441,12 @@ WebGLMapRenderer.prototype.renderFrame = function(frameState) {
this.dispatchComposeEvent_(RenderEventType.PRECOMPOSE, frameState);
/** @type {Array.<ol.LayerState>} */
var layerStatesToDraw = [];
var layerStatesArray = frameState.layerStatesArray;
const layerStatesToDraw = [];
const layerStatesArray = frameState.layerStatesArray;
stableSort(layerStatesArray, MapRenderer.sortByZIndex);
var viewResolution = frameState.viewState.resolution;
var i, ii, layerRenderer, layerState;
const viewResolution = frameState.viewState.resolution;
let i, ii, layerRenderer, layerState;
for (i = 0, ii = layerStatesArray.length; i < ii; ++i) {
layerState = layerStatesArray[i];
if (Layer.visibleAtResolution(layerState, viewResolution) &&
@@ -458,8 +458,8 @@ WebGLMapRenderer.prototype.renderFrame = function(frameState) {
}
}
var width = frameState.size[0] * frameState.pixelRatio;
var height = frameState.size[1] * frameState.pixelRatio;
const width = frameState.size[0] * frameState.pixelRatio;
const height = frameState.size[1] * frameState.pixelRatio;
if (this.canvas_.width != width || this.canvas_.height != height) {
this.canvas_.width = width;
this.canvas_.height = height;
@@ -488,7 +488,7 @@ WebGLMapRenderer.prototype.renderFrame = function(frameState) {
if (this.textureCache_.getCount() - this.textureCacheFrameMarkerCount_ >
WEBGL_TEXTURE_CACHE_HIGH_WATER_MARK) {
frameState.postRenderFunctions.push(
/** @type {ol.PostRenderFunction} */ (this.expireCache_.bind(this))
/** @type {ol.PostRenderFunction} */ (this.expireCache_.bind(this))
);
}
@@ -509,26 +509,26 @@ WebGLMapRenderer.prototype.renderFrame = function(frameState) {
* @inheritDoc
*/
WebGLMapRenderer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg,
layerFilter, thisArg2) {
var result;
layerFilter, thisArg2) {
let result;
if (this.getGL().isContextLost()) {
return false;
}
var viewState = frameState.viewState;
const viewState = frameState.viewState;
var layerStates = frameState.layerStatesArray;
var numLayers = layerStates.length;
var i;
const layerStates = frameState.layerStatesArray;
const numLayers = layerStates.length;
let i;
for (i = numLayers - 1; i >= 0; --i) {
var layerState = layerStates[i];
var layer = layerState.layer;
const layerState = layerStates[i];
const layer = layerState.layer;
if (Layer.visibleAtResolution(layerState, viewState.resolution) &&
layerFilter.call(thisArg2, layer)) {
var layerRenderer = this.getLayerRenderer(layer);
const layerRenderer = this.getLayerRenderer(layer);
result = layerRenderer.forEachFeatureAtCoordinate(
coordinate, frameState, hitTolerance, callback, thisArg);
coordinate, frameState, hitTolerance, callback, thisArg);
if (result) {
return result;
}
@@ -542,23 +542,23 @@ WebGLMapRenderer.prototype.forEachFeatureAtCoordinate = function(coordinate, fra
* @inheritDoc
*/
WebGLMapRenderer.prototype.hasFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, layerFilter, thisArg) {
var hasFeature = false;
let hasFeature = false;
if (this.getGL().isContextLost()) {
return false;
}
var viewState = frameState.viewState;
const viewState = frameState.viewState;
var layerStates = frameState.layerStatesArray;
var numLayers = layerStates.length;
var i;
const layerStates = frameState.layerStatesArray;
const numLayers = layerStates.length;
let i;
for (i = numLayers - 1; i >= 0; --i) {
var layerState = layerStates[i];
var layer = layerState.layer;
const layerState = layerStates[i];
const layer = layerState.layer;
if (Layer.visibleAtResolution(layerState, viewState.resolution) &&
layerFilter.call(thisArg, layer)) {
var layerRenderer = this.getLayerRenderer(layer);
const layerRenderer = this.getLayerRenderer(layer);
hasFeature =
layerRenderer.hasFeatureAtCoordinate(coordinate, frameState);
if (hasFeature) {
@@ -574,25 +574,25 @@ WebGLMapRenderer.prototype.hasFeatureAtCoordinate = function(coordinate, frameSt
* @inheritDoc
*/
WebGLMapRenderer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg,
layerFilter, thisArg2) {
layerFilter, thisArg2) {
if (this.getGL().isContextLost()) {
return false;
}
var viewState = frameState.viewState;
var result;
const viewState = frameState.viewState;
let result;
var layerStates = frameState.layerStatesArray;
var numLayers = layerStates.length;
var i;
const layerStates = frameState.layerStatesArray;
const numLayers = layerStates.length;
let i;
for (i = numLayers - 1; i >= 0; --i) {
var layerState = layerStates[i];
var layer = layerState.layer;
const layerState = layerStates[i];
const layer = layerState.layer;
if (Layer.visibleAtResolution(layerState, viewState.resolution) &&
layerFilter.call(thisArg, layer)) {
var layerRenderer = /** @type {ol.renderer.webgl.Layer} */ (this.getLayerRenderer(layer));
const layerRenderer = /** @type {ol.renderer.webgl.Layer} */ (this.getLayerRenderer(layer));
result = layerRenderer.forEachLayerAtPixel(
pixel, frameState, callback, thisArg);
pixel, frameState, callback, thisArg);
if (result) {
return result;
}
src/ol/renderer/webgl/TileLayer.js
+76 -76
View File
@@ -27,7 +27,7 @@ import _ol_webgl_Buffer_ from '../../webgl/Buffer.js';
* @param {ol.layer.Tile} tileLayer Tile layer.
* @api
*/
var WebGLTileLayerRenderer = function(mapRenderer, tileLayer) {
const WebGLTileLayerRenderer = function(mapRenderer, tileLayer) {
WebGLLayerRenderer.call(this, mapRenderer, tileLayer);
@@ -108,8 +108,8 @@ WebGLTileLayerRenderer['handles'] = function(type, layer) {
*/
WebGLTileLayerRenderer['create'] = function(mapRenderer, layer) {
return new WebGLTileLayerRenderer(
/** @type {ol.renderer.webgl.Map} */ (mapRenderer),
/** @type {ol.layer.Tile} */ (layer)
/** @type {ol.renderer.webgl.Map} */ (mapRenderer),
/** @type {ol.layer.Tile} */ (layer)
);
};
@@ -118,7 +118,7 @@ WebGLTileLayerRenderer['create'] = function(mapRenderer, layer) {
* @inheritDoc
*/
WebGLTileLayerRenderer.prototype.disposeInternal = function() {
var context = this.mapRenderer.getContext();
const context = this.mapRenderer.getContext();
context.deleteBuffer(this.renderArrayBuffer_);
WebGLLayerRenderer.prototype.disposeInternal.call(this);
};
@@ -128,7 +128,7 @@ WebGLTileLayerRenderer.prototype.disposeInternal = function() {
* @inheritDoc
*/
WebGLTileLayerRenderer.prototype.createLoadedTileFinder = function(source, projection, tiles) {
var mapRenderer = this.mapRenderer;
const mapRenderer = this.mapRenderer;
return (
/**
@@ -138,7 +138,7 @@ WebGLTileLayerRenderer.prototype.createLoadedTileFinder = function(source, proje
*/
function(zoom, tileRange) {
function callback(tile) {
var loaded = mapRenderer.isTileTextureLoaded(tile);
const loaded = mapRenderer.isTileTextureLoaded(tile);
if (loaded) {
if (!tiles[zoom]) {
tiles[zoom] = {};
@@ -166,47 +166,47 @@ WebGLTileLayerRenderer.prototype.handleWebGLContextLost = function() {
*/
WebGLTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState, context) {
var mapRenderer = this.mapRenderer;
var gl = context.getGL();
const mapRenderer = this.mapRenderer;
const gl = context.getGL();
var viewState = frameState.viewState;
var projection = viewState.projection;
const viewState = frameState.viewState;
const projection = viewState.projection;
var tileLayer = /** @type {ol.layer.Tile} */ (this.getLayer());
var tileSource = tileLayer.getSource();
var tileGrid = tileSource.getTileGridForProjection(projection);
var z = tileGrid.getZForResolution(viewState.resolution);
var tileResolution = tileGrid.getResolution(z);
const tileLayer = /** @type {ol.layer.Tile} */ (this.getLayer());
const tileSource = tileLayer.getSource();
const tileGrid = tileSource.getTileGridForProjection(projection);
const z = tileGrid.getZForResolution(viewState.resolution);
const tileResolution = tileGrid.getResolution(z);
var tilePixelSize =
const tilePixelSize =
tileSource.getTilePixelSize(z, frameState.pixelRatio, projection);
var pixelRatio = tilePixelSize[0] /
const pixelRatio = tilePixelSize[0] /
_ol_size_.toSize(tileGrid.getTileSize(z), this.tmpSize_)[0];
var tilePixelResolution = tileResolution / pixelRatio;
var tileGutter = tileSource.getTilePixelRatio(pixelRatio) * tileSource.getGutter(projection);
const tilePixelResolution = tileResolution / pixelRatio;
const tileGutter = tileSource.getTilePixelRatio(pixelRatio) * tileSource.getGutter(projection);
var center = viewState.center;
var extent = frameState.extent;
var tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
const center = viewState.center;
const extent = frameState.extent;
const tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
var framebufferExtent;
let framebufferExtent;
if (this.renderedTileRange_ &&
this.renderedTileRange_.equals(tileRange) &&
this.renderedRevision_ == tileSource.getRevision()) {
framebufferExtent = this.renderedFramebufferExtent_;
} else {
var tileRangeSize = tileRange.getSize();
const tileRangeSize = tileRange.getSize();
var maxDimension = Math.max(
tileRangeSize[0] * tilePixelSize[0],
tileRangeSize[1] * tilePixelSize[1]);
var framebufferDimension = roundUpToPowerOfTwo(maxDimension);
var framebufferExtentDimension = tilePixelResolution * framebufferDimension;
var origin = tileGrid.getOrigin(z);
var minX = origin[0] +
const maxDimension = Math.max(
tileRangeSize[0] * tilePixelSize[0],
tileRangeSize[1] * tilePixelSize[1]);
const framebufferDimension = roundUpToPowerOfTwo(maxDimension);
const framebufferExtentDimension = tilePixelResolution * framebufferDimension;
const origin = tileGrid.getOrigin(z);
const minX = origin[0] +
tileRange.minX * tilePixelSize[0] * tilePixelResolution;
var minY = origin[1] +
const minY = origin[1] +
tileRange.minY * tilePixelSize[1] * tilePixelResolution;
framebufferExtent = [
minX, minY,
@@ -220,7 +220,7 @@ WebGLTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState,
gl.clear(_ol_webgl_.COLOR_BUFFER_BIT);
gl.disable(_ol_webgl_.BLEND);
var program = context.getProgram(this.fragmentShader_, this.vertexShader_);
const program = context.getProgram(this.fragmentShader_, this.vertexShader_);
context.useProgram(program);
if (!this.locations_) {
this.locations_ = new _ol_renderer_webgl_tilelayershader_Locations_(gl, program);
@@ -229,27 +229,27 @@ WebGLTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState,
context.bindBuffer(_ol_webgl_.ARRAY_BUFFER, this.renderArrayBuffer_);
gl.enableVertexAttribArray(this.locations_.a_position);
gl.vertexAttribPointer(
this.locations_.a_position, 2, _ol_webgl_.FLOAT, false, 16, 0);
this.locations_.a_position, 2, _ol_webgl_.FLOAT, false, 16, 0);
gl.enableVertexAttribArray(this.locations_.a_texCoord);
gl.vertexAttribPointer(
this.locations_.a_texCoord, 2, _ol_webgl_.FLOAT, false, 16, 8);
this.locations_.a_texCoord, 2, _ol_webgl_.FLOAT, false, 16, 8);
gl.uniform1i(this.locations_.u_texture, 0);
/**
* @type {Object.<number, Object.<string, ol.Tile>>}
*/
var tilesToDrawByZ = {};
const tilesToDrawByZ = {};
tilesToDrawByZ[z] = {};
var findLoadedTiles = this.createLoadedTileFinder(
tileSource, projection, tilesToDrawByZ);
const findLoadedTiles = this.createLoadedTileFinder(
tileSource, projection, tilesToDrawByZ);
var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
var allTilesLoaded = true;
var tmpExtent = createEmpty();
var tmpTileRange = new TileRange(0, 0, 0, 0);
var childTileRange, drawable, fullyLoaded, tile, tileState;
var x, y, tileExtent;
const useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
let allTilesLoaded = true;
const tmpExtent = createEmpty();
const tmpTileRange = new TileRange(0, 0, 0, 0);
let childTileRange, drawable, fullyLoaded, tile, tileState;
let x, y, tileExtent;
for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
@@ -282,10 +282,10 @@ WebGLTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState,
allTilesLoaded = false;
fullyLoaded = tileGrid.forEachTileCoordParentTileRange(
tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent);
tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent);
if (!fullyLoaded) {
childTileRange = tileGrid.getTileCoordChildTileRange(
tile.tileCoord, tmpTileRange, tmpExtent);
tile.tileCoord, tmpTileRange, tmpExtent);
if (childTileRange) {
findLoadedTiles(z + 1, childTileRange);
}
@@ -296,10 +296,10 @@ WebGLTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState,
}
/** @type {Array.<number>} */
var zs = Object.keys(tilesToDrawByZ).map(Number);
const zs = Object.keys(tilesToDrawByZ).map(Number);
zs.sort(numberSafeCompareFunction);
var u_tileOffset = new Float32Array(4);
var i, ii, tileKey, tilesToDraw;
const u_tileOffset = new Float32Array(4);
let i, ii, tileKey, tilesToDraw;
for (i = 0, ii = zs.length; i < ii; ++i) {
tilesToDraw = tilesToDrawByZ[zs[i]];
for (tileKey in tilesToDraw) {
@@ -315,7 +315,7 @@ WebGLTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState,
framebufferExtentDimension - 1;
gl.uniform4fv(this.locations_.u_tileOffset, u_tileOffset);
mapRenderer.bindTileTexture(tile, tilePixelSize,
tileGutter * pixelRatio, _ol_webgl_.LINEAR, _ol_webgl_.LINEAR);
tileGutter * pixelRatio, _ol_webgl_.LINEAR, _ol_webgl_.LINEAR);
gl.drawArrays(_ol_webgl_.TRIANGLE_STRIP, 0, 4);
}
}
@@ -334,41 +334,41 @@ WebGLTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState,
}
this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
var tileTextureQueue = mapRenderer.getTileTextureQueue();
const tileTextureQueue = mapRenderer.getTileTextureQueue();
this.manageTilePyramid(
frameState, tileSource, tileGrid, pixelRatio, projection, extent, z,
tileLayer.getPreload(),
/**
frameState, tileSource, tileGrid, pixelRatio, projection, extent, z,
tileLayer.getPreload(),
/**
* @param {ol.Tile} tile Tile.
*/
function(tile) {
if (tile.getState() == TileState.LOADED &&
function(tile) {
if (tile.getState() == TileState.LOADED &&
!mapRenderer.isTileTextureLoaded(tile) &&
!tileTextureQueue.isKeyQueued(tile.getKey())) {
tileTextureQueue.enqueue([
tile,
tileGrid.getTileCoordCenter(tile.tileCoord),
tileGrid.getResolution(tile.tileCoord[0]),
tilePixelSize, tileGutter * pixelRatio
]);
}
}, this);
tileTextureQueue.enqueue([
tile,
tileGrid.getTileCoordCenter(tile.tileCoord),
tileGrid.getResolution(tile.tileCoord[0]),
tilePixelSize, tileGutter * pixelRatio
]);
}
}, this);
this.scheduleExpireCache(frameState, tileSource);
var texCoordMatrix = this.texCoordMatrix;
const texCoordMatrix = this.texCoordMatrix;
_ol_transform_.reset(texCoordMatrix);
_ol_transform_.translate(texCoordMatrix,
(Math.round(center[0] / tileResolution) * tileResolution - framebufferExtent[0]) /
(Math.round(center[0] / tileResolution) * tileResolution - framebufferExtent[0]) /
(framebufferExtent[2] - framebufferExtent[0]),
(Math.round(center[1] / tileResolution) * tileResolution - framebufferExtent[1]) /
(Math.round(center[1] / tileResolution) * tileResolution - framebufferExtent[1]) /
(framebufferExtent[3] - framebufferExtent[1]));
if (viewState.rotation !== 0) {
_ol_transform_.rotate(texCoordMatrix, viewState.rotation);
}
_ol_transform_.scale(texCoordMatrix,
frameState.size[0] * viewState.resolution /
frameState.size[0] * viewState.resolution /
(framebufferExtent[2] - framebufferExtent[0]),
frameState.size[1] * viewState.resolution /
frameState.size[1] * viewState.resolution /
(framebufferExtent[3] - framebufferExtent[1]));
_ol_transform_.translate(texCoordMatrix, -0.5, -0.5);
@@ -384,21 +384,21 @@ WebGLTileLayerRenderer.prototype.forEachLayerAtPixel = function(pixel, frameStat
return undefined;
}
var pixelOnMapScaled = [
const pixelOnMapScaled = [
pixel[0] / frameState.size[0],
(frameState.size[1] - pixel[1]) / frameState.size[1]];
var pixelOnFrameBufferScaled = _ol_transform_.apply(
this.texCoordMatrix, pixelOnMapScaled.slice());
var pixelOnFrameBuffer = [
const pixelOnFrameBufferScaled = _ol_transform_.apply(
this.texCoordMatrix, pixelOnMapScaled.slice());
const pixelOnFrameBuffer = [
pixelOnFrameBufferScaled[0] * this.framebufferDimension,
pixelOnFrameBufferScaled[1] * this.framebufferDimension];
var gl = this.mapRenderer.getContext().getGL();
const gl = this.mapRenderer.getContext().getGL();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
var imageData = new Uint8Array(4);
const imageData = new Uint8Array(4);
gl.readPixels(pixelOnFrameBuffer[0], pixelOnFrameBuffer[1], 1, 1,
gl.RGBA, gl.UNSIGNED_BYTE, imageData);
gl.RGBA, gl.UNSIGNED_BYTE, imageData);
if (imageData[3] > 0) {
return callback.call(thisArg, this.getLayer(), imageData);
src/ol/renderer/webgl/VectorLayer.js
+76 -76
View File
@@ -18,7 +18,7 @@ import _ol_transform_ from '../../transform.js';
* @param {ol.layer.Vector} vectorLayer Vector layer.
* @api
*/
var WebGLVectorLayerRenderer = function(mapRenderer, vectorLayer) {
const WebGLVectorLayerRenderer = function(mapRenderer, vectorLayer) {
WebGLLayerRenderer.call(this, mapRenderer, vectorLayer);
@@ -89,8 +89,8 @@ WebGLVectorLayerRenderer['handles'] = function(type, layer) {
*/
WebGLVectorLayerRenderer['create'] = function(mapRenderer, layer) {
return new WebGLVectorLayerRenderer(
/** @type {ol.renderer.webgl.Map} */ (mapRenderer),
/** @type {ol.layer.Vector} */ (layer)
/** @type {ol.renderer.webgl.Map} */ (mapRenderer),
/** @type {ol.layer.Vector} */ (layer)
);
};
@@ -100,18 +100,18 @@ WebGLVectorLayerRenderer['create'] = function(mapRenderer, layer) {
*/
WebGLVectorLayerRenderer.prototype.composeFrame = function(frameState, layerState, context) {
this.layerState_ = layerState;
var viewState = frameState.viewState;
var replayGroup = this.replayGroup_;
var size = frameState.size;
var pixelRatio = frameState.pixelRatio;
var gl = this.mapRenderer.getGL();
const viewState = frameState.viewState;
const replayGroup = this.replayGroup_;
const size = frameState.size;
const pixelRatio = frameState.pixelRatio;
const gl = this.mapRenderer.getGL();
if (replayGroup && !replayGroup.isEmpty()) {
gl.enable(gl.SCISSOR_TEST);
gl.scissor(0, 0, size[0] * pixelRatio, size[1] * pixelRatio);
replayGroup.replay(context,
viewState.center, viewState.resolution, viewState.rotation,
size, pixelRatio, layerState.opacity,
layerState.managed ? frameState.skippedFeatureUids : {});
viewState.center, viewState.resolution, viewState.rotation,
size, pixelRatio, layerState.opacity,
layerState.managed ? frameState.skippedFeatureUids : {});
gl.disable(gl.SCISSOR_TEST);
}
@@ -122,9 +122,9 @@ WebGLVectorLayerRenderer.prototype.composeFrame = function(frameState, layerStat
* @inheritDoc
*/
WebGLVectorLayerRenderer.prototype.disposeInternal = function() {
var replayGroup = this.replayGroup_;
const replayGroup = this.replayGroup_;
if (replayGroup) {
var context = this.mapRenderer.getContext();
const context = this.mapRenderer.getContext();
replayGroup.getDeleteResourcesFunction(context)();
this.replayGroup_ = null;
}
@@ -139,27 +139,27 @@ WebGLVectorLayerRenderer.prototype.forEachFeatureAtCoordinate = function(coordin
if (!this.replayGroup_ || !this.layerState_) {
return undefined;
} else {
var context = this.mapRenderer.getContext();
var viewState = frameState.viewState;
var layer = this.getLayer();
var layerState = this.layerState_;
const context = this.mapRenderer.getContext();
const viewState = frameState.viewState;
const layer = this.getLayer();
const layerState = this.layerState_;
/** @type {Object.<string, boolean>} */
var features = {};
const features = {};
return this.replayGroup_.forEachFeatureAtCoordinate(coordinate,
context, viewState.center, viewState.resolution, viewState.rotation,
frameState.size, frameState.pixelRatio, layerState.opacity,
{},
/**
context, viewState.center, viewState.resolution, viewState.rotation,
frameState.size, frameState.pixelRatio, layerState.opacity,
{},
/**
* @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
var key = getUid(feature).toString();
if (!(key in features)) {
features[key] = true;
return callback.call(thisArg, feature, layer);
}
});
function(feature) {
const key = getUid(feature).toString();
if (!(key in features)) {
features[key] = true;
return callback.call(thisArg, feature, layer);
}
});
}
};
@@ -171,13 +171,13 @@ WebGLVectorLayerRenderer.prototype.hasFeatureAtCoordinate = function(coordinate,
if (!this.replayGroup_ || !this.layerState_) {
return false;
} else {
var context = this.mapRenderer.getContext();
var viewState = frameState.viewState;
var layerState = this.layerState_;
const context = this.mapRenderer.getContext();
const viewState = frameState.viewState;
const layerState = this.layerState_;
return this.replayGroup_.hasFeatureAtCoordinate(coordinate,
context, viewState.center, viewState.resolution, viewState.rotation,
frameState.size, frameState.pixelRatio, layerState.opacity,
frameState.skippedFeatureUids);
context, viewState.center, viewState.resolution, viewState.rotation,
frameState.size, frameState.pixelRatio, layerState.opacity,
frameState.skippedFeatureUids);
}
};
@@ -186,9 +186,9 @@ WebGLVectorLayerRenderer.prototype.hasFeatureAtCoordinate = function(coordinate,
* @inheritDoc
*/
WebGLVectorLayerRenderer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) {
var coordinate = _ol_transform_.apply(
frameState.pixelToCoordinateTransform, pixel.slice());
var hasFeature = this.hasFeatureAtCoordinate(coordinate, frameState);
const coordinate = _ol_transform_.apply(
frameState.pixelToCoordinateTransform, pixel.slice());
const hasFeature = this.hasFeatureAtCoordinate(coordinate, frameState);
if (hasFeature) {
return callback.call(thisArg, this.getLayer(), null);
@@ -212,34 +212,34 @@ WebGLVectorLayerRenderer.prototype.handleStyleImageChange_ = function(event) {
* @inheritDoc
*/
WebGLVectorLayerRenderer.prototype.prepareFrame = function(frameState, layerState, context) {
var vectorLayer = /** @type {ol.layer.Vector} */ (this.getLayer());
var vectorSource = vectorLayer.getSource();
const vectorLayer = /** @type {ol.layer.Vector} */ (this.getLayer());
const vectorSource = vectorLayer.getSource();
var animating = frameState.viewHints[ViewHint.ANIMATING];
var interacting = frameState.viewHints[ViewHint.INTERACTING];
var updateWhileAnimating = vectorLayer.getUpdateWhileAnimating();
var updateWhileInteracting = vectorLayer.getUpdateWhileInteracting();
const animating = frameState.viewHints[ViewHint.ANIMATING];
const interacting = frameState.viewHints[ViewHint.INTERACTING];
const updateWhileAnimating = vectorLayer.getUpdateWhileAnimating();
const updateWhileInteracting = vectorLayer.getUpdateWhileInteracting();
if (!this.dirty_ && (!updateWhileAnimating && animating) ||
(!updateWhileInteracting && interacting)) {
return true;
}
var frameStateExtent = frameState.extent;
var viewState = frameState.viewState;
var projection = viewState.projection;
var resolution = viewState.resolution;
var pixelRatio = frameState.pixelRatio;
var vectorLayerRevision = vectorLayer.getRevision();
var vectorLayerRenderBuffer = vectorLayer.getRenderBuffer();
var vectorLayerRenderOrder = vectorLayer.getRenderOrder();
const frameStateExtent = frameState.extent;
const viewState = frameState.viewState;
const projection = viewState.projection;
const resolution = viewState.resolution;
const pixelRatio = frameState.pixelRatio;
const vectorLayerRevision = vectorLayer.getRevision();
const vectorLayerRenderBuffer = vectorLayer.getRenderBuffer();
let vectorLayerRenderOrder = vectorLayer.getRenderOrder();
if (vectorLayerRenderOrder === undefined) {
vectorLayerRenderOrder = _ol_renderer_vector_.defaultOrder;
}
var extent = buffer(frameStateExtent,
vectorLayerRenderBuffer * resolution);
const extent = buffer(frameStateExtent,
vectorLayerRenderBuffer * resolution);
if (!this.dirty_ &&
this.renderedResolution_ == resolution &&
@@ -251,22 +251,22 @@ WebGLVectorLayerRenderer.prototype.prepareFrame = function(frameState, layerStat
if (this.replayGroup_) {
frameState.postRenderFunctions.push(
this.replayGroup_.getDeleteResourcesFunction(context));
this.replayGroup_.getDeleteResourcesFunction(context));
}
this.dirty_ = false;
var replayGroup = new _ol_render_webgl_ReplayGroup_(
_ol_renderer_vector_.getTolerance(resolution, pixelRatio),
extent, vectorLayer.getRenderBuffer());
const replayGroup = new _ol_render_webgl_ReplayGroup_(
_ol_renderer_vector_.getTolerance(resolution, pixelRatio),
extent, vectorLayer.getRenderBuffer());
vectorSource.loadFeatures(extent, resolution, projection);
/**
* @param {ol.Feature} feature Feature.
* @this {ol.renderer.webgl.VectorLayer}
*/
var renderFeature = function(feature) {
var styles;
var styleFunction = feature.getStyleFunction();
const renderFeature = function(feature) {
let styles;
let styleFunction = feature.getStyleFunction();
if (styleFunction) {
styles = styleFunction.call(feature, resolution);
} else {
@@ -276,21 +276,21 @@ WebGLVectorLayerRenderer.prototype.prepareFrame = function(frameState, layerStat
}
}
if (styles) {
var dirty = this.renderFeature(
feature, resolution, pixelRatio, styles, replayGroup);
const dirty = this.renderFeature(
feature, resolution, pixelRatio, styles, replayGroup);
this.dirty_ = this.dirty_ || dirty;
}
};
if (vectorLayerRenderOrder) {
/** @type {Array.<ol.Feature>} */
var features = [];
const features = [];
vectorSource.forEachFeatureInExtent(extent,
/**
/**
* @param {ol.Feature} feature Feature.
*/
function(feature) {
features.push(feature);
}, this);
function(feature) {
features.push(feature);
}, this);
features.sort(vectorLayerRenderOrder);
features.forEach(renderFeature.bind(this));
} else {
@@ -321,19 +321,19 @@ WebGLVectorLayerRenderer.prototype.renderFeature = function(feature, resolution,
if (!styles) {
return false;
}
var loading = false;
let loading = false;
if (Array.isArray(styles)) {
for (var i = styles.length - 1, ii = 0; i >= ii; --i) {
for (let i = styles.length - 1, ii = 0; i >= ii; --i) {
loading = _ol_renderer_vector_.renderFeature(
replayGroup, feature, styles[i],
_ol_renderer_vector_.getSquaredTolerance(resolution, pixelRatio),
this.handleStyleImageChange_, this) || loading;
replayGroup, feature, styles[i],
_ol_renderer_vector_.getSquaredTolerance(resolution, pixelRatio),
this.handleStyleImageChange_, this) || loading;
}
} else {
loading = _ol_renderer_vector_.renderFeature(
replayGroup, feature, styles,
_ol_renderer_vector_.getSquaredTolerance(resolution, pixelRatio),
this.handleStyleImageChange_, this) || loading;
replayGroup, feature, styles,
_ol_renderer_vector_.getSquaredTolerance(resolution, pixelRatio),
this.handleStyleImageChange_, this) || loading;
}
return loading;
};
src/ol/renderer/webgl/defaultmapshader.js
+1 -1
View File
@@ -4,7 +4,7 @@
import {DEBUG_WEBGL} from '../../index.js';
import _ol_webgl_Fragment_ from '../../webgl/Fragment.js';
import _ol_webgl_Vertex_ from '../../webgl/Vertex.js';
var _ol_renderer_webgl_defaultmapshader_ = {};
const _ol_renderer_webgl_defaultmapshader_ = {};
_ol_renderer_webgl_defaultmapshader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
'precision mediump float;\nvarying vec2 v_texCoord;\n\n\nuniform float u_opacity;\nuniform sampler2D u_texture;\n\nvoid main(void) {\n vec4 texColor = texture2D(u_texture, v_texCoord);\n gl_FragColor.rgb = texColor.rgb;\n gl_FragColor.a = texColor.a * u_opacity;\n}\n' :
src/ol/renderer/webgl/defaultmapshader/Locations.js
+7 -7
View File
@@ -10,43 +10,43 @@ import {DEBUG_WEBGL} from '../../../index.js';
* @param {WebGLProgram} program Program.
* @struct
*/
var _ol_renderer_webgl_defaultmapshader_Locations_ = function(gl, program) {
const _ol_renderer_webgl_defaultmapshader_Locations_ = function(gl, program) {
/**
* @type {WebGLUniformLocation}
*/
this.u_texCoordMatrix = gl.getUniformLocation(
program, DEBUG_WEBGL ? 'u_texCoordMatrix' : 'd');
program, DEBUG_WEBGL ? 'u_texCoordMatrix' : 'd');
/**
* @type {WebGLUniformLocation}
*/
this.u_projectionMatrix = gl.getUniformLocation(
program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'e');
program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'e');
/**
* @type {WebGLUniformLocation}
*/
this.u_opacity = gl.getUniformLocation(
program, DEBUG_WEBGL ? 'u_opacity' : 'f');
program, DEBUG_WEBGL ? 'u_opacity' : 'f');
/**
* @type {WebGLUniformLocation}
*/
this.u_texture = gl.getUniformLocation(
program, DEBUG_WEBGL ? 'u_texture' : 'g');
program, DEBUG_WEBGL ? 'u_texture' : 'g');
/**
* @type {number}
*/
this.a_position = gl.getAttribLocation(
program, DEBUG_WEBGL ? 'a_position' : 'b');
program, DEBUG_WEBGL ? 'a_position' : 'b');
/**
* @type {number}
*/
this.a_texCoord = gl.getAttribLocation(
program, DEBUG_WEBGL ? 'a_texCoord' : 'c');
program, DEBUG_WEBGL ? 'a_texCoord' : 'c');
};
export default _ol_renderer_webgl_defaultmapshader_Locations_;
src/ol/renderer/webgl/tilelayershader.js
+1 -1
View File
@@ -4,7 +4,7 @@
import {DEBUG_WEBGL} from '../../index.js';
import _ol_webgl_Fragment_ from '../../webgl/Fragment.js';
import _ol_webgl_Vertex_ from '../../webgl/Vertex.js';
var _ol_renderer_webgl_tilelayershader_ = {};
const _ol_renderer_webgl_tilelayershader_ = {};
_ol_renderer_webgl_tilelayershader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
'precision mediump float;\nvarying vec2 v_texCoord;\n\n\nuniform sampler2D u_texture;\n\nvoid main(void) {\n gl_FragColor = texture2D(u_texture, v_texCoord);\n}\n' :
src/ol/renderer/webgl/tilelayershader/Locations.js
+5 -5
View File
@@ -10,31 +10,31 @@ import {DEBUG_WEBGL} from '../../../index.js';
* @param {WebGLProgram} program Program.
* @struct
*/
var _ol_renderer_webgl_tilelayershader_Locations_ = function(gl, program) {
const _ol_renderer_webgl_tilelayershader_Locations_ = function(gl, program) {
/**
* @type {WebGLUniformLocation}
*/
this.u_tileOffset = gl.getUniformLocation(
program, DEBUG_WEBGL ? 'u_tileOffset' : 'd');
program, DEBUG_WEBGL ? 'u_tileOffset' : 'd');
/**
* @type {WebGLUniformLocation}
*/
this.u_texture = gl.getUniformLocation(
program, DEBUG_WEBGL ? 'u_texture' : 'e');
program, DEBUG_WEBGL ? 'u_texture' : 'e');
/**
* @type {number}
*/
this.a_position = gl.getAttribLocation(
program, DEBUG_WEBGL ? 'a_position' : 'b');
program, DEBUG_WEBGL ? 'a_position' : 'b');
/**
* @type {number}
*/
this.a_texCoord = gl.getAttribLocation(
program, DEBUG_WEBGL ? 'a_texCoord' : 'c');
program, DEBUG_WEBGL ? 'a_texCoord' : 'c');
};
export default _ol_renderer_webgl_tilelayershader_Locations_;