zoukankan      html  css  js  c++  java
  • SuperMap -WebGL 实现地球的背景透明并显示自定义图片

    实现效果如图:

     

    实现代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <meta name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <title>background-image</title>
        <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <link href="./css/pretty.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
    </head>
    
    <body>
        <div id="cesiumContainer" class="fullSize" style="background-image: url(./images/home_banner.jpg);"></div>
    
        <script>
            function onload(Cesium) {
                var viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    infoBox: false,
                    selectionIndicator: false,
                    skyBox: false,
                    shadows: false,
                    homeButton: false,
                    navigationInstructionsInitiallyVisible: false,
                    navigationHelpButton: false,
                    skyAtmosphere: false, //天空色不显示
                    orderIndependentTranslucency: false,
                    contextOptions: {
                        webgl: {
                            alpha: true,
                        }
                    },
                });
    
                var scene = viewer.scene;
                //改变天空颜色
                scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
    
    
    
    
                var promise = scene.open("http://localhost:8090/iserver/services/3D-newScene/rest/realspace");
    
                Cesium.when(promise, function (layer) {
                    viewer.scene.camera.flyTo({
                        destination: new Cesium.Cartesian3.fromDegrees(54.366605, 24.517977, 1883.399550),
                        orientation: {
                            heading: 3.3244272759237896, //围绕负z轴的旋转
                            pitch: -0.37708595899211894, //围绕负y轴的旋转
                            roll: 6.283172666049328 //围绕正x轴的旋转
                        },
    
                    });
                }, function (e) {
                    if (widget._showRenderLoopErrors) {
                        var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?';
                        widget.showErrorPanel(title, undefined, e);
                    }
                });
            }
        </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    搜索回车跳转页面
    登录验证码
    【排序算法】排序算法之插入排序
    PAT 乙级 1044 火星数字 (20 分)
    PAT 甲级 1035 Password (20 分)
    PAT 甲级 1041 Be Unique (20 分)
    PAT 甲级 1054 The Dominant Color (20 分)
    PAT 甲级 1027 Colors in Mars (20 分)
    PAT 甲级 1083 List Grades (25 分)
    PAT 甲级 1005 Spell It Right (20 分)
  • 原文地址:https://www.cnblogs.com/yaohuimo/p/10679334.html
Copyright © 2011-2022 走看看