From 472daa6ffa06ee17f0ab36f2d279f57bab18a3d7 Mon Sep 17 00:00:00 2001 From: Francisco Dans Date: Thu, 20 Aug 2015 12:37:55 +0200 Subject: [PATCH] caches isolines, improves performance --- lib/torque/leaflet/torque.js | 9 ++-- lib/torque/renderer/point.js | 84 +++++------------------------------- 2 files changed, 17 insertions(+), 76 deletions(-) diff --git a/lib/torque/leaflet/torque.js b/lib/torque/leaflet/torque.js index 9ec4d32..89b21d1 100644 --- a/lib/torque/leaflet/torque.js +++ b/lib/torque/leaflet/torque.js @@ -229,7 +229,6 @@ L.TorqueLayer = L.CanvasLayer.extend({ } this.renderer.tileDimensions = {w: min.w.size, h: min.h.size}; this.renderer.firstTileCoords = {coord: this._tiles[min.k].coord, pos:this.getTilePos(this._tiles[min.k].coord)}; - ctx.setTransform(1, 0, 0, 1, this.renderer.firstTileCoords.pos.x, this.renderer.firstTileCoords.pos.y); var valsPerTile = 256/this.options.resolution; this.renderer.globalGrid = Array.apply(null, Array(this.renderer.tileDimensions.h * valsPerTile)).map(Number.prototype.valueOf,0); @@ -250,13 +249,17 @@ L.TorqueLayer = L.CanvasLayer.extend({ if (tile._tileCache) { // when the tile has a cached image just render it and avoid to render // all the points - //this.renderer._ctx.drawImage(tile._tileCache, 0, 0); + ctx.setTransform(1, 0, 0, 1, pos.x, pos.y); + this.renderer._ctx.drawImage(tile._tileCache, 0, 0); } else { + ctx.setTransform(1, 0, 0, 1, this.renderer.firstTileCoords.pos.x, this.renderer.firstTileCoords.pos.y); this.renderer.renderTile(tile, this.key, pos); } } } - this.renderer.applyFilters(); + if (!tile._tileCache){ + this.renderer.applyFilters(); + } } // prepare caches if the animation is not running diff --git a/lib/torque/renderer/point.js b/lib/torque/renderer/point.js index b0787ab..cbd8388 100644 --- a/lib/torque/renderer/point.js +++ b/lib/torque/renderer/point.js @@ -5,6 +5,7 @@ var carto = global.carto || require('carto'); var Filters = require('./torque_filters'); var d3 = require('d3'); var contour = require('./contour'); +var cSpline = require('cardinal-spline'); var TAU = Math.PI * 2; var DEFAULT_CARTOCSS = [ @@ -200,14 +201,6 @@ var contour = require('./contour'); */ var isolines = true; if (isolines) { - function getRandomColor() { - var letters = '0123456789ABCDEF'.split(''); - var color = '#'; - for (var i = 0; i < 6; i++ ) { - color += letters[Math.floor(Math.random() * 16)]; - } - return color; - } this._gridData(tile); } prof.end(true); @@ -215,15 +208,18 @@ var contour = require('./contour'); _gridData: function(tile){ var valsPerTile = this.TILE_SIZE/this.options.resolution; + var difX = tile.coord.x - this.firstTileCoords.coord.x; + var difY = tile.coord.y - this.firstTileCoords.coord.y; + if (difX < 0 || difY < 0) return; // baseIndex is the distance to the upper left corner of the grid, in cells var baseIndex = { - x: (tile.coord.x - this.firstTileCoords.coord.x) * valsPerTile, - y: (tile.coord.y - this.firstTileCoords.coord.y) * valsPerTile + x: (difX) * valsPerTile, + y: (difY) * valsPerTile } for(var i = 0; i < tile.renderData.length; i++){ var x = tile.x[i], y = tile.y[i]; - this.globalGrid[baseIndex.y + (256 - y)/this.options.resolution-1][baseIndex.x + x/this.options.resolution] = tile.renderData[i]; + this.globalGrid[baseIndex.y + (256 - y) / this.options.resolution -1][baseIndex.x + x/this.options.resolution] = tile.renderData[i]; } }, @@ -236,27 +232,18 @@ var contour = require('./contour'); }).join(""); var type = parseInt(parsedCell, 2); var interpolated = true; - var N = interpolated?[this._lerp(cell[1], cell[0], contour), 0]: [0.5,0], - S = interpolated?[this._lerp(cell[2], cell[3], contour), 1]: [0.5,1], - E = interpolated?[1, this._lerp(cell[2], cell[1], contour)]: [1,0.5], - W = interpolated?[0, this._lerp(cell[3], cell[0], contour)]: [0,0.5] - // Blank + var N = interpolated? [this._lerp(cell[1], cell[0], contour), 0]: [0.5,0], + S = interpolated? [this._lerp(cell[2], cell[3], contour), 1]: [0.5,1], + E = interpolated? [1, this._lerp(cell[2], cell[1], contour)]: [1,0.5], + W = interpolated? [0, this._lerp(cell[3], cell[0], contour)]: [0,0.5] if (type === 0 || type === 15) return null; - // W - S if (type === 1 || type === 14) return [W, S] - // S - E if (type === 2 || type === 13) return [S, E] - // W - E if (type === 3 || type === 12) return [W, E] - // N - E if (type === 4 || type === 11) return [N, E] - // N - S if (type === 6 || type === 9) return [N, S] - // W - N if (type === 7 || type === 8) return [W, N] - // W - N / S - E if (type === 5) return [W, N, S, E] - // W - S / N - E if (type === 10) return [W, S, N, E] }, @@ -387,55 +374,6 @@ var contour = require('./contour'); } }, - drawIsolines: function(){ - if (this.globalGrid.length > 0) { - var style = this._shader.getLayers()[1].getStyle({}, {zoom: 2}); - var cellsY = this.globalGrid.length-1; - var contourValues = [0, 4, 8, 16, 32, 64, 128]; - var ctx = this._ctx; - var res = this.options.resolution; - var startPos = this.firstTileCoords.pos; - ctx.strokeStyle = style["-isoline-line-color"] || "black"; - ctx.lineWidth = style["-isoline-line-width"] || 2; - ctx.globalAlpha = style["-isoline-line-opacity"] || 0.8; - var grad = style["-isoline-line-ramp"] && this._generateGradient(style["-isoline-line-ramp"].args); - for (var c = 0; c < contourValues.length; c++) { - if(style["-isoline-line-decay"]){ - var max = contourValues[contourValues.length - 1]; - ctx.globalAlpha = (contourValues[c]/max)*(style["-isoline-line-opacity"] || 0.8); - } - if(grad){ - ctx.strokeStyle = "rgb("+grad[4*contourValues[c]+1]+","+grad[4*contourValues[c]+2]+","+grad[4*contourValues[c]+3]+")"; - } - for (var y = 0; y < cellsY; y++) { - for (var x = 0; x < this.globalGrid[y].length-1; x++){ - var currentCell = [ - this.globalGrid[y][x], - this.globalGrid[y][x+1], - this.globalGrid[y+1][x+1], - this.globalGrid[y+1][x] - ]; - var pipe = this._getPipe(currentCell, contourValues[c]); - if (pipe){ - ctx.beginPath(); - ctx.moveTo(res * (x + 0.5 + pipe[0][0]), res * (y + 0.5 + pipe[0][1])); - ctx.lineTo(res * (x + 0.5 + pipe[1][0]), res * (y + 0.5 + pipe[1][1])); - ctx.stroke(); - if (pipe.length === 4){ - ctx.beginPath(); - ctx.moveTo(res * (x + 0.5 + pipe[2][0]), res * (y + 0.5 + pipe[2][1])); - ctx.lineTo(res * (x + 0.5 + pipe[3][0]), res * (y + 0.5 + pipe[3][1])); - ctx.stroke(); - } - } - - } - } - } - ctx.globalAlpha = 0; - } - }, - _generateGradient: function(ramp){ var gradientCanvas = this._createCanvas(), gctx = gradientCanvas.getContext('2d'),