解读——SuperMap iClient3D for Cesium使用柱体截面绘制河流

原文参考

SuperMap iClient3D for Cesium绘制河流（二）_cesium polylinevolume 管道流向添加-CSDN博客

javascript 复制代码

river = viewer.entities.add({
  name : 'river',
  polylineVolume : {
    positions: new Cesium.Cartesian3.fromDegreesArrayHeights(positions),  //节点坐标
    shape: computeCircle(150.0),  //截面形状
    material : new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.SKYBLUE,10000),
    cornerType: Cesium.CornerType.MITERED,
  }
})

function computeCircle(radius) {  //设置截面长和宽的大小
  var positions = [];
  for(var i = 0; i < 180; i++) {
    let x = radius * Math.cos(Math.PI * 2 * i / 360); //宽度参数radius可传入进行控制
    let y = 0.1 * Math.sin(Math.PI * 2 * i / 360); //将高度尽可能设置小，达到面片效果
    positions.push(new Cesium.Cartesian2(x, y));
  }
  return positions;
}

将截面设置为面片模拟河流

computeCircle方法是生成一个圆形截面的顶点位置数组，用于创建多段线体积的截面形状。

以下是对其原理的几何角度解释：

首先，我们需要了解一些基本几何概念：-

圆的参数方程：在平面直角坐标系中，一个半径为r的圆可以由以下参数方程表示：

x = r * cos(θ)

y = r * sin(θ)

其中，(x, y)是圆上的一个点，θ是该点与圆心的连线与x轴正方向的夹角。

弧度和角度的转换关系：

一个完整的圆周对应的角度是360度或2π弧度，因此，我们可以通过以下关系将角度转换为弧度：

弧度 = 角度 * (π / 180)

其中，π是圆周率。

现在，我们来解释代码中的计算过程：

javascript 复制代码

let x = radius * Math.cos(Math.PI * 2 * i / 360);
let y = 0.1 * Math.sin(Math.PI * 2 * i / 360);

Math.cos(Math.PI * 2 * i / 360)：这里的`Math.cos()`函数计算给定角度的余弦值。我们将角度转换为弧度，使用了`Math.PI * 2 * i / 360`的方式。其中，`Math.PI * 2`表示一个完整的圆周对应的弧度，`i`是当前的角度，`360`是一个完整的圆周对应的角度。
-Math.sin(Math.PI * 2 * i / 360)：这里的`Math.sin()`函数计算给定角度的正弦值。同样，我们将角度转换为弧度。
radius：这是传入的半径参数，用于控制截面的大小。通过将半径乘以余弦值，我们可以得到每个顶点在x轴上的坐标。
0.1：将半径设为0.1，即将截面在y轴上的高度控制在一个较小的值，从而实现了截面的效果。
循环变量i的范围是从0到180：这是因为我们希望生成一个半圆形的截面，而不是完整的圆形。

综上所述，通过使用圆的参数方程和给定的半径参数，我们可以计算出圆形截面的每个顶点的x和y坐标。这些坐标将用于创建多段线体积的截面形状。