Cesium JS API
AppearanceArcGisMapServerImageryProviderArcGISTiledElevationTerrainProviderArcTypeAssociativeArrayAxisAxisAlignedBoundingBoxbarycentricCoordinatesBillboardBillboardCollectionBillboardGraphicsBillboardVisualizerbinarySearchbinarySearchComparatorBingMapsGeocoderServiceBingMapsImageryProviderBingMapsStyleBlendEquationBlendFunctionBlendingStateBlendOptionBoundingRectangleBoundingSphereBoxEmitterBoxGeometryBoxGeometryUpdaterBoxGraphicsBoxOutlineGeometrybuildModuleUrlCallbackPropertyCameraCameraEventAggregatorCameraEventTypeCartesian2Cartesian3Cartesian4CartographicCartographicGeocoderServiceCatmullRomSplineCesium3DTileCesium3DTileColorBlendModeCesium3DTileContentCesium3DTileFeatureCesium3DTilePointFeatureCesium3DTilesetCesium3DTilesetGraphicsCesium3DTilesetVisualizerCesium3DTileStyleCesium3DTilesVoxelProviderCesiumTerrainProviderCesiumWidgetCheckerboardMaterialPropertyCircleEmitterCircleGeometryCircleOutlineGeometryClassificationPrimitiveClassificationTypeClippingPlaneClippingPlaneCollectionClockClockRangeClockStepcloneCloudCollectionCloudTypeColorColorBlendModeColorGeometryInstanceAttributeColorMaterialPropertycombineComponentDatatypeCompositeEntityCollectionCompositeMaterialPropertyCompositePositionPropertyCompositePropertyCompressedTextureBufferConditionsExpressionConeEmitterConstantPositionPropertyConstantPropertyConstantSplineContextOptionsCoplanarPolygonGeometryCoplanarPolygonOutlineGeometryCornerTypeCorridorGeometryCorridorGeometryUpdaterCorridorGraphicsCorridorOutlineGeometrycreateElevationBandMaterialcreateElevationBandMaterialBandcreateElevationBandMaterialEntrycreateGuidcreateOsmBuildingscreateTangentSpaceDebugPrimitivecreateWorldImagerycreateWorldTerrainCreditCreditDisplayCubicRealPolynomialCullFaceCullingVolumeCumulusCloudCustomDataSourceCustomHeightmapTerrainProviderCustomShaderCustomShaderModeCustomShaderTranslucencyModeCylinderGeometryCylinderGeometryUpdaterCylinderGraphicsCylinderOutlineGeometryCzmlDataSourceDataSourceDataSourceClockDataSourceCollectionDataSourceDisplayDebugAppearanceDebugCameraPrimitiveDebugModelMatrixPrimitiveDefaultProxydefaultValuedefinedDepthFunctiondestroyObjectDeveloperErrorDirectionalLightDirectionUpDiscardEmptyTileImagePolicyDiscardMissingTileImagePolicyDistanceDisplayConditionDistanceDisplayConditionGeometryInstanceAttributeEasingFunctionEllipseGeometryEllipseGeometryUpdaterEllipseGraphicsEllipseOutlineGeometryEllipsoidEllipsoidGeodesicEllipsoidGeometryEllipsoidGeometryUpdaterEllipsoidGraphicsEllipsoidOutlineGeometryEllipsoidRhumbLineEllipsoidSurfaceAppearanceEllipsoidTangentPlaneEllipsoidTerrainProviderEntityEntityClusterEntityCollectionEntityViewEventEventHelperexcludesReverseAxisexportKmlexportKmlModelCallbackexportKmlResultKmlexportKmlResultKmzExpressionExtrapolationTypeFeatureDetectionFogformatErrorFrameRateMonitorFrustumGeometryFrustumOutlineGeometryFullscreenGeocoderServiceGeocodeTypeGeographicProjectionGeographicTilingSchemeGeoJsonDataSourceGeometryGeometryAttributeGeometryAttributesGeometryFactoryGeometryInstanceGeometryInstanceAttributeGeometryPipelineGeometryUpdaterGeometryVisualizergetAbsoluteUrigetBaseUrigetExtensionFromUriGetFeatureInfoFormatgetFilenameFromUrigetImagePixelsgetTimestampGlobeGlobeTranslucencyGoogleEarthEnterpriseImageryProviderGoogleEarthEnterpriseMapsProviderGoogleEarthEnterpriseMetadataGoogleEarthEnterpriseTerrainDataGoogleEarthEnterpriseTerrainProviderGpxDataSourceGregorianDateGridImageryProviderGridMaterialPropertyGroundGeometryUpdaterGroundPolylineGeometryGroundPolylinePrimitiveGroundPrimitiveHeadingPitchRangeHeadingPitchRollHeadingPitchRollValuesHeightmapEncodingHeightmapTerrainDataHeightReferenceHermitePolynomialApproximationHermiteSplineHilbertOrderHorizontalOriginI3SDataProviderI3SFeatureI3SFieldI3SGeometryI3SLayerI3SNodeImageBasedLightingImageMaterialPropertyImageryLayerImageryLayerCollectionImageryLayerFeatureInfoImageryProviderImageryTypesincludesReverseAxisIndexDatatypeIntersectIntersections2DIntersectionTestsIntervalIonIonGeocoderServiceIonImageryProviderIonResourceIonWorldImageryStyleisLeapYearIso8601JulianDateKeyboardEventModifierKmlCameraKmlDataSourceKmlFeatureDataKmlLookAtKmlTourKmlTourFlyToKmlTourWaitLabelLabelCollectionLabelGraphicsLabelStyleLabelVisualizerLagrangePolynomialApproximationLeapSecondLightLightingModelLinearApproximationLinearSplineMapboxImageryProviderMapboxStyleImageryProviderMapMode2DMapProjectionMaterialMaterialAppearanceMaterialSupportMaterialPropertyMathMatrix2Matrix3Matrix4mergeSortmergeSortComparatorMetadataClassMetadataClassPropertyMetadataComponentTypeMetadataEnumMetadataEnumValueMetadataSchemaMetadataTypeModelModelAnimationModelAnimationCollectionModelAnimationLoopModelFeatureModelGraphicsModelNodeModelVisualizerMoonMorphWeightSplineNearFarScalarNeverTileDiscardPolicyNodeTransformationPropertyobjectToQueryOccluderOpenCageGeocoderServiceOpenStreetMapImageryProviderOrientedBoundingBoxOrthographicFrustumOrthographicOffCenterFrustumPackableForInterpolationParticleParticleBurstParticleEmitterParticleSystemPathGraphicsPathVisualizerPeliasGeocoderServicePerInstanceColorAppearancePerspectiveFrustumPerspectiveOffCenterFrustumPinBuilderPixelDatatypePixelFormatPlanePlaneGeometryPlaneGeometryUpdaterPlaneGraphicsPlaneOutlineGeometryPointCloudShadingPointGraphicspointInsideTrianglePointPrimitivePointPrimitiveCollectionPointVisualizerPolygonGeometryPolygonGeometryUpdaterPolygonGraphicsPolygonHierarchyPolygonOutlineGeometryPolylinePolylineArrowMaterialPropertyPolylineCollectionPolylineColorAppearancePolylineDashMaterialPropertyPolylineGeometryPolylineGeometryUpdaterPolylineGlowMaterialPropertyPolylineGraphicsPolylineMaterialAppearancePolylineOutlineMaterialPropertyPolylineVisualizerPolylineVolumeGeometryPolylineVolumeGeometryUpdaterPolylineVolumeGraphicsPolylineVolumeOutlineGeometryPositionPropertyPositionPropertyArrayPostProcessStagePostProcessStageCollectionPostProcessStageCompositePostProcessStageLibraryPostProcessStageSampleModePrimitivePrimitiveCollectionPrimitiveTypePropertyPropertyArrayPropertyBagProxyQuadraticRealPolynomialQuantizedMeshTerrainDataQuarticRealPolynomialQuaternionQuaternionSplinequeryToObjectQueueRayreadyPromiseRectangleRectangleGeometryRectangleGeometryUpdaterRectangleGraphicsRectangleOutlineGeometryReferenceFrameReferencePropertyremoveExtensionRequestRequestErrorEventRequestSchedulerRequestStateRequestTypeResourceRuntimeErrorSampledPositionPropertySampledPropertysampleTerrainsampleTerrainMostDetailedSceneSceneModeSceneTransformsScreenSpaceCameraControllerScreenSpaceEventHandlerScreenSpaceEventTypeshaderDefinesshaderMaximumIntersectionsLengthshaderUniformsShadowMapShadowModeShowGeometryInstanceAttributeSimon1994PlanetaryPositionsSimplePolylineGeometrySingleTileImageryProviderSkyAtmosphereSkyBoxSphereEmitterSphereGeometrySphereOutlineGeometrySphericalSplineSplitDirectionStencilFunctionStencilOperationSteppedSplineStripeMaterialPropertyStripeOrientationStyleExpressionsubdivideArraySunSunLightTaskProcessorTerrainDataTerrainProviderTextureMagnificationFilterTextureMinificationFilterTextureUniformTileAvailabilityTileCoordinatesImageryProviderTileDiscardPolicyTileMapServiceImageryProviderTileProviderErrorTilingSchemeTimeDynamicImageryTimeDynamicPointCloudTimeIntervalTimeIntervalCollectionTimeIntervalCollectionPositionPropertyTimeIntervalCollectionPropertyTimeStandardTransformsTranslationRotationScaleTridiagonalSystemSolverTrustedServersUniformSpecifierUniformTypeUrlTemplateImageryProviderVaryingTypeVelocityOrientationPropertyVelocityVectorPropertyVertexFormatVerticalOriginVideoSynchronizerViewportQuadVisibilityVisualizerVoxelPrimitiveVoxelProviderVoxelShapeTypeVRTheWorldTerrainProviderWallGeometryWallGeometryUpdaterWallGraphicsWallOutlineGeometryWebGLConstantsWebGLOptionsWebMapServiceImageryProviderWebMapTileServiceImageryProviderWebMercatorProjectionWebMercatorTilingSchemeWindingOrderwriteTextToCanvasAnimationAnimationViewModelBaseLayerPickerBaseLayerPickerViewModelCesium3DTilesInspectorCesium3DTilesInspectorViewModelCesiumInspectorCesiumInspectorViewModelClockViewModelCommandcreateCommandFullscreenButtonFullscreenButtonViewModelGeocoderGeocoderViewModelHomeButtonHomeButtonViewModelInfoBoxInfoBoxViewModelNavigationHelpButtonNavigationHelpButtonViewModelPerformanceWatchdogPerformanceWatchdogViewModelProjectionPickerProjectionPickerViewModelProviderViewModelSceneModePickerSceneModePickerViewModelSelectionIndicatorSelectionIndicatorViewModelSvgPathBindingHandlerTimelineToggleButtonViewModelViewerviewerCesium3DTilesInspectorMixinviewerCesiumInspectorMixinviewerDragDropMixinviewerPerformanceWatchdogMixinviewerVoxelInspectorMixinVoxelInspectorVoxelInspectorViewModelVRButtonVRButtonViewModel

