Cesium JS API
AppearanceArcGisMapServerImageryProviderArcGISTiledElevationTerrainProviderArcTypeAssociativeArrayAxisAxisAlignedBoundingBoxbarycentricCoordinatesBillboardBillboardCollectionBillboardGraphicsBillboardVisualizerbinarySearchbinarySearchComparatorBingMapsGeocoderServiceBingMapsImageryProviderBingMapsStyleBlendEquationBlendFunctionBlendingStateBlendOptionBoundingRectangleBoundingSphereBoxEmitterBoxGeometryBoxGeometryUpdaterBoxGraphicsBoxOutlineGeometrybuildModuleUrlCallbackPropertyCameraCameraEventAggregatorCameraEventTypeCartesian2Cartesian3Cartesian4CartographicCartographicGeocoderServiceCatmullRomSplineCesium3DTileCesium3DTileColorBlendModeCesium3DTileContentCesium3DTileFeatureCesium3DTilePointFeatureCesium3DTilesetCesium3DTilesetGraphicsCesium3DTilesetVisualizerCesium3DTileStyleCesium3DTilesVoxelProviderCesiumTerrainProviderCesiumWidgetCheckerboardMaterialPropertyCircleEmitterCircleGeometryCircleOutlineGeometryClassificationPrimitiveClassificationTypeClippingPlaneClippingPlaneCollectionClockClockRangeClockStepcloneCloudCollectionCloudTypeColorColorBlendModeColorGeometryInstanceAttributeColorMaterialPropertycombineComponentDatatypeCompositeEntityCollectionCompositeMaterialPropertyCompositePositionPropertyCompositePropertyCompressedTextureBufferConditionsExpressionConeEmitterConstantPositionPropertyConstantPropertyConstantSplineContextOptionsCoplanarPolygonGeometryCoplanarPolygonOutlineGeometryCornerTypeCorridorGeometryCorridorGeometryUpdaterCorridorGraphicsCorridorOutlineGeometrycreateElevationBandMaterialcreateElevationBandMaterialBandcreateElevationBandMaterialEntrycreateGuidcreateOsmBuildingscreateTangentSpaceDebugPrimitivecreateWorldImagerycreateWorldTerrainCreditCreditDisplayCubicRealPolynomialCullFaceCullingVolumeCumulusCloudCustomDataSourceCustomHeightmapTerrainProviderCustomShaderCustomShaderModeCustomShaderTranslucencyModeCylinderGeometryCylinderGeometryUpdaterCylinderGraphicsCylinderOutlineGeometryCzmlDataSourceDataSourceDataSourceClockDataSourceCollectionDataSourceDisplayDebugAppearanceDebugCameraPrimitiveDebugModelMatrixPrimitiveDefaultProxydefaultValuedefinedDepthFunctiondestroyObjectDeveloperErrorDirectionalLightDirectionUpDiscardEmptyTileImagePolicyDiscardMissingTileImagePolicyDistanceDisplayConditionDistanceDisplayConditionGeometryInstanceAttributeEasingFunctionEllipseGeometryEllipseGeometryUpdaterEllipseGraphicsEllipseOutlineGeometryEllipsoidEllipsoidGeodesicEllipsoidGeometryEllipsoidGeometryUpdaterEllipsoidGraphicsEllipsoidOutlineGeometryEllipsoidRhumbLineEllipsoidSurfaceAppearanceEllipsoidTangentPlaneEllipsoidTerrainProviderEntityEntityClusterEntityCollectionEntityViewEventEventHelperexcludesReverseAxisexportKmlexportKmlModelCallbackexportKmlResultKmlexportKmlResultKmzExpressionExtrapolationTypeFeatureDetectionFogformatErrorFrameRateMonitorFrustumGeometryFrustumOutlineGeometryFullscreenGeocoderServiceGeocodeTypeGeographicProjectionGeographicTilingSchemeGeoJsonDataSourceGeometryGeometryAttributeGeometryAttributesGeometryFactoryGeometryInstanceGeometryInstanceAttributeGeometryPipelineGeometryUpdaterGeometryVisualizergetAbsoluteUrigetBaseUrigetExtensionFromUriGetFeatureInfoFormatgetFilenameFromUrigetImagePixelsgetTimestampGlobeGlobeTranslucencyGoogleEarthEnterpriseImageryProviderGoogleEarthEnterpriseMapsProviderGoogleEarthEnterpriseMetadataGoogleEarthEnterpriseTerrainDataGoogleEarthEnterpriseTerrainProviderGpxDataSourceGregorianDateGridImageryProviderGridMaterialPropertyGroundGeometryUpdaterGroundPolylineGeometryGroundPolylinePrimitiveGroundPrimitiveHeadingPitchRangeHeadingPitchRollHeadingPitchRollValuesHeightmapEncodingHeightmapTerrainDataHeightReferenceHermitePolynomialApproximationHermiteSplineHilbertOrderHorizontalOriginI3SDataProviderI3SFeatureI3SFieldI3SGeometryI3SLayerI3SNodeImageBasedLightingImageMaterialPropertyImageryLayerImageryLayerCollectionImageryLayerFeatureInfoImageryProviderImageryTypesincludesReverseAxisIndexDatatypeIntersectIntersections2DIntersectionTestsIntervalIonIonGeocoderServiceIonImageryProviderIonResourceIonWorldImageryStyleisLeapYearIso8601JulianDateKeyboardEventModifierKmlCameraKmlDataSourceKmlFeatureDataKmlLookAtKmlTourKmlTourFlyToKmlTourWaitLabelLabelCollectionLabelGraphicsLabelStyleLabelVisualizerLagrangePolynomialApproximationLeapSecondLightLightingModelLinearApproximationLinearSplineMapboxImageryProviderMapboxStyleImageryProviderMapMode2DMapProjectionMaterialMaterialAppearanceMaterialSupportMaterialPropertyMathMatrix2Matrix3Matrix4mergeSortmergeSortComparatorMetadataClassMetadataClassPropertyMetadataComponentTypeMetadataEnumMetadataEnumValueMetadataSchemaMetadataTypeModelModelAnimationModelAnimationCollectionModelAnimationLoopModelFeatureModelGraphicsModelNodeModelVisualizerMoonMorphWeightSplineNearFarScalarNeverTileDiscardPolicyNodeTransformationPropertyobjectToQueryOccluderOpenCageGeocoderServiceOpenStreetMapImageryProviderOrientedBoundingBoxOrthographicFrustumOrthographicOffCenterFrustumPackableForInterpolationParticleParticleBurstParticleEmitterParticleSystemPathGraphicsPathVisualizerPeliasGeocoderServicePerInstanceColorAppearancePerspectiveFrustumPerspectiveOffCenterFrustumPinBuilderPixelDatatypePixelFormatPlanePlaneGeometryPlaneGeometryUpdaterPlaneGraphicsPlaneOutlineGeometryPointCloudShadingPointGraphicspointInsideTrianglePointPrimitivePointPrimitiveCollectionPointVisualizerPolygonGeometryPolygonGeometryUpdaterPolygonGraphicsPolygonHierarchyPolygonOutlineGeometryPolylinePolylineArrowMaterialPropertyPolylineCollectionPolylineColorAppearancePolylineDashMaterialPropertyPolylineGeometryPolylineGeometryUpdaterPolylineGlowMaterialPropertyPolylineGraphicsPolylineMaterialAppearancePolylineOutlineMaterialPropertyPolylineVisualizerPolylineVolumeGeometryPolylineVolumeGeometryUpdaterPolylineVolumeGraphicsPolylineVolumeOutlineGeometryPositionPropertyPositionPropertyArrayPostProcessStagePostProcessStageCollectionPostProcessStageCompositePostProcessStageLibraryPostProcessStageSampleModePrimitivePrimitiveCollectionPrimitiveTypePropertyPropertyArrayPropertyBagProxyQuadraticRealPolynomialQuantizedMeshTerrainDataQuarticRealPolynomialQuaternionQuaternionSplinequeryToObjectQueueRayreadyPromiseRectangleRectangleGeometryRectangleGeometryUpdaterRectangleGraphicsRectangleOutlineGeometryReferenceFrameReferencePropertyremoveExtensionRequestRequestErrorEventRequestSchedulerRequestStateRequestTypeResourceRuntimeErrorSampledPositionPropertySampledPropertysampleTerrainsampleTerrainMostDetailedSceneSceneModeSceneTransformsScreenSpaceCameraControllerScreenSpaceEventHandlerScreenSpaceEventTypeshaderDefinesshaderMaximumIntersectionsLengthshaderUniformsShadowMapShadowModeShowGeometryInstanceAttributeSimon1994PlanetaryPositionsSimplePolylineGeometrySingleTileImageryProviderSkyAtmosphereSkyBoxSphereEmitterSphereGeometrySphereOutlineGeometrySphericalSplineSplitDirectionStencilFunctionStencilOperationSteppedSplineStripeMaterialPropertyStripeOrientationStyleExpressionsubdivideArraySunSunLightTaskProcessorTerrainDataTerrainProviderTextureMagnificationFilterTextureMinificationFilterTextureUniformTileAvailabilityTileCoordinatesImageryProviderTileDiscardPolicyTileMapServiceImageryProviderTileProviderErrorTilingSchemeTimeDynamicImageryTimeDynamicPointCloudTimeIntervalTimeIntervalCollectionTimeIntervalCollectionPositionPropertyTimeIntervalCollectionPropertyTimeStandardTransformsTranslationRotationScaleTridiagonalSystemSolverTrustedServersUniformSpecifierUniformTypeUrlTemplateImageryProviderVaryingTypeVelocityOrientationPropertyVelocityVectorPropertyVertexFormatVerticalOriginVideoSynchronizerViewportQuadVisibilityVisualizerVoxelPrimitiveVoxelProviderVoxelShapeTypeVRTheWorldTerrainProviderWallGeometryWallGeometryUpdaterWallGraphicsWallOutlineGeometryWebGLConstantsWebGLOptionsWebMapServiceImageryProviderWebMapTileServiceImageryProviderWebMercatorProjectionWebMercatorTilingSchemeWindingOrderwriteTextToCanvasAnimationAnimationViewModelBaseLayerPickerBaseLayerPickerViewModelCesium3DTilesInspectorCesium3DTilesInspectorViewModelCesiumInspectorCesiumInspectorViewModelClockViewModelCommandcreateCommandFullscreenButtonFullscreenButtonViewModelGeocoderGeocoderViewModelHomeButtonHomeButtonViewModelInfoBoxInfoBoxViewModelNavigationHelpButtonNavigationHelpButtonViewModelPerformanceWatchdogPerformanceWatchdogViewModelProjectionPickerProjectionPickerViewModelProviderViewModelSceneModePickerSceneModePickerViewModelSelectionIndicatorSelectionIndicatorViewModelSvgPathBindingHandlerTimelineToggleButtonViewModelViewerviewerCesium3DTilesInspectorMixinviewerCesiumInspectorMixinviewerDragDropMixinviewerPerformanceWatchdogMixinviewerVoxelInspectorMixinVoxelInspectorVoxelInspectorViewModelVRButtonVRButtonViewModel

