Having trouble getting the labels in the center of my MultiLineString geojson. Anyone have a code sample to help with this?
var promise = Cesium.GeoJsonDataSource.load(‘l.geojson’,
{
stroke: Cesium.Color.BLACK.withAlpha(0.5),
fill: Cesium.Color.BLACK.withAlpha(0.5),
strokeWidth: 3
});
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var position =
entity.polyline.positions.getValue(viewer.clock.currentTime)[0];
entity.position = position;
entity.label = {
text: entity.name,
font : ‘14pt monospace’,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 3,
verticalOrigin : Cesium.VerticalOrigin.CENTER,
pixelOffset : new Cesium.Cartesian2(0, 0)
};
entity.label.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
}
});Enter code here…
``
Hi,
The first thing I would try is the label.horizontalOrigin property, setting it to Cesium.HorizontalOrigin.CENTER.
The next thing I would try is computing the position of the labels from the polyline (multiLineString in GeoJSON) property, and adding the label as it’s own entity.
var promise = Cesium.GeoJsonDataSource.load(‘l.geojson’, {
stroke: Cesium.Color.BLACK.withAlpha(0.5),
fill: Cesium.Color.BLACK.withAlpha(0.5),
strokeWidth: 3
});
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
if (defined(entity.polyline)) {
// Get a bounding sphere that contains all polyline positions and get the center
var positions = entity.polyline.positions.getValue(viewer.clock.currentTime);
var boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
var origin = boundingSphere.center;
viewer.entities.add({
position : origin,
label : {
text : entity.name
},
font : ‘14pt monospace’,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 3,
// Other styling options
});
}
}
});
``
Thanks,
Gabby