Question

有没有办法在Cesium上获取被挑选实体的颜色？

基本上，我需要检查点击实体的颜色，如果是蓝色，则将其更改为红色，反之亦然。

有没有办法实现这个目标？提前谢谢。

Answer 1

是的，有一些警告：首先，Cesium实体本身没有颜色。它可以有一个点，该点可以有一个color和一个outlineColor，它也可以有一个带有自己颜色的标签等。

接下来，铯属性都可以是时间动态的或恒定的。因此，当您“获取”一个实体属性（如点颜色）时，通常应该传入viewer.clock.currentTime以获取特定时间的属性。如果您确定您获得的属性为ConstantProperty而非SampledProperty或TimeIntervalCollectionProperty，则无关紧要。

对于下面的演示，我隐式使用ConstantProperty来表示所有颜色和属性。我还压制了“SelectionIndicator”（点击实体时通常出现的绿色框），因为这种情况看起来很奇怪。

我正在使用selectedEntityChanged事件来指示某个点何时应该从蓝色变为红色或返回。 selectedEntityChanged事件是本月发布的Cesium 1.31中的新事件（2017年3月）。如果您的版本较旧且无法升级，则可以根据需要发布旧版本的解决方法。

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>

铯获取被挑选实体的颜色进行比较

1 个答案: