Cesium 获取选中实体的颜色进行比较

Cesium Get color of picked entity to compare

有什么方法可以在 Cesium 上获取所选实体的颜色吗?

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

有什么办法可以实现吗?提前致谢。

是的,但有一些注意事项:首先,Cesium 实体本身没有颜色。它可以有一个点,这个点可以有一个color和一个outlineColor,它也可以有一个带有自己颜色的标签,等等

接下来,Cesium 属性都可以是时间动态的或恒定的。所以当你 "get" 一个实体 属性 比如点颜色时,你通常应该传入 viewer.clock.currentTime 以获得特定时间的 属性 。如果您确定得到的 属性 是 ConstantProperty and not a SampledProperty or a TimeIntervalCollectionProperty.

,这并不重要

对于下面的演示,我为所有颜色和属性隐式使用了 ConstantProperty。我还抑制了 "SelectionIndicator"(当您单击实体时通常会出现的绿色框),因为在这种情况下它看起来很奇怪。

我正在使用 selectedEntityChanged 事件来指示某个点何时应从蓝色变为红色或变回红色。 selectedEntityChanged 事件是本月(2017 年 3 月)发布的 Cesium 1.31 中的新事件。如果您有旧版本且无法升级,如果需要,我可以 post 提供旧版本的解决方法。

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>