Custom drawing on globe surface

CesiumJS
1

Hi, I would like to know, can i use some webgl code for drawing on earth globe surface?
Something like this:
var ctx = this.canvas.getContext('2d');
var g = ctx.createRadialGradient(x, y, 0, x, y, radius);
var a = 1 / 10;
g.addColorStop(0, 'rgba(255,255,255,' + a + ')');
g.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = g;
ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);

2

It depends on what you want to do. If you want to draw lines/polygons/shapes on the earth surface, you can do that using the Entity API, see this tutorial

If you want to draw custom imagery on a per-tile basis, then you want a custom imagery provider, but I’m guessing that’s not what you want.

You might also be interested in this example for interactive drawing. Code is available here: https://github.com/AnalyticalGraphicsInc/cesium-google-earth-examples

3

Thanks for reply. I just want add simple heatmap API for CesiumJS. As I understand it, this can't be done with entities.

4

If all you are doing is generating an image and drawing it on the globe, you can absolutely do it with entities by using a polygon or rectangle and assigning the material the generated canvas. I’ve actually been meaning to prototype something like that with heatmap.js for a while.

5

So, how can i get canvas context and globe surface for drawing circle entities with radial gradient?

6

Sounds like you want to create your own imagery provider, I just responded to a similar question in this thread: https://groups.google.com/d/msg/cesium-dev/o_b3m-gHAZA/tWSkma3syHMJ

If that’s not what you want, you can just create a canvas out of this air, draw on it, and then assign it as the material for any polygon you want, which is discussed in the tutorial I previously linked to up thread.

7

Yes, i did my own ImageryProvider. How can i add my class to cesium or rebuild cesium.js with my sources?

8

There’s no need to rebuild Cesium unless you are working on a standard implementation that you want to submit back to Cesium. You just include your imagery provider with the rest of your application code.

9

I get "Uncaught SyntaxError: Unexpected token . index.html:1" when i include my imagery provider.

index.html code: http://pastebin.com/f0su8wfM

HeatmapImageryProvider.js code: http://pastebin.com/PpRJbR4e

What i'm doing wrong?