Cesium中的样条插值

Posted 2020-11-16 yaohuimo

Cesium中的样条插值

---

在cesium里，提供了三种样条插值方法，LinearSpline，CatmullRomSpline，HermiteSpline。
在具体的实例上，可以使用样条插值法利用已知的控制点，插值出一系列的点，用于平滑曲线，特别是在路径的追朔重演。
下面，我们分别介绍这三种样条插值的使用方法以及效果。

LinearSpline(线性样条)

线性样条从效果上看，是把所有控制点一一连线，并在连线上做定点取值

1、设置几个控制点，并添加到场景中，聚焦视角

• var controls = [
• Cesium.Cartesian3.fromDegrees(110, 10),
• Cesium.Cartesian3.fromDegrees(111, 11),
• Cesium.Cartesian3.fromDegrees(112, 9),
• Cesium.Cartesian3.fromDegrees(114, 10),
• Cesium.Cartesian3.fromDegrees(113, 8)
• ];
• for (var i = 0; i < controls.length; i++) {
• viewer.entities.add({
• position: controls[i],
• point: {
• color: Cesium.Color.RED,
• pixelSize: 10
• }
• });
• }
• viewer.zoomTo(viewer.entities);

2、创建LinearSpline对象

• var spline = new Cesium.LinearSpline({
• times: [0.0, 0.25, 0.5, 0.75, 1],
• points: controls
• });

3、插值100个点

• var positions = [];
• for (var i = 0; i <= 100; i++) {
• var cartesian3 = spline.evaluate(i / 100);
• positions.push(cartesian3);
• viewer.entities.add({
• position: cartesian3,
• point: {
• color: Cesium.Color.YELLOW,
• pixelSize: 6
• }
• });
• }

4、将插值所有的点绘制成线