【GIS】Cesium地下模式设置

1、代码
<!DOCTYPE html>

<head>
    <Meta charset="utf-8">
    <title>地上地下</title>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script src="./js/config.js"></script>
    <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
</head>
<script src="/js/lib/cesiumplugins/ImageryProvider-WebExtend.js"></script>

<body>
    <div id="cesiumContainer"></div>
    <div id='toolbar' class="param-container tool-bar">
        <label style="color: #FFFFFF">影像: </label>
        <input type="range" id="影像" min="0" max="1" value="1" step="0.05" style="width: 170px">
        <br />
        <label style="color: #FFFFFF">地形: </label>
        <input type="checkBox" id="地形">&nbsp&nbsp&nbsp
        <br />

    </div>
    <script>
        function onl oad(Cesium) {
            var Routes1;
            var Routes2;
            var Routes3;

            var GoogleMap = ImageryProviderWebExtendTool.createGoogleMapsByUrl(Cesium, {
                url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}"
            });

            var viewer = new Cesium.Viewer('cesiumContainer', {
                // imageryProvider: GoogleMap
            });

            // viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
            //     url: './images/BlackMarble_2016.jpg'
            // }));

            viewer.imageryLayers.addImageryProvider(GoogleMap);

            var globe = viewer.scene.globe;

            viewer.scene.undergroundMode = true;

            viewer.scene.sun.show = false;
            viewer.scene.moon.show = false;
            viewer.scene.skyBox.show = false;
            viewer.scene.skyAtmosphere.show = false;
            viewer.scene.fxaa = true;

            $("#影像").on("input change", function() {
                globe.globeAlpha = this.value;
            });
 
            var blueBox = viewer.entities.add({
                name: 'Blue Box with black outline',
                position: Cesium.Cartesian3.fromdegrees(-107.0, 40.0),
                Box: {
                    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                    material: Cesium.Color.BLUE.withAlpha(0.5),
                    outline: true,
                    // height: 100,
                    outlineColor: Cesium.Color.BLACK,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                }
            });

            var yellowBox = viewer.entities.add({
                name: 'Yellow Box with black outline',
                position: Cesium.Cartesian3.fromdegrees(-108.202, 41.202),
                Box: {
                    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                    material: Cesium.Color.YELLOW.withAlpha(0.5),
                    outline: true,
                    outlineColor: Cesium.Color.BLACK,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                }
            });

            var czml = [{
                "id": "document",
                "name": "Box",
                "version": "1.0"
            }, {
                "id": "shape2",
                "name": "Red Box with black outline",
                "position": {
                    "cartographicdegrees": [-107.0, 40.0, -150000.0]
                },
                "Box": {
                    "dimensions": {
                        "cartesian": [400000.0, 300000.0, 500000.0]
                    },
                    "material": {
                        "solidColor": {
                            "color": {
                                "rgba": [255, 0, 0, 128]
                            }
                        }
                    },
                    "outline": true,
                    "outlineColor": {
                        "rgba": [0, 0, 0, 255]
                    },
                    "heightReference": Cesium.HeightReference.CLAMP_TO_GROUND
                }
            }];

            var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
            viewer.dataSources.add(dataSourcePromise);

            viewer.zoomTo(viewer.entities);
        };
    </script>
</body>
2、效果
【GIS】Cesium地下模式设置

相关推荐
