Adding labels to GeoJSON with Entity API

CesiumJS
1

I’m attempting to add labels to each entity via a GeoJSON.

dataSource.load(geojson).then(function() {
// Get array of entities
var entities = dataSource["_entityCollection"]["_entities"]["_array"];

                    for (var i = 0; i < entities.length; i++) {
                        var entity = entities[i];
                        var id = entity.id;

                        var material;
                        var outline;
                        var label;

                        if (entity.properties.vinculado === 0){
                            material = Cesium.Color.RED.withAlpha(0.5);
                            outline = Cesium.Color.BLACK;
                            entity.polygon.material = new Cesium.ColorMaterialProperty(material);
                            entity.polygon.outlineColor = new Cesium.ColorMaterialProperty(outline);
                            entity.polygon.outline = true;

                            var center = Cesium.BoundingSphere.fromPoints(entity.polygon.hierarchy.value.positions.getValue()).center;
                            Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(center, center);
                            entity.position = new Cesium.ConstantPositionProperty(center);

                            label = new Cesium.LabelGraphics({
                                text: entity.properties.id,
                                font : '24px Helvetica',
                                fillColor : Cesium.Color.SKYBLUE,
                                outlineColor : Cesium.Color.BLACK,
                                outlineWidth : 2,
                                style : Cesium.LabelStyle.FILL_AND_OUTLINE,
                                verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                                pixelOffset : new Cesium.Cartesian2(0, -9),
                                show: true
                            });

                            entity.label = label;

                        } else {
                            material = Cesium.Color.GREEN.withAlpha(0.5);
                            outline = Cesium.Color.BLACK.withAlpha(0.9);
                            entity.polygon.material =  new Cesium.ColorMaterialProperty(material);
                            entity.polygon.outlineColor =  new Cesium.ColorMaterialProperty(outline);
                            entity.polygon.outline = true;

                            var center = Cesium.BoundingSphere.fromPoints(entity.polygon.hierarchy.value.positions.getValue()).center;
                            Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(center, center);
                            entity.position = new Cesium.ConstantPositionProperty(center);

                            label = new Cesium.LabelGraphics({
                                text: entity.properties.id,
                                font : '24px Helvetica',
                                fillColor : Cesium.Color.SKYBLUE,
                                outlineColor : Cesium.Color.BLACK,
                                outlineWidth : 2,
                                style : Cesium.LabelStyle.FILL_AND_OUTLINE,
                                verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                                pixelOffset : new Cesium.Cartesian2(0, -9),
                                show: true
                            });

                            entity.label = label;
                           
                        }
                       
                    }
            });

``

Unfortunately, it’s not adding labels or coloring all of the polygons as specified:

I assume it has to do with the

entity.polygon.hierarchy

``

&

entity.label & entity.position

``

Any thoughts on why this would be happening?

2

I updated the position of the entities while maintaining the color for the polygons:

dataSource.load(geojson).then(function() {
// Get array of entities
var entities = dataSource["_entityCollection"]["_entities"]["_array"];

                    for (var i = 0; i < entities.length; i++) {
                        var entity = entities[i];
                        var id = entity.id;

                        var material;
                        var outline;
                        var label;
                        var center;

                        var positions;

                        if (entity.properties.vinculado === 0){
                            material = Cesium.Color.RED.withAlpha(0.5);
                            outline = Cesium.Color.BLACK;
                            entity.polygon.material = new Cesium.ColorMaterialProperty(material);
                            entity.polygon.outlineColor = new Cesium.ColorMaterialProperty(outline);
                            entity.polygon.extrudedHeight = 100;
                            entity.polygon.outline = true;

                            positions = entity.polygon.hierarchy['_value'].positions;
                            center = Cesium.BoundingSphere.fromPoints(positions).center;
                            Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(center, center);
                            entity.position = new Cesium.ConstantPositionProperty(center);

                        } else {
                            material = Cesium.Color.GREEN.withAlpha(0.5);
                            outline = Cesium.Color.BLACK.withAlpha(0.9);
                            entity.polygon.material =  new Cesium.ColorMaterialProperty(material);
                            entity.polygon.outlineColor =  new Cesium.ColorMaterialProperty(outline);
                            // entity.polygon.extrudedHeight = 200;
                            entity.polygon.outline = true;

                            positions = entity.polygon.hierarchy['_value'].positions;
                            center = Cesium.BoundingSphere.fromPoints(positions).center;
                            Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(center, center);
                            entity.position = new Cesium.ConstantPositionProperty(center);
                           
                           
                        }
                            console.log(entity);
                       
                       
                    }
            });

``

The only part I can’t figure out at this point is how to add the labels. When I attempt to add the labels using this code:

