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

cesium地下模式(地表透明)2

 

 

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点击事件:获取wms服务矢量数据属性字段信息


下一篇:[CesiumJS]Cesium中级教程 - 空间数据可视化