[Feature Request] How to Extrude height for GeoJson Data source while using vuecesium

[awanalauddin]

VueCesium version

2.2.7

OS/Browsers version

Google Chrome (Version 93.0.4577.82 (Official Build) (64-bit)) Windows 10

Vue version

2.6.11

Cesium version

1.85.0

Reproduction Link

https://github.com/awanalauddin/vuecesiumGeoJson.git

Steps to reproduce

Greetings!

This repository includes 2 components. The component being displayed now is ces.vue I have loaded a geojson file from the public directory and displayed it on the OSM. Until this step, everything is working fine.

Now I need to add the functionality of extruding height as being displayed here https://sandcastle.cesium.com/?src=GeoJSON%20and%20TopoJSON.html Kindly guide me on how to do it like this.

What is Expected?

GeoJson features with extruded height and displayed as 3D objects on the map.

What is actually happening?

GeoJson features clamped to ground displayed as 2D on the map.

[zouyaoji]

Please refer to the code below:

    subReady(cesiumInstance) {
      console.log(
        cesiumInstance.cesiumObject.entities.values[0].polygon,
        'entities'
      );
      cesiumInstance.viewer.zoomTo(cesiumInstance.cesiumObject);
      const { cesiumObject: dataSource } = cesiumInstance;
      //Get the array of entities
      var entities = dataSource.entities.values;

      var colorHash = {};
      for (var i = 0; i < entities.length; i++) {
        //For each entity, create a random color based on the state name.
        //Some states have multiple entities, so we store the color in a
        //hash so that we use the same color for the entire state.
        var entity = entities[i];
        var name = entity.name;
        var color = colorHash[name];
        if (!color) {
          // eslint-disable-next-line no-undef
          color = Cesium.Color.fromRandom({
            alpha: 1.0,
          });
          colorHash[name] = color;
        }

        //Set the polygon material to our random color.
        entity.polygon.material = color;
        //Remove the outlines.
        entity.polygon.outline = false;

        //Extrude the polygon based on the state's population.  Each entity
        //stores the properties for the GeoJSON feature it was created from
        //Since the population is a huge number, we divide by 50.
        entity.polygon.extrudedHeight = 25;
      }
    },

Cesium has been introduced globally. You can add Cesium as a global variable in eslintConfig

[awanalauddin]

Thank you so much for the quick response @zouyaoji . It worked.