gpt4 book ai didi

javascript - cesium.js如何在地下显示数据?

转载 作者:行者123 更新时间:2023-11-29 10:33:10 26 4
gpt4 key购买 nike

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

最佳答案

貌似cesium还没有提供官方的地下功能,原因是cesium cameral can not be placed undergroud ,但是地下效果可以通过另一种方式获得--translucent terrain

根据How to display underground entity?在Cesium-dev google group,我实现了勉强令人满意的方法来显示地下的实体(包括gltf模型)。显示效果与GIF文件显示的一样。这个方法主要包含3个步骤。

enter image description here对于 gif,请参阅 here .

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

command.pass = Pass.GLOBE;

command.pass = Pass.TRANSLUCENT;

2.使用gulp工具生成cesium发布代码;使用你的CLI执行gulp release。 PS:您可能需要设置您的节点环境并安装依赖节点模块和安装gulp工具。

3.实现代码。PS:请注意,以下代码片段只有在您更改了第一步中说明的 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>

关于javascript - cesium.js如何在地下显示数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41541223/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com