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();
构造函数,创建一个 HermitePolynomialApproximation 对象,并进行 Hermite 多项式拟合逼近。
{Array.<Cartesian3>}
待拟合的坐标点数组。{Number}
拟合阶数。获取拟合后的坐标点数组。
{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 多项式拟合逼近后,曲线的复杂度大大降低,更加简单明了。