How to display data underground in cesium.js?
Question
I want to display a polyline underground in cesium.js. But I have no idea about this.
2 answers
solution1
2 2018-01-18 08:25:27
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 .
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.
For gif, see here .
1.change only one line code in cesium source code ;get the cesium source code,then find the file named GlobeSurfaceTileProvider.js,change
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 . PS： You may need set your node environment and install the dependency node modules and install gulp tool.
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.
<!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>
solution2
1 2017-01-10 16:59:05
Yes, this is supported in 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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.