CesiumJS: How to extrude “LineString” GeoJSON data?

Question

I just started exploring CesiumJS and I want to extrude my GeoJSON building data.

To my understanding thus far, extrudeHeight seems to only work for Polygons. However, my data are in "LineString" format.

The attached codes beneath shows what I have tried so far. May I know what am I doing wrong here? Would greatly appreciate any kind of help I can get!

dataSource1.loadUrl('data/buildings.json').then(function(loadedDatasource) {
            viewer.dataSources.add(loadedDatasource);
            var entities = loadedDatasource.entities.entities;
            var colorHash = {};
            for (var i = 0; i < 1; i++) {
                var entity = entities[i];
                entity.polyline = new Cesium.ColorMaterialProperty.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 0));
                entity.polyline.outlineColor = new Cesium.ConstantProperty(new Cesium.Color(1, 1, 1, 0.48));
                entity.polyline.outlineWidth = new Cesium.ConstantProperty(0.5);
                entity.polyline.outline = true;
                entity.polyline.extrudedHeight = new Cesium.ConstantProperty(entity.properties.buildingLevels * 5.0);
                entity.building = true;
            }
        }

GeoJSON:

{"type":"Feature","geometry":{"type":"LineString","coordinates":[[103.8518324,1.2843096],[103.8522078,1.284276],[103.8522253,1.2842654],[103.8522361,1.2842455],[103.8522209,1.2840604],[103.8521175,1.2840652],[103.8521138,1.2840226],[103.8518128,1.2840482],[103.851781,1.2840535],[103.8517572,1.2840662],[103.8517338,1.2840891],[103.8517138,1.2841128],[103.8517016,1.2841443],[103.851698,1.2841847],[103.8517047,1.2842194],[103.8517208,1.2842492],[103.8517546,1.2842777],[103.851795,1.2842959],[103.8518285,1.2842935],[103.8518324,1.2843096]]},"properties":{"name":"Chevron House","height":"151","building":"yes","old_name":"Caltex House","wikidata":"Q2934405","addr:city":"Singapore","min_height":"16","addr:street":"Raffles Place","roof:colour":"#f9fdfe","addr:country":"SG","addr:postcode":"039803","building:colour":"#f9fdfe","buildingLevels":"33","addr:housenumber":"30","building:min_level":"3"}}

Answer 1

You can convert your LineString's in to Polygons, with turf.js

var line = {
  "type": "Feature",
  "geometry": {
    "type": "LineString",
    "coordinates": [ [ 0,0 ], [ 0,1 ], [ 1,1 ], [ 1,0 ] ]
  }
};

var polygon = turf.lineToPolygon(line);

or do it manually, because geojson is very simple format:

var crd = line.geometry.coordinates;
var last = c.length - 1; 
if (crd[0][0] !== crd[last][0] || crd[0][1] !== crd[last][1]) {
    crd.push(crd[0]);
}
line.geometry.type = 'Polygon';
line.geometry.coordinates = [crd];

Answer 2

I think you should use Cesium Corridor, as below :

var json = {"type":"Feature","geometry":{"type":"LineString","coordinates":[[103.8518324,1.2843096],[103.8522078,1.284276],[103.8522253,1.2842654],[103.8522361,1.2842455],[103.8522209,1.2840604],[103.8521175,1.2840652],[103.8521138,1.2840226],[103.8518128,1.2840482],[103.851781,1.2840535],[103.8517572,1.2840662],[103.8517338,1.2840891],[103.8517138,1.2841128],[103.8517016,1.2841443],[103.851698,1.2841847],[103.8517047,1.2842194],[103.8517208,1.2842492],[103.8517546,1.2842777],[103.851795,1.2842959],[103.8518285,1.2842935],[103.8518324,1.2843096]]},"properties":{"name":"Chevron House","height":"151","building":"yes","old_name":"Caltex House","wikidata":"Q2934405","addr:city":"Singapore","min_height":"16","addr:street":"Raffles Place","roof:colour":"#f9fdfe","addr:country":"SG","addr:postcode":"039803","building:colour":"#f9fdfe","buildingLevels":"33","addr:housenumber":"30","building:min_level":"3"}};


var Corridor = viewer.entities.add({
        corridor : {
        positions : Cesium.Cartesian3.fromDegreesArray(json.geometry.coordinates.flat()),
        height : 100.0,
        extrudedHeight : json.properties.buildingLevels * 5.0,
        width : 1.0,
        cornerType: Cesium.CornerType.BEVELED,
        material : Cesium.Color.BLUE.withAlpha(0.5),
        outline : true, // height or extrudedHeight must be set for outlines to display
        outlineColor : Cesium.Color.WHITE
    }
});

Working example