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>
有什么方法可以在 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>