Showing Attributes of a GeoJSON data source with labels in Cesium
General
JavaScript
CesiumJS
  • loads a geojson file into the scene
  • adds LabelCollection and populate the collection with the attributes available in GeoJSON file

loads a geojson file into the scene
adds LabelCollection and populate the collection with the attributes available in GeoJSON file

Description :

Simple Expression :
const entities = dataSource.entities.values;
const labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
  for( let i=0 ; i<=entities.length ; i++) {
        //...
        labels.add({
          position : entityposition,
          text : entityname,
        });
    } 
Example :
const viewer = new Cesium.Viewer("cesiumContainer");

const promise = Cesium.GeoJsonDataSource.load("../SampleData/simplestyles.geojson");

promise.then(function (dataSource) {
    viewer.dataSources.add(dataSource);

    //Get the array of entities
    const entities = dataSource.entities.values;
    const labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
    for( let i=0 ; i<=entities.length ; i++) {
        const myentity = entities[i];
        const pos = myentity.position._value;
        const entityposition = new Cesium.Cartesian3(pos.x, pos.y, pos.z);
        const entityname = myentity.name;
        labels.add({
          position : entityposition,
          text : entityname,
        });
    } 
  })
  .catch(function (error) {
    //Display any errrors encountered while loading.
    window.alert(error);
  });
2025 Jan