[SOLVED] Cesium Get color of picked entity to compare

Cesium Get color of picked entity to compare

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.

Solution

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>