码迷,mamicode.com
首页 > Web开发 > 详细

SuperMap -WebGL 实现地球的背景透明并显示自定义图片

时间:2019-04-09 21:02:25      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:supermap   ica   htm   alt   ret   erro   ace   build   ble   

 

实现效果如图:

 技术图片

实现代码如下:

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

  

SuperMap -WebGL 实现地球的背景透明并显示自定义图片

标签:supermap   ica   htm   alt   ret   erro   ace   build   ble   

原文地址:https://www.cnblogs.com/yaohuimo/p/10679334.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!