HermitePolynomialApproximation

HermitePolynomialApproximation 是 CesiumJS 提供的一个拟合简单曲线的工具类。通过 Hermite 多项式拟合逼近算法,可以将一条简单的曲线近似为一系列 Hermite 多项式的和,从而降低曲线的复杂度,提高渲染效率。

使用方法

HermitePolynomialApproximation 的使用方法非常简单,只需要传入一组坐标点和拟合阶数,即可得到一个拟合曲线的坐标点数组。具体的代码示例如下:

// 定义要拟合的坐标点
var points = [
    new Cesium.Cartesian3(-639.1053785286645, -5532.068996536557, -3118.3205577313696),
    new Cesium.Cartesian3(-749.9370167824586, -5746.212755132617, -3189.725634620119),
    new Cesium.Cartesian3(-799.3528355014057, -5820.737186789282, -3207.705240743041),
    // ... 更多坐标点 ...
];

// 定义拟合阶数
var degree = 4;

// 进行 Hermite 多项式拟合逼近
var approximation = new Cesium.HermitePolynomialApproximation(points, degree);

// 获取拟合后的坐标点
var approximatedPoints = approximation.getPoints();

API 文档

HermitePolynomialApproximation(points, degree)

构造函数,创建一个 HermitePolynomialApproximation 对象,并进行 Hermite 多项式拟合逼近。

  • points {Array.<Cartesian3>} 待拟合的坐标点数组。
  • degree {Number} 拟合阶数。

