如何在Cesium的SampledProperty中定义属性类型
How to define property type in SampledProperty in Cesium
我正在使用 Cesiumjs 创建一个在某个区域周围移动的多边形。
为了显示它的运动,我尝试创建一个 sampledProperty
of PolygonHierarchy
。每个样本都是 Cartesian3
个位置的数组(我的多边形在每个时间步长的三个端点)。
我需要知道我在 sampledProperty
中使用的 property
的类型,正如 Cesiumjs 网站中提到的那样:Cesiumjs.org/SampledProperty。
但我不知道如何定义它,而且我在网站上找不到任何关于如何识别 属性 类型的解释,尤其是当每个样本本身就是一个属性数组时。
SampledProperty
在这里不起作用,因为它试图在您给它的点之间平滑地插值,但它不知道如何插值多边形层次结构。
因此,您可以使用 TimeIntervalCollectionProperty
。这里的区别是这个 属性 是按步骤动画的,而不是插值的,所以 属性 不需要知道如何构造控制点之间的中间值。
我制作了一个小演示,以展示它如何与多边形层次结构一起使用。单击底部的 Run Code Snippet
,或仅将 JavaScript 复制并粘贴到 Sandcastle。
var viewer = new Cesium.Viewer('cesiumContainer', {
navigationInstructionsInitiallyVisible: false
});
// Set up a limited range of time for this demo.
var time = Cesium.JulianDate.fromIso8601('2016-04-08T12:00:00Z');
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.startTime = time;
viewer.clock.currentTime = time;
viewer.clock.stopTime = Cesium.JulianDate.addSeconds(time, 20, new Cesium.JulianDate());
viewer.clock.multiplier = 1;
viewer.timeline.updateFromClock();
viewer.timeline.zoomTo(time, viewer.clock.stopTime);
// Construct a TimeIntervalCollection showing the changes to the hierarchy over time.
var hierarchy = new Cesium.TimeIntervalCollectionProperty();
for (var i = 0; i < 40; ++i) {
var nextTime = Cesium.JulianDate.addSeconds(time, 0.5, new Cesium.JulianDate());
// Inside the loop, per iteration we add one window of time for this polygon.
hierarchy.intervals.addInterval(new Cesium.TimeInterval({
start: time,
stop: nextTime,
isStartIncluded : true,
isStopIncluded : false,
data : Cesium.Cartesian3.fromDegreesArrayHeights([-108.0+i/4, 35.0, 100000,
-100.0+i/4, 35.0, 100000,
-100.0+i/4, 40.0, 100000,
-108.0+i/4, 40.0, 100000])
}));
time = nextTime;
}
// Create the polygon, using the animated hierarchy.
var orangePolygon = viewer.entities.add({
name : 'Orange polygon with time-varying position',
polygon : {
hierarchy : hierarchy,
extrudedHeight: 0,
perPositionHeight : true,
material : Cesium.Color.ORANGE.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.WHITE
}
});
viewer.zoomTo(viewer.entities);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
font-family: sans-serif;
}
<link href="http://cesiumjs.org/releases/1.19/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.19/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>
我正在使用 Cesiumjs 创建一个在某个区域周围移动的多边形。
为了显示它的运动,我尝试创建一个 sampledProperty
of PolygonHierarchy
。每个样本都是 Cartesian3
个位置的数组(我的多边形在每个时间步长的三个端点)。
我需要知道我在 sampledProperty
中使用的 property
的类型,正如 Cesiumjs 网站中提到的那样:Cesiumjs.org/SampledProperty。
但我不知道如何定义它,而且我在网站上找不到任何关于如何识别 属性 类型的解释,尤其是当每个样本本身就是一个属性数组时。
SampledProperty
在这里不起作用,因为它试图在您给它的点之间平滑地插值,但它不知道如何插值多边形层次结构。
因此,您可以使用 TimeIntervalCollectionProperty
。这里的区别是这个 属性 是按步骤动画的,而不是插值的,所以 属性 不需要知道如何构造控制点之间的中间值。
我制作了一个小演示,以展示它如何与多边形层次结构一起使用。单击底部的 Run Code Snippet
,或仅将 JavaScript 复制并粘贴到 Sandcastle。
var viewer = new Cesium.Viewer('cesiumContainer', {
navigationInstructionsInitiallyVisible: false
});
// Set up a limited range of time for this demo.
var time = Cesium.JulianDate.fromIso8601('2016-04-08T12:00:00Z');
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.startTime = time;
viewer.clock.currentTime = time;
viewer.clock.stopTime = Cesium.JulianDate.addSeconds(time, 20, new Cesium.JulianDate());
viewer.clock.multiplier = 1;
viewer.timeline.updateFromClock();
viewer.timeline.zoomTo(time, viewer.clock.stopTime);
// Construct a TimeIntervalCollection showing the changes to the hierarchy over time.
var hierarchy = new Cesium.TimeIntervalCollectionProperty();
for (var i = 0; i < 40; ++i) {
var nextTime = Cesium.JulianDate.addSeconds(time, 0.5, new Cesium.JulianDate());
// Inside the loop, per iteration we add one window of time for this polygon.
hierarchy.intervals.addInterval(new Cesium.TimeInterval({
start: time,
stop: nextTime,
isStartIncluded : true,
isStopIncluded : false,
data : Cesium.Cartesian3.fromDegreesArrayHeights([-108.0+i/4, 35.0, 100000,
-100.0+i/4, 35.0, 100000,
-100.0+i/4, 40.0, 100000,
-108.0+i/4, 40.0, 100000])
}));
time = nextTime;
}
// Create the polygon, using the animated hierarchy.
var orangePolygon = viewer.entities.add({
name : 'Orange polygon with time-varying position',
polygon : {
hierarchy : hierarchy,
extrudedHeight: 0,
perPositionHeight : true,
material : Cesium.Color.ORANGE.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.WHITE
}
});
viewer.zoomTo(viewer.entities);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
font-family: sans-serif;
}
<link href="http://cesiumjs.org/releases/1.19/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.19/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>