【GIS】Cesium地下模式设置

2020-05-26 17:01:41 阅读：484 来源： 互联网

标签：box GIS outline viewer scene var 设置 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、效果

标签：box,GIS,outline,viewer,scene,var,设置,Cesium
来源： https://www.cnblogs.com/defineconst/p/12966605.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【GIS】Cesium地下模式设置