How to solve the label overlapping problem

CesiumJS
1

Hi Team,
I’ve big labels data to show on the map everythings are working fine but it’s overlapping one to another , i just want to filter it and add on the map so that texts are visible clearly. i’ve not found any suitable solution on cesium community pls try to solve the problem. Label added on the map is given in attached image.

labelOverLapping
labelOverLapping843×534 146 KB

Applid code:-
this.viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(x, y),
label: {
text: lbl,
font: “14px Helvetica”,
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.CYAN,
outlineWidth: .5,
opacity: 1,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
pixelOffset: Cesium.Cartesian2(10, 50),
eyeOffset: Cesium.Cartesian3(0.0, 1500.0, 0.0),
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BASELINE,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
clampToGround: true,
},
});

I went to many given solution which is not working to me are given below: - @https://community.cesium.com/t/overlapping-labels/4771@https://community.cesium.com/t/how-to-fix-the-problem-that-label-be-covered-by-billboard/12652, @Cesium Sandcastle, @labels problem, @ NearFarScalar - Cesium Documentation

Thanks
Shashi Verma

2

Hi @Shashi,

why is the solution in this sandcastle given by @hannah not working for you? It seems that it does exactly what you want (hide/combine labels to the number of labels combined), if the labels are close.

What behaviour of labels do you want?

Best, Lennart

1 Like
3

Hi @lennart.imberg
I’ve tried given sandcastle but it’s not removing the overlapped labels even in @hannah code it’s adding labels only not removing overlapped one.
You cab see in given images it’s still overlapping I’ve modified in @hannah code: -
var viewer = new Cesium.Viewer(“cesiumContainer”);
var image = new Image();
image.onload = function () {
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
billboard: {
position: Cesium.Cartesian3.fromDegrees(
-75.1641667,
39.9522222
),
//image: image,
scale: 10,
},
label: {
text: “Label on top of scaling billboard”,
font: “20px sans-serif”,
//disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.1641667, 38.9522222),
billboard: {
position: Cesium.Cartesian3.fromDegrees(
-75.1641667,
38.9522222
),
//image: image,
scale: 10,
},
label: {
text: “Billboard”,
font: “20px sans-serif”,
//disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
};
image.src = “…/images/facility.gif”;

Hanna
Hanna918×414 52 KB

What i want please check google earth pro, no one text is overlapping here(https://earth.google.com/web/@28.67201907,77.22013734,216.34567561a,7836.86032998d,35y,8.170709h,55.13867993t,0r)

And here i’ve all india level data so i just want to remove overlapped data from the globe like google.
I’ve used @hannah code here : -

labelOverLapping
labelOverLapping843×534 146 KB

4

I just noticed, that maybe I linked the wrong sandcastle, sorry for that!
Try this one: Clustering - Cesium Sandcastle

1 Like
5

@lennart.imberg
Thanks for quick response, I’m aware about clustering we’re working on it but pls provide me any other solution simpler than clustering if possible.

6

Hey,
the only other solution comming into my mind would be to use “fade out by distance” with different fading distances per label. But this is much more complicated (if you have massive data) than just clustering. There is an sandcastle where you can see the fading, when you select the appropriate setting in the drop down menu: Labels - Cesium Sandcastle

1 Like
7

@lennart.imberg
Thanks for your help and suggestions i’ll let u know once i achieve the task.

8

@lennart.imberg
I’m trying to implement Clustering - Cesium Sandcastle.
In this code sample Cesium is adding .kml file to show the labels. But it’s very difficult to find that which column using to get the labels values or how getting the values from the .kml file to show the labels on the globe.
In my case i’m getting the JSON data from the api in given format :
[{lbl_nme: ‘Jantar Mantar’, x: 76.965828, y: 25.626267},{lbl_nme: ‘Arun Jaitley Stadium’, x: 73.243565, y: 25.589648}, {lbl_nme: ‘Maulana Azad Medical College’, x: 75.785946, y: 25.369582}].
Can u please help me how i can use my JSON data to cluster it.

9

@Shashi
It seems like you get an array of objects, so you could create your own customDataSource with clustering enabled and iterate through your json data to fill in the data as entitties. If enabled, clustering is done automaticly with the given settings.

At least I think you could do it that way, but I didn’t do it on my own until now. :wink:

But maybe it’s possible to get the data as geoJson or kml and use the buildin functionalites?

1 Like
10

okay thanks let me try

11

@lennart.imberg
it’s working thank u so much.