Convert GeoJson Polyline entity to Polyline Volume

Hello,

I am wondering if there’s any way to convert a GeoJson polyline into a polyline volume.

Thanks,

Peter

//Example 2: Load lines with entity specific styling options.

Sandcastle.addToolbarButton(‘Lines with entity styling’, function() {

var promise = Cesium.GeoJsonDataSource.load(’…/…/SampleData/Noise_Walls_Lines_Interpolated_WGS84_Symbols.geojson’, {

clampToGround : false,

//extrudedHeight : 300.0,

width : 10.0,

cornerType: Cesium.CornerType.MITERED,

material : Cesium.Color.GREEN

});

console.log(‘adding data’);

promise.then(function(dataSource) {

viewer.dataSources.add(dataSource);

//Get the array of entities

var entities = dataSource.entities.values;

for (var i = 0; i < entities.length; i++)

{

//Set the height and the material of each polyline

var entity = entities[i];

//entity.polygon.width = 10;

if(entity.properties.Type == ‘Proposed Wall’) {

entity.polyline.material = Cesium.Color.YELLOW;

}

if(entity.properties.Type == ‘Not Proposed Wall’) {

entity.polyline.material = Cesium.Color.DEEPSKYBLUE;

}

if(entity.properties.Type == ‘Existing Wall - Reconstructed’) {

entity.polyline.material = Cesium.Color.DARKVIOLET;

}

if(entity.properties.Type == ‘Existing Wall - Remain Unchanged’) {

entity.polyline.material = Cesium.Color.DEEPPINK;

}

}

}).otherwise(function(error){

//Display any errrors encountered while loading.

window.alert(error);

});

});

//Reset the scene when switching demos.

Sandcastle.reset = function() {

viewer.dataSources.removeAll();

//Set the camera to a US centered tilted view and switch back to moving in world coordinates.

viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(-93.18813759, 45.13918514,), new Cesium.Cartesian3(0.0, 0.0, 10000.0));

viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

};

Noise_Walls_Lines_Interpolated_WGS84_Symbols.geojson (1.64 MB)

You just need to create a polylineVolume on the entity in addition to the default polyline (so they can be seen from above).

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var promise = Cesium.GeoJsonDataSource.load(’…/…/SampleData/Noise_Walls_Lines_Interpolated_WGS84_Symbols.geojson’, {

clampToGround : false,

//extrudedHeight : 300.0,

width : 10.0,

cornerType: Cesium.CornerType.MITERED,

material : Cesium.Color.GREEN

});

console.log(‘adding data’);

promise.then(function(dataSource) {

viewer.dataSources.add(dataSource);

//Get the array of entities

var entities = dataSource.entities.values;

for (var i = 0; i < entities.length; i++)

{

//Set the height and the material of each polyline

var entity = entities[i];

entity.polylineVolume = new Cesium.PolylineVolumeGraphics({

positions: entity.polyline.positions,

shape: [

new Cesium.Cartesian2( 0.3, entity.properties.Height),

new Cesium.Cartesian2( 0.3, 0.0),

new Cesium.Cartesian2(-0.3, entity.properties.Height),

new Cesium.Cartesian2(-0.3, 0.0)

],

material: Cesium.Color.RED

});

if (entity.properties.Type == ‘Proposed Wall’) {

entity.polyline.material = Cesium.Color.YELLOW;

entity.polylineVolume.material = Cesium.Color.YELLOW;

}

if (entity.properties.Type == ‘Not Proposed Wall’) {

entity.polyline.material = Cesium.Color.DEEPSKYBLUE;

entity.polylineVolume.material = Cesium.Color.DEEPSKYBLUE;

}

if (entity.properties.Type == ‘Existing Wall - Reconstructed’) {

entity.polyline.material = Cesium.Color.DARKVIOLET;

entity.polylineVolume.material = Cesium.Color.DARKVIOLET;

}

if (entity.properties.Type == ‘Existing Wall - Remain Unchanged’) {

entity.polyline.material = Cesium.Color.DEEPPINK;

entity.polylineVolume.material = Cesium.Color.DEEPPINK;

}

viewer.zoomTo(entities);

}

}).otherwise(function(error){

//Display any errors encountered while loading.

window.alert(error);

});

``

Thank you so much! That was exactly what i was looking for!

  • Peter