• 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>
    

      

  • 相关阅读:
    Mac pycharm专业版安装以及破解方法
    Django 错误之 No module named ‘MySQLdb’
    archery部署
    MySQL监控内容
    mac安装神器brew
    4. 寻找两个有序数组的中位数
    7.整数反转
    2.两数相加
    1. 两数之和
    141. 环形链表
  • 原文地址:https://www.cnblogs.com/yaohuimo/p/10679334.html
Copyright © 2020-2023  润新知