Question

我想在cesium.js中显示地下折线。但我对此一无所知。

Answer 1

是的，这在cesium中得到了支持。有时很难看到，因为相机不能低于椭圆体。

var viewer = new Cesium.Viewer('cesiumContainer');

var purpleArrow = viewer.entities.add({
    name : 'Purple straight arrow at height',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, -200000,
                                                               -90, 43, -200000]),
        width : 10,
        followSurface : false,
        material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
    }
});

viewer.zoomTo(viewer.entities);

Live

Answer 2

似乎铯没有提供官方地下功能cesium cameral can not be placed undergroud，但地下效应可以通过另一种方式获得 - translucent terrain。

根据Cesium-dev google小组中的How to display underground entity?，我已经实现了一种不太令人满意的方法来向地下显示实体（包括gltf模型）。显示效果与GIF文件一样这个方法主要包含3个步骤。

对于gif，请参阅here。

1.只更改cesium源代码中的一行代码;获取cesium源代码，然后找到名为GlobeSurfaceTileProvider.js的文件，更改

command.pass = Pass.GLOBE;

到

command.pass = Pass.TRANSLUCENT;

2.使用gulp工具生成铯释放代码;使用CLI执行gulp release。 PS：您可能需要设置节点环境并安装依赖节点模块并安装gulp工具。

3.Implemention code .PS：请注意，只有在您更改了第一步中说明的cesium源代码后，才能运行以下代码段。

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Hello World!</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
        @import url(../Build/Cesium/Widgets/widgets.css);
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
        }

        .tools {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="cesiumContainer">
        </div>
        <div class="tools">
            Opacity: <input id="btnImageryAlpha" type="range" min="0" max="10" value="10" oninput="change()" />
        </div>
    </div>
    <script>
        function change() {
            var value = document.getElementById("btnImageryAlpha").value;
            if (viewer.imageryLayers) {
                for (var i = 0; i < viewer.imageryLayers.length; i++) {
                    viewer.imageryLayers.get(i).alpha = value / 10;
                }
            }
            console.log(value);
        }

        var terrainProvider = new Cesium.CesiumTerrainProvider({
            url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
            requestVertexNormals: true
        });
        var viewer = new Cesium.Viewer('cesiumContainer', {
            //skyAtmosphere: false,
            //orderIndependentTranslucency: false,
            baseLayerPicker: false,
            terrainProvider: terrainProvider
        });
        //viewer.scene.globe.depthTestAgainstTerrain = false;
        //change the ugly blue color to black
        viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);
        //default is 1
        //viewer.scene.globe.imageryLayers.get(0).alpha = 0.5;

        var blueBox = viewer.entities.add({
            name: 'Blue box',
            position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 5),
            box: {
                dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                material: Cesium.Color.BLUE
            }
        });

        viewer.zoomTo(blueBox);
    </script>
</body>

</html>

＆＃13;

如何在cesium.js中显示地下数据？

2 个答案: