Cesium Get color of picked entity to compare - entity

Question

Is there any way to get color of picked entity on Cesium?
Basically, I need to check the color of clicked entity, if its blue, change it to red and vice-versa.
Is there any way to achieve this? Thanks in advance.

Answer 1

Yes, with some caveats: First, the Cesium entity itself doesn't have a color. It can have a point, and the point can have a color and an outlineColor, it may also have a label with its own color(s), etc.
Next, Cesium properties are all capable of being time-dynamic or constant. So when you "get" an entity property such as a point color, you should normally pass in viewer.clock.currentTime to get the property at a particular time. This doesn't matter if you know for certain that the property you're getting is a ConstantProperty and not a SampledProperty or a TimeIntervalCollectionProperty.
For the demo below, I'm using ConstantProperty implicitly for all colors and properties. I've also suppressed the "SelectionIndicator" (the green box that normally appears when you click on an entity), because it looks odd for this case.
I'm using the selectedEntityChanged event to indicate when a point should change from blue to red or back. The selectedEntityChanged event is new in Cesium 1.31 released this month (March 2017). If you have an older version and can't upgrade, there is a workaround for old versions that I can post if needed.
var viewer = new Cesium.Viewer('cesiumContainer', {
// Turn off nav help and stuff we're not using.
navigationInstructionsInitiallyVisible: false, animation: false, timeline: false,
// Optionally, you can turn off the green selection box, like this:
selectionIndicator : false,
// These next 6 lines are just to avoid Stack Snippet error messages.
imageryProvider : Cesium.createTileMapServiceImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
}),
baseLayerPicker : false,
geocoder : false,
infoBox : false
});
var dots = [
{ lon: -75, lat: 40 },
{ lon: -95, lat: 40 },
{ lon: -115, lat: 40 },
{ lon: -75, lat: 30 },
{ lon: -95, lat: 30 },
{ lon: -115, lat: 30 },
{ lon: -85, lat: 20 },
{ lon: -105, lat: 20 }
];
dots.forEach(function(dot) {
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(dot.lon, dot.lat),
point : {
pixelSize : 7,
color : Cesium.Color.STEELBLUE,
outlineColor : Cesium.Color.BLACK,
outlineWidth : 1.0
}
});
});
viewer.selectedEntityChanged.addEventListener(function(entity) {
// Check if an entity with a point color was selected.
if (Cesium.defined(entity) &&
Cesium.defined(entity.point) &&
Cesium.defined(entity.point.color)) {
// Get the current color
var color = entity.point.color.getValue(viewer.clock.currentTime);
// Test for blue
if (Cesium.Color.equals(color, Cesium.Color.STEELBLUE)) {
// Set to red
entity.point.color = Cesium.Color.RED;
}
// Test for red
else if (Cesium.Color.equals(color, Cesium.Color.RED)) {
// Set to red
entity.point.color = Cesium.Color.STEELBLUE;
}
}
});
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
font-family: sans-serif;
}
#message {
position: absolute;
top: 4px; left: 5px; color: #edffff;
}
<link href="http://cesiumjs.org/releases/1.31/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.31/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>
<div id="message">Single-click a dot to change its color.</div>