cesium地下模式（地表透明）2

Posted 2022-10-05 smilingeye

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cesium地下模式（地表透明）2相关的知识，希望对你有一定的参考价值。

接上一篇博客，这篇直接分析火星的源码，看它到底改了些什么。

1.火星代码里修改了4处源码

1.1.GlobeSurfaceTileProvider.js

将

command.pass = Pass.GLOBE;

改为

command.pass = M.underEarth.enaMble?Pass.TRANSLUCENT:Pass.GLOBE;

1.2.RenderState.js

将

var enabled = cull.enabled;

改为

var enabled = defaultValue(M.undMerEarth.cullFace, cull.enabled);

1.3.Camera.js

将

                if (cartographic.height < height) 
                    cartographic.height = height;
                    if (mode === SceneMode.SCENE3D) 
                        ellipsoid.cartographicToCartesian(cartographic, this.position);
                     else 
                        projection.project(cartographic, this.position);
                    
                    heightUpdated = true;

改为（主要是监测到进入地下不自己弹出来的问题）

                if (cartographic.height < height) 
                    if (M.underEarth.enable && cartographic.height > (height - M.underEarth.enableDepth))
                        return;
                    
                    cartographic.height = height;
                    if (mode === SceneMode.SCENE3D) 
                        ellipsoid.cartographicToCartesian(cartographic, this.position);
                     else 
                        projection.project(cartographic, this.position);
                    
                    heightUpdated = true;

1.4.QuantizedMeshTerrainData.js（不知道有什么用，此处我没有改）

