如何在cesium.js中顯示地下數據？

Question

我想在cesium.js中顯示地下折線。 但我不知道這個。

Answer 1

似乎銫沒有提供官方的地下功能，因為銫攝影不能放置地下，但地下效應可以通過另一種方式獲得 - translucent terrain 。

根據如何顯示地下實體？ 在Cesium-dev google小組中，我已經實現了一種不太令人滿意的方法來將實體（包括gltf模型）顯示在地下。顯示效果與GIF文件顯示的一樣。這個方法主要包含3個步驟。

對於gif，請看這里。

1.在cesium源代碼中只更改一行代碼 ;獲取cesium源代碼，然后找到名為GlobeSurfaceTileProvider.js的文件，更改

command.pass = Pass.GLOBE;

至

command.pass = Pass.TRANSLUCENT;

2.使用gulp工具生成銫釋放代碼 ;使用CLI執行gulp release 。 PS：您可能需要設置節點環境並安裝依賴節點模塊並安裝gulp工具。

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

是的，這在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);

生活

如何在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