From 3a9f47b9f289e32965b59664cebd2ae7c7755e2f Mon Sep 17 00:00:00 2001 From: Stuart Lynn Date: Wed, 9 Sep 2015 14:45:36 -0400 Subject: [PATCH] adding vector renderer for torque --- lib/torque/renderer/cartocss_render.js | 29 ++++++++++++++++++++++++-- lib/torque/renderer/point.js | 18 +++++++++------- 2 files changed, 38 insertions(+), 9 deletions(-) diff --git a/lib/torque/renderer/cartocss_render.js b/lib/torque/renderer/cartocss_render.js index 5688b43..71ab37c 100644 --- a/lib/torque/renderer/cartocss_render.js +++ b/lib/torque/renderer/cartocss_render.js @@ -1,7 +1,7 @@ var TAU = Math.PI*2; - // min value to render a line. + // min value to render a line. // it does not make sense to render a line of a width is not even visible - var LINEWIDTH_MIN_VALUE = 0.05; + var LINEWIDTH_MIN_VALUE = 0.05; var MAX_SPRITE_RADIUS = 255; function renderPoint(ctx, st) { @@ -42,6 +42,30 @@ } } + function renderVector(ctx, st){ + var angle = st['marker-angle'] + var color = st['marker-stroke'] + var mag = st['marker-mag'] + var max_mag = st['marker-max-mag'] ? st['marker-max-mag'] : 10 + var max_line_length = st['marker-width'] + + var scaled_mag = (mag/max_mag)*max_line_length + + ctx.lineWidth = 1 + + // ctx.strokeStyle='green' + // ctx.strokeRect(-max_line_length,-max_line_length,max_line_length*2,max_line_length*2) + ctx.translate(max_line_length/2.0, -max_line_length/2.0) + ctx.rotate(angle) + ctx.strokeStyle = color + ctx.moveTo(0,-max_line_length*2) + ctx.lineTo(0,max_line_length*2) + ctx.stroke(); + + + } + + function renderRectangle(ctx, st) { ctx.fillStyle = st['marker-fill']; var pixel_size = st['marker-width']; @@ -87,5 +111,6 @@ module.exports = { renderPoint: renderPoint, renderSprite: renderSprite, renderRectangle: renderRectangle, + renderVector: renderVector, MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS }; diff --git a/lib/torque/renderer/point.js b/lib/torque/renderer/point.js index 9e6007d..aded367 100644 --- a/lib/torque/renderer/point.js +++ b/lib/torque/renderer/point.js @@ -57,7 +57,7 @@ var Filters = require('./torque_filters'); this.TILE_SIZE = 256; this._style = null; this._gradients = {}; - + this._forcePoints = false; } @@ -94,6 +94,7 @@ var Filters = require('./torque_filters'); setShader: function(shader) { // clean sprites + this._sprites = []; this._shader = shader; this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 }); @@ -155,7 +156,10 @@ var Filters = require('./torque_filters'); var mt = st['marker-type']; if (mt && mt === 'rectangle') { cartocss.renderRectangle(ctx, st); - } else { + } else if(mt && mt === 'vector') { + cartocss.renderVector(ctx,st); + } + else{ cartocss.renderPoint(ctx, st); } } @@ -165,7 +169,7 @@ var Filters = require('./torque_filters'); i.src = canvas.toDataURL(); return i; } - + return canvas; }, @@ -193,7 +197,7 @@ var Filters = require('./torque_filters'); } } } - + prof.end(true); return callback && callback(null); @@ -237,7 +241,7 @@ var Filters = require('./torque_filters'); }, // - // renders a tile in the canvas for key defined in + // renders a tile in the canvas for key defined in // the torque tile // _renderTile: function(tile, key, frame_offset, sprites, shader, shaderVars) { @@ -274,7 +278,7 @@ var Filters = require('./torque_filters'); } } } - + prof.end(true); }, @@ -425,7 +429,7 @@ var Filters = require('./torque_filters'); } gradient = {}; var colorize = this._style['image-filters'].args; - + var increment = 1/colorize.length; for (var i = 0; i < colorize.length; i++){ var key = increment * i + increment;