cesium添加立体折线图

### 实现 Cesium 中的 3D 立体折线图

为了在 Cesium 中实现三维立体折线图，可以利用 `Cesium.Polyline` 或者更复杂的几何对象来构建具有高度属性的线条。下面提供了一种通过自定义几何结构创建带有体积感的折线的方法。

#### 创建带宽度的高度曲线实体

// 初始化 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');

// 定义一些位置点作为折线路径上的节点
var positions = Cesium.Cartesian3.fromDegreesArrayHeights([
    -70.0, 40.0, 1000,
    -80.0, 35.0, 2000,
    -90.0, 30.0, 3000
]);

// 添加一条有宽度和颜色变化效果的高程线到场景中
viewer.entities.add({
    polyline: {
        positions: new Cesium.CallbackProperty(function () { return positions; }, false),
        width: 5,
        material: new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.7)),
        clampToGround: true // 如果希望这条线贴近地面则设置为true，默认false表示不贴合地形
    }
});

// 飞向指定区域以便查看新加入的对象
viewer.zoomTo(viewer.entities);

上述代码片段展示了如何使用 `Cartesian3.fromDegreesArrayHeights()` 方法传入经度、纬度以及对应的高度值数组来生成一系列空间坐标点，并以此为基础构造了一个红色透明且有一定宽度的多段线[^1]。

对于更加复杂的需求比如真正意义上的“立体”，即不仅限于简单的加宽而是形成管状或其他形状，则可能需要用到更为底层API如 `Primitive` 和 `GeometryInstance` 来定制化建模过程[^2]。

#### 构造圆柱形管道样式的立体折线

如果想要达到类似于管道的效果，可以通过组合多个细长的圆柱体（cylinder primitives）沿着给定轨迹排列的方式来模拟这种视觉体验：

function createTube(positions) {
    var instances = [];
    
    for (let i = 0; i < positions.length - 1; ++i){
        let start = positions[i];
        let end = positions[i + 1];

        const height = Math.sqrt(
            Math.pow(end.x - start.x, 2) +
            Math.pow(end.y - start.y, 2) +
            Math.pow(end.z - start.z, 2));

        const instance = new Cesium.GeometryInstance({
            geometry : new Cesium.CylinderGeometry({
                length : height,
                topRadius : 5e2,
                bottomRadius : 5e2,
                slices : 64
            }),
            modelMatrix : Cesium.Transforms.eastNorthUpToFixedFrame(start).multiplyByTranslation(new Cesium.Cartesian3((end.x-start.x)/2,(end.y-start.y)/2,height/2))
        });

        instances.push(instance);
    }

    return instances;
}

const tubeInstances = createTube(positions);

viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances : tubeInstances,
    appearance : new Cesium.MaterialAppearance({
        material : new Cesium.Material({fabric : {type:'Color',uniforms:{color:new Cesium.Color(1.0,0.0,0.0,0.7)}}})
    })
}));

这段脚本首先遍历所有相邻两点间计算距离并据此建立相应长度的小圆筒实例；接着应用变换矩阵调整这些组件的位置使其连贯成一体；最后统一渲染整个集合以呈现最终图形效果[^3]。