SampledProperty

介绍

SampledProperty 是 CesiumJS 中的一个基础类,它表示一个随时间变化的属性,该属性可以随时间变化,并包括值的历史记录。

SampledProperty 可以用来表示表示类似于位置、颜色、大小等随着时间变化而变化的属性。

用法

SampledProperty 是一个抽象基类,一般不会直接实例化,而是通过其子类来进行实例化并使用。

TimeSampledProperty

TimeSampledPropertySampledProperty的一个子类,它表示一个包含时间戳信息的随时间变化的属性。该属性的时间戳可以在设置属性值时指定(显式或隐式),或者自动生成。

// 创建一个 TimeSampledProperty
const position = new Cesium.TimeSampledProperty(Cesium.Cartesian3);

// 在时间 T1(以 JulianDate 表示)的位置是 (1, 2, 3)
const t1 = Cesium.JulianDate.fromIso8601('2021-01-01T12:00:00.00Z');
position.addSample(t1, Cesium.Cartesian3.fromElements(1.0, 2.0, 3.0));

// 在时间 T2 的位置是 (4, 5, 6)
const t2 = Cesium.JulianDate.fromIso8601('2021-01-01T12:00:05.00Z');
position.addSample(t2, Cesium.Cartesian3.fromElements(4.0, 5.0, 6.0));

