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

Question

I want to display a polyline underground in cesium.js. 我想在cesium.js中显示地下折线。 But I have no idea about this. 但我不知道这个。

Answer 1

It seems that cesium has not provided official underground function for the reason that cesium cameral can not be placed undergroud ,but the underground effect can be gained by an alternative way-- translucent terrain . 似乎铯没有提供官方的地下功能，因为铯摄影不能放置地下，但地下效应可以通过另一种方式获得 - translucent terrain 。

According How to display underground entity? 根据如何显示地下实体？ in Cesium-dev google group,I have achieved a barely satisfactory approach to showing the entity(including gltf models) underground.The displaying effect is as what the GIF file shows.This appoach contains mainly 3 steps. 在Cesium-dev google小组中，我已经实现了一种不太令人满意的方法来将实体（包括gltf模型）显示在地下。显示效果与GIF文件显示的一样。这个方法主要包含3个步骤。

For gif, see here . 对于gif，请看这里。

1.change only one line code in cesium source code ;get the cesium source code,then find the file named GlobeSurfaceTileProvider.js,change 1.在cesium源代码中只更改一行代码 ;获取cesium源代码，然后找到名为GlobeSurfaceTileProvider.js的文件，更改

command.pass = Pass.GLOBE;

to 至

command.pass = Pass.TRANSLUCENT;

2.generate the cesium release code with gulp tool ;use your CLI to execute gulp release . 2.使用gulp工具生成铯释放代码 ;使用CLI执行gulp release 。 PS： You may need set your node environment and install the dependency node modules and install gulp tool. PS：您可能需要设置节点环境并安装依赖节点模块并安装gulp工具。

3.Implemention code .PS: note the following snippet can run only if you have changed the cesium source code which is illustrated in step one. 3.Implemention 代码 .PS：请注意，只有在您更改了步骤1中说明的cesium源代码后，才能运行以下代码段。

 <!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>

Answer 2

Yes, this is supported in cesium. 是的，这在cesium中得到了支持。 It can be hard to see sometimes since the camera cannot go bellow the ellipsoid. 有时很难看到，因为相机不能低于椭圆体。

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 生活

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

问题描述

2 个解决方案

解决方案1
2 2018-01-18 08:25:27

解决方案2
1 2017-01-10 16:59:05

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

问题描述

2 个解决方案

解决方案1 2 2018-01-18 08:25:27

解决方案2 1 2017-01-10 16:59:05

解决方案1
2 2018-01-18 08:25:27

解决方案2
1 2017-01-10 16:59:05