Cesium12-Cesium绘制实体贴地图形

最新推荐文章于 2026-07-13 09:03:42 发布

原创最新推荐文章于 2026-07-13 09:03:42 发布 · 3.8k 阅读

31 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

本文详细介绍了如何在Cesium中控制绘制的实体（如点、线、面、矩形、椭圆和模型）贴合地形表面，包括使用clampToGround、heightReference和classificationType属性，以及创建世界地形的示例代码。

一：基本概念

1：实体贴地？

绘制的实体(通常是指平面图形而不是立体几何图形)贴合在地形表面或者倾斜摄影模型表面。

2：如何控制贴地

polyline：设置clampToGround：true;

其余对象：heightReference或classificationType属性

heightReference属性
Cesium.HeightReference.NONE	该位置是绝对的
Cesium.HeightReference.CLAMP_TO_GROUND	该位置固定在地形上
Cesium.HeightReference.RELATIVE_TO_GROUND	该位置的高度是指地形上方的高度

classificationType属性
Cesium.ClasssificationType.CESIUM_3D_TILE	仅3DTiles被分类
Cesium.ClasssificationType.TERRAIN	仅地形被分类
Cesium.ClasssificationType.BOTH	地形和3D Tiles均被分类

3：创建地形

（Cesium文档示例代码）

try {
  const viewer1 = new Cesium.Viewer("cesiumContainer", {
    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestWaterMask: true,
      requestVertexNormals: true
    });
  });
} catch (error) {
  console.log(error);
}

二：实操绘制

1：贴地点

   /* 绘制贴地点 */
        //1、创建addPoint对象
        var addPoint = {
            id: 'point',
            name: '点',
            show: true,
            position: Cesium.Cartesian3.fromDegrees(118, 32, 0),
            point: {
                color: Cesium.Color.BLUE,
                pixelSize: 50,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND //贴地
            }
        }
        viewer.entities.add(addPoint)

2：贴地线


        /* 绘制贴地线 */
        //1、创建addLine对象
        var addLine = {
            id: 'line',
            name: '线',
            show: true,
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([118, 30, 119, 32, 116, 35]),
                width: 2, //线条宽度
                material: Cesium.Color.RED, //线条材质
                clampToGround: true  //贴地
            }
        }
        viewer.entities.add(addLine)

3：贴地面

      /* 绘制贴地面 */
        //1、创建addPolygon对象
        var addPolygon = {
            id: 'polygon',
            name: '面',
            show: true,
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray([118, 30, 119, 32, 116, 32, 116, 30]),
                material: Cesium.Color.RED.withAlpha(0.4),
                classificationType: Cesium.ClassificationType.BOTH,//贴地（绘制的面既可以贴合地形也可以贴合3D Tiles）
            }
        }
        viewer.entities.add(addPolygon)

4：贴地矩形

        /* 绘制贴地矩形 */
        //1、创建addRectangle对象
        var addRectangle = {
            id: 'rectangle',
            name: '矩形',
            show: true,
            rectangle: {
                coordinates: Cesium.Rectangle.fromDegrees(80, 30, 100, 35),
                material: Cesium.Color.RED.withAlpha(0.4),
                classificationType: Cesium.ClassificationType.BOTH,//贴地（绘制的面既可以贴合地形也可以贴合3D Tiles）
            }
        }
        viewer.entities.add(addRectangle)

5：贴地椭圆

        /* 绘制贴地椭圆 */
        //1、创建addEllipse对象
        var addEllipse = {
            id: 'ellipse',
            name: '椭圆',
            show: true,
            position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
            ellipse: {
                semiMinorAxis: 250000,
                semiMajorAxis: 400000,
                classificationType: Cesium.ClassificationType.BOTH,//贴地（绘制的面既可以贴合地形也可以贴合3D Tiles）
            }
        }
        viewer.entities.add(addEllipse)

6：贴地走廊

 /* 贴地走廊 */
        //1、创建addCorridor对象
        var addCorridor = {
            id: 'corridor',
            name: '走廊',
            show: true,
            corridor: {
                positions: Cesium.Cartesian3.fromDegreesArray([
                    100.0, 40.0,
                    105.0, 40.0,
                    105.0, 35.0
                ]),
                width: 20000,
                material: Cesium.Color.YELLOW.withAlpha(0.5),
                classificationType: Cesium.ClassificationType.BOTH,//贴地（绘制的面既可以贴合地形也可以贴合3D Tiles）
            }
        }
        viewer.entities.add(addCorridor)

7：贴地模型

        /* 贴地模型 */
        //1、创建addEllipsoid对象
        var degree = 60;
        var heading = Cesium.Math.toRadians(degree)
        var pitch = 0
        var roll = 0
        var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
        var addModel = {
            id: 'model',
            name: '小车模型',
            show: true,
            position: Cesium.Cartesian3.fromDegrees(118, 30, 5000),
            orientation: Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(118, 30, 5000), hpr),
            model: {
                uri: '../Assets/Cesium_Air.glb',
                minimumPixelSize: 300,
                maximumScale: 50000,
                scale: 30000,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND

            }
        }
        viewer.entities.add(addModel)

标签

#前端