// 获取时间 T1 的位置
const positionAtT1 = new Cesium.Cartesian3();
position.getValue(t1, positionAtT1); // (1, 2, 3)

// 获取时间 T3 的位置(自动插值)
const t3 = Cesium.JulianDate.fromIso8601('2021-01-01T12:00:02.50Z');
const positionAtT3 = new Cesium.Cartesian3();
position.getValue(t3, positionAtT3); // (2.5, 3.5, 4.5)

在上面的代码中,我们创建了一个 TimeSampledProperty,表示一个三维空间位置属性。我们在时间 T1T2(分别为 2021 年 1 月 1 日 12 点和 5 秒)设置了该属性的值,分别为 $(1,2,3)$ 和 $(4,5,6)$。

我们使用 getValue 方法获取了该属性在时间 T1T3(2021 年 1 月 1 日 12 点 2 分 30 秒,即 T1T2 之间的一半)的值。对于已经设置了的时间点,该方法会直接返回其值;对于未设置的时间点,该方法会根据已有的值和时间戳之间的线性插值来计算该时间点的值。

当然,我们也可以将时间戳和属性值一起传入 TimeSampledProperty 的构造函数来一次性添加多个样本:

const position = new Cesium.TimeSampledProperty(Cesium.Cartesian3, [
  { time: t1, value: Cesium.Cartesian3.fromElements(1, 2, 3) },
  { time: t2, value: Cesium.Cartesian3.fromElements(4, 5, 6) },
]);

