Trouble styling and hiding entity's paths

CesiumJS
1

Hi all, my goal is to show arcs above the surface of the earth connecting two points. I have achieved this by emulating this example:

I am now experiencing two style issues

  1. Changing an entities “show” field ONLY changes the visibility of the point which is traveling along the path, it does NOT change the visibility of the path.

  2. ALL of the paths are the same color, regardless of what color I set them to. I have stepped through this code and verified many times that the rgb color values I’m passing in are distinct and valid, but every time, all of the paths assume ONE color. Interestingly enough, all of the points are assigned the correct color. Also, occasionally, when I programatically hide some lines, all of lines change to a different color at once.

I’ve included a code snippet below, which is pretty much just the sandcastle example code (big shout out to that person for the example); I’ve omitted my location calculations but that is all good and fine so far.

var startTime = that.map.viewer.clock.startTime;

var midTime = Cesium.JulianDate.addSeconds(startTime, 43200, new Cesium.JulianDate());

var stopTime = Cesium.JulianDate.addSeconds(startTime, 86400, new Cesium.JulianDate());

// CODE FOR CALCULATING POSITION (which I don’t have any issues with) GOES HERE

var color = that.getRelationshipColorByType(rel.Type, RelationshipService.CESIUM_COLOR);

// Create a straight-line path.

var property = new Cesium.SampledPositionProperty();

var startPosition = Cesium.Cartesian3.fromDegrees(leftLocation.Longitude, leftLocation.Latitude, 0);

property.addSample(startTime, startPosition);

var stopPosition = Cesium.Cartesian3.fromDegrees(rightLocation.Longitude, rightLocation.Latitude, 0);

property.addSample(stopTime, stopPosition);

// Find the midpoint of the straight path, and raise its altitude.

var midPoint = Cesium.Cartographic.fromCartesian(property.getValue(midTime));

midPoint.height = Cesium.Math.nextRandomNumber() * 500000 + 2500000;

var midPosition = that.map.viewer.scene.globe.ellipsoid.cartographicToCartesian(

midPoint, new Cesium.Cartesian3());

// Redo the path to be the new arc.

property = new Cesium.SampledPositionProperty();

property.addSample(startTime, startPosition);

property.addSample(midTime, midPosition);

property.addSample(stopTime, stopPosition);

if ((leftLocation != null) && (rightLocation != null)) {

/* Update or create an Entity to show the arc */

// If this is already an entity, simply update it

if ((<cesium.Viewer>that.map.viewer).entities.getById(rel.Id) != null) {

var entity: cesium.Entity = (<cesium.Viewer>that.map.viewer).entities.getById(rel.Id);

entity.position = property;

}

// If it is not an entity, add it

else {

var arcEntity = that.map.viewer.entities.add({

id: rel.Id,

position: property,

// The point is optional, I just wanted to see it.

point: {

pixelSize: 8,

color: Cesium.Color.TRANSPARENT,

outlineColor: color,

outlineWidth: 3

},

// This path shows the arc as a polyline.

path: {

show: that.showRelationships,

resolution: 1200,

material: new Cesium.PolylineGlowMaterialProperty({

glowPower: 0.16,

color: color

}),

width: 10,

leadTime: 1e10,

trailTime: 1e10

}

});

}

// This is where it becomes a smooth path.

arcEntity.position.setInterpolationOptions({

interpolationDegree: 5,

interpolationAlgorithm: Cesium.LagrangePolynomialApproximation

});

Any help or pointers as to why my process might produce entities with the same color lines or lines that don’t like to be hidden or shown would be greatly appreicated! I am using Cesium 1.28 .

2

Update: I am also able to manually edit the color variable per entity creation within the Chrome dev tools and can confirm that the color still only applies to the point traveling along the path, while all of the paths themselves remain one color.

3

Hello,

I couldn’t reproduce either of the problems you are seeing using the code example you provided

I was able to hide all of the paths and points using this code:

viewer.entities.values.forEach(function(entity) {
    entity.show = false;
});

``

Try clearing your cache/cookies. Sometimes that can cause weird side effects. If that doesn’t work, try upgrading to the latest version of Cesium.

Otherwise, what browser and OS are you using? And what is your graphics card?

Best,

Hannah

4

Thank you for looking into it Hannah! Clearing the cache and cookies didn’t seem to help… I will also point out that I am able to hide the lines if I execute that code in the scope of their instantiation using the entity objects I’ve created, but my code that is called back later is not hiding the whole entity. That code that hides it uses getById to retrieve an entity from my viewer.entities, that TypeScript is below:

var arcEntity: cesium.Entity = (<cesium.Viewer>this.map.viewer).entities.getById(rel.Id);

arcEntity.show = false;

``

I am also about to update Cesium and see if that helps at all. Still looking into coloring issue as well.

5

Problem solved by updating to Cesium 1.30!!! It’s possible that it could’ve been related to this: https://github.com/AnalyticalGraphicsInc/cesium/issues/898 “Investigate potential issues with duplicate polyline vertices”. My entities were seperate arc entiites with their own paths but were all connected, like the path of a bouncing ball. In any case, thanks for the suggestion Hannah, it saved my day!

6

Hey, I recognize that issue/thread! Not entirely sure if it’d be related here, but that was a fun issue to track down and report :slight_smile: