实现效果如图：

实现代码如下：

<!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 实现地球的背景透明并显示自定义图片的更多相关文章

  1. android 自定义Dialog背景透明及显示位置设置

    先贴一下显示效果图,仅作参考: 代码如下: 1.自定义Dialog public class SelectDialog extends AlertDialog{ public SelectDialog ...

  2. Android 设置按钮背景透明与半透明_图片背景透明

    Button或者ImageButton的背景设为透明或者半透明 半透明<Button android:background="#e0000000" ... />  透明 ...

  3. 使IE6下PNG背景透明的七种方法任你选

    原文地址:http://blog.csdn.net/mosliang/article/details/6760028 相信如何解决png在ie6下透明的问题困扰了很多人.为了追求更好的页面效果,很多人 ...

  4. 利用javascript和WebGL绘制地球 【翻译】

    利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...

  5. 【原】CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  6. CSS实现背景透明，文字不透明（兼容各浏览器）

    在 FF/Chrome 等较新的浏览器中可以使用css属性background- color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜f ...

  7. CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  8. IOS修改webView背景透明以及IOS调用前台js的方法

    工作上遇到IOS的webView中的H5页面需要透明以显示webView的背景颜色.用H5自身的透明度的css样式或者js控制背景颜色及透明度都打不到想要的效果,最后还是通过ios设置webView中 ...

  9. css 背景透明文字(内容)不透明三种实现方法

    好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...

随机推荐

  1. MongoDB 错误汇总

    错误1. ERROR: child process failed, exited with error number 100 可能原因: 1.没有正确关闭服务 2.服务已经启动 3.conf文件的参数 ...

  2. 数组Array和列表集合ArrayList、LinkedList和Vector的区别

    一.ArrayList和Vector的区别 ArrayList与Vector主要从以下方面来说. 1.同步性: Vector是线程安全的,也就是说是同步的,而ArrayList是线程序不安全的,不是同 ...

  3. LeetCode题解38.Count and Say

    38. Count and Say The count-and-say sequence is the sequence of integers beginning as follows: 1, 11 ...

  4. #Java学习之路——基础阶段（第六篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  5. [Swift]LeetCode583. 两个字符串的删除操作 | Delete Operation for Two Strings

    Given two words word1 and word2, find the minimum number of steps required to make word1 and word2 t ...

  6. [Swift]LeetCode952. 按公因数计算最大组件大小 | Largest Component Size by Common Factor

    Given a non-empty array of unique positive integers A, consider the following graph: There are A.len ...

  7. Python档案袋（异常与异常捕获 )

    无异常捕获 程序遇到异常会中断 print( xxx ) print("---- 完 -----") 得到结果为: 有异常捕获 程序遇到异常会进入异常处理,并继续执行下面程序 tr ...

  8. Python—day13 迭代器、迭代器对象、for循环对象、生成器、枚举对象

    一.迭代器 1.迭代器概念: 器:包含了多个值的容器 迭代:循环反馈(一次从容器在取出一个值) 迭代器:从装有多个值的容器在一次取出一个值 ls=[3,5,7,1,9] 遍历:被遍历的对象必须是有序容 ...

  9. Spring高级装配bean

    目录 spring profile 条件化的bean声明 自动装配与歧义性 bean的作用域 Spring表达式语言 一.环境与profile 配置profile  bean 在软件开发的时候,有一个 ...

  10. .NET Core中的路由约束

    背景介绍 上周给大家分享了Nancy in .NET Core学习笔记 - 路由之后, 就一直在考虑.NET Core能否实现和Nancy中一样的路由约束, 最近查阅了一下MSDN及一些国外博客, 发 ...