Adding 3D (or 2.5D) image overlay

CesiumJS
1

Hey there,

Does anyone have any advice about the best way to add an 2.5D data overlay to the map (e.g. a visualization with a z coordinate per pixel, creating a terrain or 3D model)? For example, you can imagine a heatmap where intensity is also elevation. Should this be a custom graphical primitive added to the map, or would it need to be converted into the terrain format, or is there another approach that would be best?

–j

2

Hi Josh,

I think it should be pretty straightforward to do this by writing a custom TerrainProvider whose requestTileGeometry method returns and instance of HeightmapTerrainData. You’ll be representing your surface as terrain, but you don’t need to conform to Cesium’s terrain format in order to do so.

Kevin

3

Josh - give Kevin’s idea a shot. If that doesn’t fit your needs, you can draw a polyline per pixel.

Patrick

4

在 2013年3月23日星期六UTC-4下午12时54分40秒，Patrick Cozzi写道：

Josh - give Kevin's idea a shot. If that doesn't fit your needs, you can draw a polyline per pixel.

Patrick

Hi Patrick, thanks for your comment, I tried to draw small segments of polyline for the heatmap, but the map will be extremely slow...

-R

5

Hi Kevin,

Thanks for your idea. I am a beginner on Cesium, what I want to do is to create a heatmap layer from my custom data. I was wondering if you could give an example of creating a custom TerrainProvider? Thank you very much.

-Renyuan

6

Renyuan,

For the polylines, are you using SimplePolylineGeometry? See https://cesiumjs.org/2013/11/04/Geometry-and-Appearances/

Patrick

7

Hi Patrick,

Thanks for reply! I am trying to use SimplePolylineGeometry, here is my modified code from the sandcastle:

var testPositions = ;
var testColors = ;
    //draw heatmap in the range of upper left (-77.381, 38.983) to lower right (-76.892, 38.864)
    for(var i=-77381; i < -76892; i++){
        for(var k=38983; k > 38864; k--){
            testPositions.push(Cesium.Cartesian3.fromDegreesArray([
                i/1000.0, k/1000.0,
                (i+10)/1000.0, (k+10)/1000.0
            ]));
            testColors.push(Cesium.Color.fromRandom({alpha : 1.0}));
            
        }
    }

var testpolyline = new Cesium.GeometryInstance({
    geometry: new Cesium.SimplePolylineGeometry({
        positions: testPositions,
        colors:testColors,
        followSurface: false
    })
});

primitives.add(new Cesium.Primitive({
    geometryInstances : testpolyline,
    appearance : new Cesium.PerInstanceColorAppearance({
        flat : true,
        renderState : {
            depthTest : {
                enabled : true
            },
            lineWidth : Math.min(2.0, scene.maximumAliasedLineWidth)
        }
    })
}));

However, the polylines do not show up and there's no error reported. Am I doing this in a correct way?

8

Try starting with a more simple example, perhaps this one: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Simple%20Polyline.html&label=Geometries

Patrick