cesium贴地线-摩杜云开发者社区

cesium贴地线_Math

推荐：将 NSDT场景编辑器加入你的3D开发工具链

关于贴地线

整理一下官网示例中提到的各种贴地线，有些并不是线，而是多边形，可是可以通过宽度调整，表现成”线”

作为对比，先来加一个普通线段

var yellowLine = viewer.entities.add({
    name: 'Red line on the surface',
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            112.82436,
            23.071506,
            112.82742,
            23.067512,
            112.828878,
            23.064659,
            112.830799,
            23.060947,
            112.832166,
            24.058329
        ]),
        width: 2,
        material: Cesium.Color.YELLOW
    }
});

这里为了看到效果，特意把最后一个点的纬度增大了，这个线并不是贴地的，因为在有些地方，它被地形挡住了

cesium贴地线_Math_02

看第一种折中的“贴地线”

将上面代码的 “polyline” 改成“corridor”,这么改实际上是构建了一个corridor面对象，但是可以看到线段的所有位置都是在地表的，

cesium贴地线_Math_03

但是这种方法会有一个问题，就是如果线上方有点云的话，点云颜色会被”线”影响(但是如果是面状geometry的话并不会被影响)

cesium贴地线_Math_04

来看第二种贴地线

viewer.dataSources.add(Cesium.GeoJsonDataSource.load('http://localhost:1234/lesson07/pwt1/line.json', {
     clampToGround: true
}));

线段用json配置，点位和上面一致

显示后发现情况和第二种一样

看第三种

原理参考法克鸡丝

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: 40
        }),
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 1.0, 0.0, 0.5))
        }
    }),
    classificationType: Cesium.ClassificationType.TERRAIN
}));

效果比较好，贴地而且不影响上面的点云，(可以理解为在地表贴了一个纹理，地表不显示，它也不显示)：

cesium贴地线_插值_05

第四种，来自官方示例 Ground Clamping

为方便大家查看，代码粘贴如下：

function() {
    var length = 1000;

    var startLon = Cesium.Math.toRadians(86.953793);
    var endLon = Cesium.Math.toRadians(86.896497);

    var lat = Cesium.Math.toRadians(27.988257);

    var terrainSamplePositions = [];
    for (var i = 0; i < length; ++i) {
        var lon = Cesium.Math.lerp(endLon, startLon, i / (length - 1));
        var position = new Cesium.Cartographic(lon, lat);
        terrainSamplePositions.push(position);
    }

    Cesium.when(Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, terrainSamplePositions), function(samples) {
        var offset = 10.0;
        for (var i = 0; i < samples.length; ++i) {
            samples[i].height += offset;
        }

        viewer.entities.add({
            polyline : {
                positions : Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray(samples),
                followSurface : false,
                width : 5,
                material : new Cesium.PolylineOutlineMaterialProperty({
                    color : Cesium.Color.ORANGE,
                    outlineWidth : 2,
                    outlineColor : Cesium.Color.BLACK
                }),
                depthFailMaterial : new Cesium.PolylineOutlineMaterialProperty({
                    color : Cesium.Color.RED,
                    outlineWidth : 2,
                    outlineColor : Cesium.Color.BLACK
                })
            }
        });

        var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116);
        offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162);
        viewer.camera.lookAt(target, offset);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    });
}

这个思路是在线段的首尾两点之间做插值，计算插值点点位的经纬度，保存在数组里面，然后通过地形信息将地形上对应点连成线

cesium贴地线_插值_06