getPoints()

获取拟合后的坐标点数组。

  • returns {Array.<Cartesian3>} 拟合后的坐标点数组。

实例

为了更好地了解 HermitePolynomialApproximation 的使用和效果,我们在 CesiumJS 中创建一个简单的示例,演示 Hermite 多项式拟合逼近的效果。代码实现如下:

// 创建三维场景
var viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    scene3DOnly: true,
});

// 定义要拟合的坐标点
var points = [
    new Cesium.Cartesian3(-639.1053785286645, -5532.068996536557, -3118.3205577313696),
    new Cesium.Cartesian3(-749.9370167824586, -5746.212755132617, -3189.725634620119),
    new Cesium.Cartesian3(-799.3528355014057, -5820.737186789282, -3207.705240743041),
    new Cesium.Cartesian3(-819.7283165928798, -5861.233072565575, -3216.280195622216),
    new Cesium.Cartesian3(-784.2999774963352, -5956.342654611955, -3243.455381816878),
    new Cesium.Cartesian3(-669.9011540636836, -6186.837980908506, -3318.183660911058),
    new Cesium.Cartesian3(-389.71623857080434, -6681.809525826993, -3520.164462682747),
    new Cesium.Cartesian3(-17.96676210832651, -7322.727122460564, -3780.8064729129934),
    new Cesium.Cartesian3(342.35380535713607, -7858.823667233794, -3975.166794923005),
    new Cesium.Cartesian3(906.4670656527075, -8255.339896012603, -4087.3101586275953),
    new Cesium.Cartesian3(1322.3414443294662, -8460.8450159507, -4149.133082072818),
    new Cesium.Cartesian3(1823.370671435831, -8566.052281743377, -4198.122599620551),
    new Cesium.Cartesian3(2021.7776685831262, -8592.49623519845, -4213.899843972217),
    new Cesium.Cartesian3(2071.616508005633, -8601.847817910568, -4217.882581174782),
    new Cesium.Cartesian3(2193.520393180109, -8633.369058276662, -4228.30542488865),
    new Cesium.Cartesian3(2858.05536, -8944.462248, -4339.703),
];