PropertyArray

PropertyArraySampledProperty的另一个子类,它表示一个可包含多个属性值的随时间变化的属性。该属性的每个元素都对应一个时间戳,默认情况下时间戳会自动生成。

// 创建一个 PropertyArray
const color = new Cesium.PropertyArray(Cesium.Color);

// 在时间 T1 (JulianDate)的颜色是红色
const t1 = Cesium.JulianDate.fromIso8601('2021-01-01T12:00:00.00Z');
color.setValue(t1, Cesium.Color.RED);

// 在时间 T2 的颜色是绿色
const t2 = Cesium.JulianDate.fromIso8601('2021-01-01T12:00:05.00Z');
color.setValue(t2, Cesium.Color.GREEN);

// 在时间 T3 的颜色是蓝色
const t3 = Cesium.JulianDate.fromIso8601('2021-01-01T12:00:10.00Z');
color.setValue(t3, Cesium.Color.BLUE);

// 获取时间 T1 的颜色
const colorAtT1 = color.getValue(t1); // Cesium.Color.RED

// 获取时间 T3 的颜色(自动插值)
const colorAtT3 = color.getValue(t3); // Cesium.Color.BLUE

在上面的代码中,我们创建了一个 PropertyArray,表示一个颜色随时间变化的属性。我们在时间 T1T2T3(分别为 2021 年 1 月 1 日 12 点、5 秒和 10 秒)设置了该属性的值,分别为红色、绿色和蓝色。由于该属性的每个元素都对应一个时间戳,我们使用 setValue 方法设置每个元素的值,该方法的第一个参数为时间戳,第二个参数为属性值。

在使用 getValue 方法获取属性值时,如果给出的时间戳已经设置了属性值,该方法会直接返回该值;否则,该方法会根据相邻两个已经设置的时间点及其对应的值之间的线性插值,来计算该时间戳对应的值。

总结

SampledProperty 是 CesiumJS 中用于表示随时间变化的属性的基础类,它包括两个重要子类:TimeSampledPropertyPropertyArray。其中,TimeSampledProperty 可以用来表示带有时间戳信息的属性,比如位置、速度等;PropertyArray 可以用来表示不带时间戳信息的属性的数组,比如颜色、大小、透明度等。无论哪种子类,它们都提供了方便的方法来设置和获取属性值,并支持自动插值。在使用 CesiumJS 时,我们经常需要使用 SampledProperty 来表示实体在时间上的变化,其使用方法和属性设置方法都是十分简单和直观的。