Published
Edited
Feb 17, 2018
1 fork
1 star
map = {
const context = this ? this.getContext("2d") : DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
let resolutionScale = window.devicePixelRatio || 1
context.clearRect(0, 0, width * resolutionScale, height * resolutionScale);
let idShaded = context.createImageData(width * resolutionScale, height * resolutionScale);
let dataShaded = idShaded.data;
var posShaded = 0;
for(let j = 0; j < height * resolutionScale; j++){
for(let i = 0; i < width * resolutionScale; i++){
let pointCoords = projection.invert([i/resolutionScale,j/resolutionScale]);
let px = swissDemData['invGeoTransform'][0] + pointCoords[0]* swissDemData['invGeoTransform'][1];
let py = swissDemData['invGeoTransform'][3] + pointCoords[1] * swissDemData['invGeoTransform'][5];
let shadedValue;
if(Math.floor(px) >= 0 && Math.ceil(px) < swissDemData['xSize'] && Math.floor(py) >= 0 && Math.ceil(py) < swissDemData['ySize']){
shadedValue = 255*(1+hillshadeData[Math.floor(py)][Math.floor(px)])/2;
} else {
shadedValue = 255;
}
dataShaded[posShaded] = 0;
dataShaded[posShaded+1] = 0;
dataShaded[posShaded+2] = 0;
dataShaded[posShaded+3] = 255 - shadedValue;
posShaded=posShaded+4;
}
}
context.putImageData( idShaded, 0, 0);
context.lineWidth = 2;
context.beginPath(), path(borders), context.stroke();
return context.canvas;
}
hillshadeData = {
var gpu = new GPU() ;
const kernel = gpu.createKernel(hillshade)
.setConstants({ azimuth: azimuth, angleAltitude: angleAltitude, xSize: swissDemData.xSize, ySize: swissDemData.ySize })
//.setOutput([swissDemData.xSize, swissDemData.ySize]);
.setOutput([swissDemData.xSize, swissDemData.ySize]);
//return kernel(GPU.input(swissDemData.data, [swissDemData.xSize, swissDemData.ySize]));
return kernel(GPU.input(swissDemData.data, [swissDemData.xSize, swissDemData.ySize-1]));
}
function hillshade(demData) {
let azimuthrad = this.constants.azimuth * 0.017453292519943295;
let altituderad = this.constants.angleAltitude * 0.017453292519943295;
let gradX, gradY;
if(this.thread.x==0) gradX = demData[this.thread.y][this.thread.x+1] - demData[this.thread.y][this.thread.x];
else if(this.thread.x==this.constants.xSize-1) gradX = demData[this.thread.y][this.thread.x] - demData[this.thread.y][this.thread.x-1];
else gradX = (demData[this.thread.y][this.thread.x+1] - demData[this.thread.y][this.thread.x])/2 + (demData[this.thread.y][this.thread.x] - demData[this.thread.y][this.thread.x-1])/2;
if(this.thread.y==0) gradY = demData[this.thread.y+1][this.thread.x] - demData[this.thread.y][this.thread.x];
else if(this.thread.y==this.constants.ySize-1) gradY = demData[this.thread.y][this.thread.x] - demData[this.thread.y-1][this.thread.x];
else gradY = (demData[this.thread.y+1][this.thread.x] - demData[this.thread.y][this.thread.x])/2 + (demData[this.thread.y][this.thread.x] - demData[this.thread.y-1][this.thread.x])/2;
let slope = 3.141593/2 - Math.atan(Math.sqrt(gradX*gradX + gradY*gradY));
let aspect = Math.atan(-gradY, gradX); //should be atan2, but not working!
return Math.sin(altituderad) * Math.sin(slope)
+ Math.cos(altituderad) * Math.cos(slope)
* Math.cos(azimuthrad - aspect);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
