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

最新推荐文章于 2024-04-22 15:36:45 发布

weixin_30820151

最新推荐文章于 2024-04-22 15:36:45 发布

阅读量1.2k

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/yaohuimo/p/10679334.html

版权

实现效果如图：

实现代码如下：

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

转载于:https://www.cnblogs.com/yaohuimo/p/10679334.html

weixin_30820151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SuperMap -WebGL 实现地球的背景透明并显示自定义图片

实现效果如图：实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> ...
复制链接

扫一扫