fixed render prepration
This commit is contained in:
parent
d88acc08f3
commit
9f79ce924d
@ -22,9 +22,10 @@
|
||||
<script>
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: true,
|
||||
center: [0, 0],
|
||||
//center: [0, 0],
|
||||
center: [36.60670888641815, 38.627929687],
|
||||
//center: [60.20639271653636, 25.004882812],
|
||||
zoom: 3
|
||||
zoom: 6
|
||||
});
|
||||
|
||||
|
||||
@ -54,33 +55,51 @@
|
||||
canvas.width = canvas.width;
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
for(var t in this._tiles) {
|
||||
var tile = this._tiles[t];
|
||||
var pos = this.getTilePos(tile.coord);
|
||||
var accum = this.renderer.accumulate(tile, this.key);
|
||||
ctx.setTransform(1, 0, 0, 1, pos.x, pos.y);
|
||||
this.renderer.renderTileAccum(accum, 0, 0);
|
||||
//ctx.setTransform(1, 0, 0, 1, pos.x, pos.y);
|
||||
}
|
||||
|
||||
|
||||
//ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
/*
|
||||
for(var t in this._tiles) {
|
||||
var tile = this._tiles[t];
|
||||
var pos = this.getTilePos(tile.coord);
|
||||
ctx.setTransform(1, 0, 0, 1, pos.x, pos.y);
|
||||
this.renderer.renderTile(tile, this.key, pos.x, pos.y);
|
||||
}
|
||||
}*/
|
||||
},
|
||||
|
||||
setKey: function(t) {
|
||||
this.key = [t];
|
||||
this.redraw();
|
||||
},
|
||||
setKeys: function(t) {
|
||||
this.key = t;
|
||||
this.redraw();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
L.tileLayer('http://b.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/999/256/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
//type=DATASET
|
||||
var GBIF_URL = 'http://apidev.gbif.org/map/density/tile/density/tile.tcjson?key=1&x={x}&y={y}&z={z}&type=TAXON'
|
||||
//var GBIF_URL = 'http://apidev.gbif.org/map/density/tile/density/tile.tcjson?key=1&x={x}&y={y}&z={z}&type=DATASET'
|
||||
//var GBIF_URL = 'http://apidev.gbif.org/map/density/tile.tcjson?key=8575f23e-f762-11e1-a439-00145eb45e9a&x={x}&y={y}&z={z}&type=DATASET'
|
||||
var GBIF_URL = 'http://apidev.gbif.org/map/density/tile/density/tile.tcjson?key=1&x={x}&y={y}&z={z}&type=TAXON'
|
||||
var torqueLayer = new L.TorqueLayer({
|
||||
//url: 'http://development.localhost.lan:8080/api/v1/sql',
|
||||
url: GBIF_URL,
|
||||
resolution: 2,
|
||||
resolution: 4,
|
||||
cummulative: true,
|
||||
start_date: 0,
|
||||
end_date: 220,
|
||||
@ -93,7 +112,7 @@ var GBIF_URL = 'http://apidev.gbif.org/map/density/tile/density/tile.tcjson?key=
|
||||
|
||||
torqueLayer.addTo(map);
|
||||
|
||||
torqueLayer.setKey(0);
|
||||
torqueLayer.setKeys([11]);
|
||||
var t = 0;
|
||||
setInterval(function() {
|
||||
//torqueLayer.setKey(2 + (t++%11));
|
||||
|
@ -63,23 +63,24 @@
|
||||
for (r = 0; r < rows.length; ++r) {
|
||||
var row = rows[r];
|
||||
dates += row.times.length;
|
||||
maxDateSlots = Math.max(maxDateSlots, row.times.length);
|
||||
for(var d = 0; d < row.times.length; ++d) {
|
||||
maxDateSlots = Math.max(maxDateSlots, row.times[d]);
|
||||
}
|
||||
}
|
||||
console.log(maxDateSlots);
|
||||
|
||||
// reserve memory for all the dates
|
||||
var timeIndex = new Int32Array(maxDateSlots); //index-size
|
||||
var timeCount = new Int32Array(maxDateSlots);
|
||||
var timeIndex = new Int32Array(maxDateSlots + 1); //index-size
|
||||
var timeCount = new Int32Array(maxDateSlots + 1);
|
||||
var renderData = new Uint8Array(dates);
|
||||
var renderDataPos = new Uint32Array(dates);
|
||||
|
||||
var rowsPerSlot = [];
|
||||
var rowsPerSlot = {};
|
||||
|
||||
// precache pixel positions
|
||||
for (var r = 0; r < rows.length; ++r) {
|
||||
var row = rows[r];
|
||||
x[r] = row.x;
|
||||
y[r] = 255 - row.y;
|
||||
y[r] = row.y;
|
||||
|
||||
var dates = row.times;
|
||||
var vals = row.values;
|
||||
@ -92,7 +93,8 @@
|
||||
// for each timeslot search active buckets
|
||||
var renderDataIndex = 0;
|
||||
var timeSlotIndex = 0;
|
||||
for(var i = 0; i < maxDateSlots; ++i) {
|
||||
var i = 0;
|
||||
for(var i = 0; i <= maxDateSlots; ++i) {
|
||||
var c = 0;
|
||||
var slotRows = rowsPerSlot[i]
|
||||
if(slotRows) {
|
||||
|
@ -2,8 +2,25 @@
|
||||
exports.torque = exports.torque || {};
|
||||
exports.torque.renderer = exports.torque.renderer || {};
|
||||
|
||||
|
||||
function palette(slots) {
|
||||
var conds = []
|
||||
for(var i = slots.length - 1; i >= 0; --i) {
|
||||
conds.push("if( x >= " + slots[i] + ") return " + (i + 1) + ";");
|
||||
}
|
||||
conds.push("return 0;");
|
||||
var body = conds.join('\n');
|
||||
return new Function("x", body);
|
||||
}
|
||||
|
||||
|
||||
var pal = palette([10, 100, 1000, 10000, 100000]);
|
||||
console.log(pal(0), pal(11));
|
||||
|
||||
var TAU = Math.PI * 2;
|
||||
var DEFAULT_COLORS = [
|
||||
"#FFFF00", "#FFCC00", "#FF9900", "#FF6600", "#FF3300", "#CC0000"
|
||||
/*
|
||||
"#FEE391",
|
||||
"#FEC44F",
|
||||
"#FE9929",
|
||||
@ -11,6 +28,7 @@
|
||||
"#CC4C02",
|
||||
"#993404",
|
||||
"#662506"
|
||||
*/
|
||||
];
|
||||
|
||||
function hexToRgb(hex) {
|
||||
@ -38,6 +56,48 @@
|
||||
}
|
||||
|
||||
RectanbleRenderer.prototype = {
|
||||
|
||||
accumulate: function(tile, keys) {
|
||||
var x, y, posIdx, p, k, key, activePixels, pixelIndex;
|
||||
var res = this.options.resolution;
|
||||
var s = 256/res;
|
||||
var accum = new Float32Array(s*s);
|
||||
|
||||
for(k = 0; k < keys.length; ++k) {
|
||||
key = keys[k];
|
||||
activePixels = tile.timeCount[key];
|
||||
if(activePixels) {
|
||||
pixelIndex = tile.timeIndex[key];
|
||||
for(p = 0; p < activePixels; ++p) {
|
||||
posIdx = tile.renderDataPos[pixelIndex + p];
|
||||
x = tile.x[posIdx]/res;
|
||||
y = tile.y[posIdx]/res;
|
||||
accum[x*s + y] += tile.renderData[pixelIndex + p];
|
||||
}
|
||||
}
|
||||
}
|
||||
return accum;
|
||||
},
|
||||
|
||||
renderTileAccum: function(accum, px, py) {
|
||||
var res = this.options.resolution;
|
||||
var ctx = this._ctx;
|
||||
var s = (256/res) | 0;
|
||||
var s2 = s*s;
|
||||
var colors = this._colors;
|
||||
for(var i = 0; i < s2; ++i) {
|
||||
var xy = i;
|
||||
var value = accum[i];
|
||||
if(value) {
|
||||
var x = (xy/s) | 0;
|
||||
var y = xy % s;
|
||||
var color = colors[pal(value)];//Math.min(value|0, colors.length - 1)];
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x * res, 255 - y * res, res, res);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//
|
||||
// renders a tile in the canvas for key defined in
|
||||
// the torque tile
|
||||
@ -50,8 +110,8 @@
|
||||
//var prof = Profiler.get('render').start();
|
||||
var ctx = this._ctx;
|
||||
var colors = this._colors;
|
||||
var activePixels = tile.timeCount[key];
|
||||
if(activePixels) {
|
||||
var activepixels = tile.timeCount[key];
|
||||
if(activepixels) {
|
||||
var w = this._canvas.width;
|
||||
var h = this._canvas.height;
|
||||
//var imageData = ctx.getImageData(0, 0, w, h);
|
||||
@ -66,7 +126,7 @@
|
||||
var y = tile.y[posIdx]; //+ py;
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x, y, 2*res, 2*res);
|
||||
ctx.fillRect(x, y, res, res);
|
||||
/*
|
||||
|
||||
for(var xx = 0; xx < res; ++xx) {
|
||||
|
Loading…
Reference in New Issue
Block a user