将

        return when(upsamplePromise).then(function(result) 
            var quantizedVertices = new Uint16Array(result.vertices);
            var indicesTypedArray = IndexDatatype.createTypedArray(quantizedVertices.length / 3, result.indices);
            var encodedNormals;
            if (defined(result.encodedNormals)) 
                encodedNormals = new Uint8Array(result.encodedNormals);

改为

        return M.underEarth.enableSkirt &&(westSkirtHeight = 0,
                    southSkirtHeight = 0,
                    eastSkirtHeight = 0,
                    northSkirtHeight = 0),when(upsamplePromise).then(function(result) 
            var quantizedVertices = new Uint16Array(result.vertices);
            var indicesTypedArray = IndexDatatype.createTypedArray(quantizedVertices.length / 3, result.indices);
            var encodedNormals;
            if (defined(result.encodedNormals)) 
                encodedNormals = new Uint8Array(result.encodedNormals);

2.火星新增了两个js文件

2.1.ExpandByMars.js

define(["../Core/clone"], function (e) 
    "use strict";
    return 
        trustGenerator: ["fanfan"],
        _defaultFloodAnalysis: 
            floodVar: [0, 0, 0, 500],
            ym_pos_x: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            ym_pos_y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            ym_pos_z: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            rect_flood: [0, 0, 0, 0, 0, 0, 0, 0, 0],
            floodSpeed: 1,
            ym_max_index: 0,
            globe: !0,
            showElseArea: !0
        ,
        floodAnalysis: 
            floodVar: [0, 0, 0, 500],
            ym_pos_x: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            ym_pos_y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            ym_pos_z: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            rect_flood: [0, 0, 0, 0, 0, 0, 0, 0, 0],
            floodSpeed: 1,
            ym_max_index: 0,
            globe: !0,
            showElseArea: !0
        ,
        resetFloodAnalysis: function () 
            this.floodAnalysis = e(this._defaultFloodAnalysis)
        ,
        _defaultExcavateAnalysis: 
            splitNum: 30,
            showSelfOnly: !1,
            dig_pos_x: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            dig_pos_y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            dig_pos_z: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            rect_dig: [0, 0, 0, 0, 0, 0, 0, 0, 0],
            dig_max_index: 0,
            excavateHeight: 0,
            excavateMinHeight: 9999,
            excavatePerPoint: !1
        ,
        excavateAnalysis: 
            splitNum: 30,
            showSelfOnly: !1,
            dig_pos_x: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            dig_pos_y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            dig_pos_z: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            rect_dig: [0, 0, 0, 0, 0, 0, 0, 0, 0],
            dig_max_index: 0,
            excavateHeight: 0,
            excavateMinHeight: 9999,
            excavatePerPoint: !1
        ,
        resetExcavateAnalysis: function () 
            this.excavateAnalysis = e(this._defaultExcavateAnalysis)
        ,
        _defaultTilesEditor: 
            floodVar: [0, 0, 0, 0],
            flatRect: [0, 0, 0, 0, 0, 0, 0, 0, 0],
            yp_mat_x: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            yp_mat_y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            yp_mat_z: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            yp_max_index: 0,
            model_min_height: 50,
            IsYaPing: [!1, !1, !1, !1],
            yp_show_InOrOut: [!1, !0, !0, !1],
            yp_black_texture: null,
            hm_dh_attr: [50, 1, 100],
            modelLight: 2.2,
            times: (new Date).getTime(),
            floodColor: [0, 0, 0, .5]
        ,
        tilesEditor: 
            floodVar: [0, 0, 0, 0],
            flatRect: [0, 0, 0, 0, 0, 0, 0, 0, 0],
            yp_mat_x: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            yp_mat_y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            yp_mat_z: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            yp_max_index: 0,
            model_min_height: 50,
            IsYaPing: [!1, !1, !1, !1],
            yp_show_InOrOut: [!1, !0, !0, !1],
            yp_black_texture: null,
            hm_dh_attr: [50, 1, 100],
            modelLight: 2.2,
            times: (new Date).getTime(),
            floodColor: [0, 0, 0, .5]
        ,
        resetTilesEditor: function () 
            this.tilesEditor = e(this._defaultTilesEditor)
        ,
        underEarth: 
            cullFace: void 0,
            enable: void 0,
            enableDepth: 100,
            enableSkirt: !1
        ,
        occlusionOpen: !0
    
)

2.2.underground.js

文件做了修改了，大概的意思如下面代码

function underground(t, i) 
    this._viewer = t;
    var n = Cesium.defaultValue(i, );
    this._depth = Cesium.defaultValue(n.depth, 500),
        this._alpha = Cesium.defaultValue(n.alpha, .5),
        this.enable = Cesium.defaultValue(n.enable, !1)

underground.prototype._updateImageryLayersAlpha=function(e) 
    for (var t = this._viewer.imageryLayers._layers, i = 0, a = t.length; i < a; i++)
        t[i].alpha = e

underground.prototype._historyOpts =function() 
    var e = ;
    e.alpha = Cesium.clone(this._viewer.imageryLayers._layers[0] && this._viewer.imageryLayers._layers[0].alpha),
    e.highDynamicRange = Cesium.clone(this._viewer.scene.highDynamicRange),
    e.skyShow = Cesium.clone(this._viewer.scene.skyAtmosphere.show),
    e.skyBoxShow = Cesium.clone(this._viewer.scene.skyBox.show),
    e.depthTest = Cesium.clone(this._viewer.scene.globe.depthTestAgainstTerrain),
    this._viewer.scene.globe._surface && this._viewer.scene.globe._surface._tileProvider && this._viewer.scene.globe._surface._tileProvider._renderState && (e.blending = Cesium.clone(this._viewer.scene.globe._surface._tileProvider._renderState.blending)),
    this._oldViewOpts = e

underground.prototype.activate =function() 
    if (!this._enable) 
        this._enable = !0,
        this._historyOpts(),
        this._updateImageryLayersAlpha(this._alpha);
        var e = this._viewer;
        Cesium.ExpandByMars.underEarth.cullFace = !1,
        Cesium.ExpandByMars.underEarth.enable = !0,
        Cesium.ExpandByMars.underEarth.enableDepth = this._depth,
        Cesium.ExpandByMars.underEarth.enableSkirt = !0,
        e.scene.globe.depthTestAgainstTerrain = !0,
        e.scene.highDynamicRange = !1,
        e.scene.skyAtmosphere.show = !1,
        e.scene.skyBox.show = !1,
        e.scene.globe._surface._tileProvider && e.scene.globe._surface._tileProvider._renderState && e.scene.globe._surface._tileProvider._renderState.blending /*&& (e.scene.globe._surface._tileProvider._renderState.blending.enabled = !0,
        e.scene.globe._surface._tileProvider._renderState.blending.equationRgb = Cesium.BlendEquation.ADD,
        e.scene.globe._surface._tileProvider._renderState.blending.equationAlpha = Cesium.BlendEquation.ADD,
        e.scene.globe._surface._tileProvider._renderState.blending.functionSourceAlpha = Cesium.BlendFunction.ONE,
        e.scene.globe._surface._tileProvider._renderState.blending.functionSourceRgb = Cesium.BlendFunction.ONE,
        e.scene.globe._surface._tileProvider._renderState.blending.functionDestinationAlpha = Cesium.BlendFunction.ZERO,
        e.scene.globe._surface._tileProvider._renderState.blending.functionDestinationRgb = Cesium.BlendFunction.ZERO)*/
    

underground.prototype.disable=function() 
    if (this._enable) 
        this._enable = !1,
        this._updateImageryLayersAlpha(this._oldViewOpts.alpha);
        var e = this._viewer;
        Cesium.ExpandByMars.underEarth.cullFace = void 0,
        Cesium.ExpandByMars.underEarth.enable = !1,
        Cesium.ExpandByMars.underEarth.enableDepth = 0,
        Cesium.ExpandByMars.underEarth.enableSkirt = !1,
        e.scene.globe.depthTestAgainstTerrain = this._oldViewOpts.depthTest,
        e.scene.skyBox.show = this._oldViewOpts.skyBoxShow,
        e.scene.highDynamicRange = this._oldViewOpts.highDynamicRange,
        e.scene.skyAtmosphere.show = this._oldViewOpts.skyShow/*,
        void 0 != this._oldViewOpts.blending && (e.scene.globe._surface._tileProvider._renderState.blending = this._oldViewOpts.blending)*/
    

underground.prototype.destroy=function()
    delete this._viewer,
    delete this._alpha,
    delete this._depth,
    delete this._enable,
    delete this._oldViewOpts

3.测试

3.1.修改3处源码

3.2.增加1个文件，ExpandByMars.js

技术图片

3.3.重新打包

npm run minifyRelease

3.4.沙盒里测试

function underground(t, i) 
    this._viewer = t;
    var n = Cesium.defaultValue(i, );
    this._depth = Cesium.defaultValue(n.depth, 500),
        this._alpha = Cesium.defaultValue(n.alpha, .5),
        this.enable = Cesium.defaultValue(n.enable, !1)

underground.prototype._updateImageryLayersAlpha=function(e) 
    for (var t = this._viewer.imageryLayers._layers, i = 0, a = t.length; i < a; i++)
        t[i].alpha = e

underground.prototype._historyOpts =function() 
    var e = ;
    e.alpha = Cesium.clone(this._viewer.imageryLayers._layers[0] && this._viewer.imageryLayers._layers[0].alpha),
    e.highDynamicRange = Cesium.clone(this._viewer.scene.highDynamicRange),
    e.skyShow = Cesium.clone(this._viewer.scene.skyAtmosphere.show),
    e.skyBoxShow = Cesium.clone(this._viewer.scene.skyBox.show),
    e.depthTest = Cesium.clone(this._viewer.scene.globe.depthTestAgainstTerrain),
    this._viewer.scene.globe._surface && this._viewer.scene.globe._surface._tileProvider && this._viewer.scene.globe._surface._tileProvider._renderState && (e.blending = Cesium.clone(this._viewer.scene.globe._surface._tileProvider._renderState.blending)),
    this._oldViewOpts = e

underground.prototype.activate =function() 
    if (!this._enable) 
        this._enable = !0,
        this._historyOpts(),
        this._updateImageryLayersAlpha(this._alpha);
        var e = this._viewer;
        Cesium.ExpandByMars.underEarth.cullFace = !1,
        Cesium.ExpandByMars.underEarth.enable = !0,
        Cesium.ExpandByMars.underEarth.enableDepth = this._depth,
        Cesium.ExpandByMars.underEarth.enableSkirt = !0,
        e.scene.globe.depthTestAgainstTerrain = !0,
        e.scene.highDynamicRange = !1,
        e.scene.skyAtmosphere.show = !1,
        e.scene.skyBox.show = !1,
        e.scene.globe._surface._tileProvider && e.scene.globe._surface._tileProvider._renderState && e.scene.globe._surface._tileProvider._renderState.blending /*&& (e.scene.globe._surface._tileProvider._renderState.blending.enabled = !0,
        e.scene.globe._surface._tileProvider._renderState.blending.equationRgb = Cesium.BlendEquation.ADD,
        e.scene.globe._surface._tileProvider._renderState.blending.equationAlpha = Cesium.BlendEquation.ADD,
        e.scene.globe._surface._tileProvider._renderState.blending.functionSourceAlpha = Cesium.BlendFunction.ONE,
        e.scene.globe._surface._tileProvider._renderState.blending.functionSourceRgb = Cesium.BlendFunction.ONE,
        e.scene.globe._surface._tileProvider._renderState.blending.functionDestinationAlpha = Cesium.BlendFunction.ZERO,
        e.scene.globe._surface._tileProvider._renderState.blending.functionDestinationRgb = Cesium.BlendFunction.ZERO)*/
    

underground.prototype.disable=function() 
    if (this._enable) 
        this._enable = !1,
        this._updateImageryLayersAlpha(this._oldViewOpts.alpha);
        var e = this._viewer;
        Cesium.ExpandByMars.underEarth.cullFace = void 0,
        Cesium.ExpandByMars.underEarth.enable = !1,
        Cesium.ExpandByMars.underEarth.enableDepth = 0,
        Cesium.ExpandByMars.underEarth.enableSkirt = !1,
        e.scene.globe.depthTestAgainstTerrain = this._oldViewOpts.depthTest,
        e.scene.skyBox.show = this._oldViewOpts.skyBoxShow,
        e.scene.highDynamicRange = this._oldViewOpts.highDynamicRange,
        e.scene.skyAtmosphere.show = this._oldViewOpts.skyShow/*,
        void 0 != this._oldViewOpts.blending && (e.scene.globe._surface._tileProvider._renderState.blending = this._oldViewOpts.blending)*/
    

underground.prototype.destroy=function()
    delete this._viewer,
    delete this._alpha,
    delete this._depth,
    delete this._enable,
    delete this._oldViewOpts






var viewer = new Cesium.Viewer(‘cesiumContainer‘);
viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);
            var blueBox = viewer.entities.add(
                name: ‘Blue box‘,
                position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 5),
                box: 
                    dimensions: new Cesium.Cartesian3(100.0, 100.0, 5000.0),
                    material: Cesium.Color.RED
                
            );
viewer.zoomTo(blueBox);
var ug = new underground(viewer, 
                depth: 5000,
                alpha: 0.6
            )
ug.activate();

Sandcastle.addToggleButton(‘地下模式‘, true, function(checked) 
    checked?ug.activate():ug.disable();
    );

以上是关于cesium地下模式（地表透明）2的主要内容，如果未能解决你的问题，请参考以下文章

Cesium原理篇：glTF

用Cesium可视化地下设施矿山和地质层

Cesium 发行日志[官方同步至1.69]

cesium如何改变地图gamma某一块区域的透明度

基于 React hooks + Typescript + Cesium 的三维 webgis 实战系列教程

Cesium专栏-terrain地形3dtiles模型gltf模型高度采样