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

Speed up rendering by not using alpha

Browse Source
This commit is contained in:
Andreas Hocevar
2019-10-30 14:36:23 +01:00
parent 7097a4c6ba
commit 4b13c6dae0
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/ol/render/canvas/hitdetect.js
View File

@@ -62,7 +62,10 @@ export function createHitDetectionImageData(size, transforms, features, styleFun
const image = originalStyle.getImage(); const image = originalStyle.getImage();
if (image) { if (image) {
const imgSize = image.getImageSize(); const imgSize = image.getImageSize();
const imgContext = createCanvasContext2D(imgSize[0], imgSize[1]); const canvas = document.createElement('canvas');
canvas.width = imgSize[0];
canvas.height = imgSize[1];
const imgContext = canvas.getContext('2d', {alpha: false});
imgContext.fillStyle = color; imgContext.fillStyle = color;
const img = imgContext.canvas; const img = imgContext.canvas;
imgContext.fillRect(0, 0, img.width, img.height); imgContext.fillRect(0, 0, img.width, img.height);
@@ -133,13 +136,10 @@ export function hitDetect(pixel, features, imageData) {
const r = imageData.data[index]; const r = imageData.data[index];
const g = imageData.data[index + 1]; const g = imageData.data[index + 1];
const b = imageData.data[index + 2]; const b = imageData.data[index + 2];
const a = imageData.data[index + 3]; const i = b + (256 * (g + (256 * r)));
if (a === 255) { const indexFactor = Math.ceil((256 * 256 * 256) / features.length);
const i = b + (256 * (g + (256 * r))); if (i % indexFactor === 0) {
const indexFactor = Math.ceil((256 * 256 * 256) / features.length); resultFeatures.push(features[i / indexFactor]);
if (i % indexFactor === 0) {
resultFeatures.push(features[i / indexFactor]);
}
} }
} }
return resultFeatures; return resultFeatures;

10
src/ol/renderer/canvas/VectorTileLayer.js
View File

@@ -430,10 +430,9 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
} }
const extent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord); const extent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
const corner = getTopLeft(extent); const corner = getTopLeft(extent);
const renderScale = tileGrid.getResolution(tileCoord[0]) / resolution;
const tilePixel = [ const tilePixel = [
(coordinate[0] - corner[0]) / resolution / renderScale, (coordinate[0] - corner[0]) / resolution,
(corner[1] - coordinate[1]) / resolution / renderScale (corner[1] - coordinate[1]) / resolution
]; ];
const features = tile.getSourceTiles().reduce(function(accumulator, sourceTile) { const features = tile.getSourceTiles().reduce(function(accumulator, sourceTile) {
return accumulator.concat(sourceTile.getFeatures()); return accumulator.concat(sourceTile.getFeatures());
@@ -444,12 +443,13 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
const rotation = this.renderedRotation_; const rotation = this.renderedRotation_;
const transforms = [ const transforms = [
this.getRenderTransform(tileGrid.getTileCoordCenter(tile.wrappedTileCoord), this.getRenderTransform(tileGrid.getTileCoordCenter(tile.wrappedTileCoord),
resolution * renderScale, 0, 0.5, size[0], size[1], 0) resolution, 0, 0.5, size[0], size[1], 0)
]; ];
requestAnimationFrame(function() { requestAnimationFrame(function() {
tile.hitDetectionImageData = createHitDetectionImageData(tileSize, transforms, tile.hitDetectionImageData = createHitDetectionImageData(tileSize, transforms,
features, layer.getStyleFunction(), features, layer.getStyleFunction(),
tileGrid.getTileCoordExtent(tile.wrappedTileCoord), resolution, rotation); tileGrid.getTileCoordExtent(tile.wrappedTileCoord),
tile.getReplayState(layer).renderedResolution, rotation);
resolve(hitDetect(tilePixel, features, tile.hitDetectionImageData)); resolve(hitDetect(tilePixel, features, tile.hitDetectionImageData));
}); });
} else { } else {