基于cesium实现贴地线

效果还是比较理想,不会影响点云,不管用线段还是四边形画出来的贴地线要么被建筑物挡住,要么受点云影响,这种就是在近地面的地表贴一个纹理,随地表的显示而显示。

效果:

基于cesium实现贴地线

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>我是你亲爹!</title>
    <script src="../Build/CesiumUnminified/Cesium.js"></script>
    <style>
        @import url(../Build/CesiumUnminified/Widgets/widgets.css);
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer" class="fullSize">
     
    <script>
       let viewer=new Cesium.Viewer('cesiumContainer');
    
       var rectanglePrimitive = viewer.scene.primitives.add(new Cesium.GroundPrimitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: new Cesium.CorridorGeometry({
                    vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
                    positions: Cesium.Cartesian3.fromDegreesArray([112.82536, 23.071506, 112.82742, 23.067512, 112.828878, 23.064659, 112.830799, 23.060947, 112.832166, 23.058329]),
                    width: 10
                }),
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 0.3, 0.9, 0.5))
                }
            }),
            classificationType: Cesium.ClassificationType.TERRAIN
        }));

        //点云
        
        var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            url: './line/hztileset.json',
        }));
        var style = {
            color: "color('#ffff00')"
        };
        style.pointSize = Cesium.defaultValue(style.pointSize, 5.0);
        tileset.style = new Cesium.Cesium3DTileStyle(style);


        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(112.82536, 23.071506, 500.0),
            orientation: {
                heading: Cesium.Math.toRadians(145.0),
                pitch: Cesium.Math.toRadians(-35.0),
                roll: 0.0
            }
        });

    </script>
</body>

</html>