dataSource.load(geojson).then(function() {

// Get array of entities

var entities = dataSource["_entityCollection"]["_entities"]["_array"];

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

var entity = entities[i];

var id = entity.id;

var material;

var outline;

var label;

var center;

var positions;

if (entity.properties.vinculado === 0){

material = Cesium.Color.RED.withAlpha(0.5);

outline = Cesium.Color.BLACK;

entity.polygon.material = new Cesium.ColorMaterialProperty(material);

entity.polygon.outlineColor = new Cesium.ColorMaterialProperty(outline);

entity.polygon.extrudedHeight = 100;

entity.polygon.outline = true;

positions = entity.polygon.hierarchy[’_value’].positions;

center = Cesium.BoundingSphere.fromPoints(positions).center;

Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(center, center);

entity.position = new Cesium.ConstantPositionProperty(center);

label = new Cesium.LabelGraphics({

text: entity.properties.id,

font : ‘24px Helvetica’,

fillColor : Cesium.Color.SKYBLUE,

outlineColor : Cesium.Color.BLACK,

outlineWidth : 2,

style : Cesium.LabelStyle.FILL_AND_OUTLINE,

verticalOrigin : Cesium.VerticalOrigin.BOTTOM,

pixelOffset : new Cesium.Cartesian2(0, -9)

});

entity.label = label;

} else {

material = Cesium.Color.GREEN.withAlpha(0.5);

outline = Cesium.Color.BLACK.withAlpha(0.9);

entity.polygon.material = new Cesium.ColorMaterialProperty(material);

entity.polygon.outlineColor = new Cesium.ColorMaterialProperty(outline);

// entity.polygon.extrudedHeight = 200;

entity.polygon.outline = true;

positions = entity.polygon.hierarchy[’_value’].positions;

center = Cesium.BoundingSphere.fromPoints(positions).center;

Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(center, center);

entity.position = new Cesium.ConstantPositionProperty(center);

label = new Cesium.LabelGraphics({

text: entity.properties.id,

font : ‘24px Helvetica’,

fillColor : Cesium.Color.SKYBLUE,

outlineColor : Cesium.Color.BLACK,

outlineWidth : 2,

style : Cesium.LabelStyle.FILL_AND_OUTLINE,

verticalOrigin : Cesium.VerticalOrigin.BOTTOM,

pixelOffset : new Cesium.Cartesian2(0, -9)

});

entity.label = label;

}

console.log(entity);

}

});

``

I receive this error message:

Any thoughts?

3

Figured it out… No need to create a new Cesium.LabelGraphics() with the Entity API

dataSource.load(geojson).then(function() {
// Get array of entities
var entities = dataSource["_entityCollection"]["_entities"]["_array"];

                    for (var i = 0; i < entities.length; i++) {
                        var entity = entities[i];
                        var id = entity.id;

                        var material;
                        var outline;
                        var label;
                        var center;

                        var positions;

                        if (entity.properties.vinculado === 0){
                            material = Cesium.Color.RED.withAlpha(0.5);
                            outline = Cesium.Color.BLACK;
                            entity.polygon.material = new Cesium.ColorMaterialProperty(material);
                            entity.polygon.outlineColor = new Cesium.ColorMaterialProperty(outline);
                            entity.polygon.extrudedHeight = 100;
                            entity.polygon.outline = true;

                            positions = entity.polygon.hierarchy['_value'].positions;
                            console.log(positions);
                            center = Cesium.BoundingSphere.fromPoints(positions).center;
                            Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(center, center);
                            entity.position = new Cesium.ConstantPositionProperty(center);
                           

                        } else {
                            material = Cesium.Color.GREEN.withAlpha(0.5);
                            outline = Cesium.Color.BLACK.withAlpha(0.9);
                            entity.polygon.material =  new Cesium.ColorMaterialProperty(material);
                            entity.polygon.outlineColor =  new Cesium.ColorMaterialProperty(outline);
                            // entity.polygon.extrudedHeight = 200;
                            entity.polygon.outline = true;

                            positions = entity.polygon.hierarchy['_value'].positions;
                            console.log(positions);
                            center = Cesium.BoundingSphere.fromPoints(positions).center;
                            Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(center, center);
                            entity.position = new Cesium.ConstantPositionProperty(center);
                           
                        }

                        label = {
                            text: entity['_properties'].sister_predio,
                            font : '12px Helvetica',
                            fillColor : Cesium.Color.WHITE,
                            outlineColor : Cesium.Color.BLACK,
                            outlineWidth : 4,
                            style : Cesium.LabelStyle.FILL_AND_OUTLINE,
                            verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                            pixelOffset : new Cesium.Cartesian2(0, -9)
                        };

                        entity.label = label;
                        console.log(entity);
                       
                       
                    }
            });

``

2 Likes