// 定义拟合阶数
var degree = 4;

// 进行 Hermite 多项式拟合逼近
var approximation = new Cesium.HermitePolynomialApproximation(points, degree);

// 获取拟合后的坐标点
var approximatedPoints = approximation.getPoints();

// 创建实体对象,展示拟合前的曲线
var primitiveBefore = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.PolylineGeometry({
            positions: points,
            width: 10,
            vertexFormat: Cesium.VertexFormat.POSITION_ONLY
        }),
    }),
    appearance: new Cesium.PolylineMaterialAppearance({
        material: new Cesium.Material({
            fabric: {
                type: 'Color',
                uniforms: {
                    color: new Cesium.Color(0.0, 0.0, 1.0, 1.0),
                },
            },
        }),
    }),
});

// 创建实体对象,展示拟合后的曲线
var primitiveAfter = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.PolylineGeometry({
            positions: approximatedPoints,
            width: 10,
            vertexFormat: Cesium.VertexFormat.POSITION_ONLY
        }),
    }),
    appearance: new Cesium.PolylineMaterialAppearance({
        material: new Cesium.Material({
            fabric: {
                type: 'Color',
                uniforms: {
                    color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
                },
            },
        }),
    }),
});

// 将实体对象添加到场景中
viewer.scene.primitives.add(primitiveBefore);
viewer.scene.primitives.add(primitiveAfter);

// 调整相机视角
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(104.0649768, 30.6611842, 5000),
});

执行上述代码,我们可以看到一个窗口,上面展示了原始的曲线和经过拟合后的曲线。其中,红色线条表示拟合后的曲线,蓝色线条表示原始的曲线。从图中可以明显看出,经过 Hermite 多项式拟合逼近后,曲线的复杂度大大降低,更加简单明了。

Hermite Polynomial Approximation

注意事项

  • HermitePolynomialApproximation 不适用于高度复杂的曲线拟合,否则会导致拟合结果不准确。
  • HermitePolynomialApproximation 的拟合阶数需要根据曲线的复杂度进行调整,不合适的拟合阶数会导致拟合结果不准确。
  • HermitePolynomialApproximation 仅适用于简单曲线拟合,对于具有复杂结构的曲面拟合,不适用。