个人中心
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
文章推荐： ios - 如何让 UILabel 在单词末尾显示 "..."而不是截断它？
文章推荐： mysql - 用户仅具有选择的 mysql 权限，但 phpMyAdmin 允许编辑
文章推荐： mysql - 使用复杂子查询进行 SQL 练习
文章推荐： javascript - 如何在 RiveScript 的 javascript 对象宏中发出同步获取请求？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com