实现效果如图：

实现代码如下：

<!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. Java中的队列同步器AQS

    一.AQS概念 1.队列同步器是用来构建锁或者其他同步组件的基础框架,使用一个int型变量代表同步状态,通过内置的队列来完成线程的排队工作. 2.下面是JDK8文档中对于AQS的部分介绍 public ...

  2. 【同余方程组】POJ1006 生理周期

    同余方程组: 先来看一道题目:有物不知其数,三三数之剩二:五五数之剩三:七七数之剩二.问物几何?  然后我们可以做如下变换,设x为所求的数. x%3=2              x ≡ a1(%m1 ...

  3. S-CMS企业建站v3几处SQL注入

    0x01 前言 有段时间没有发文章了,主要没挖到比较有意思的漏洞点.然后看最近爆了很多关于S-CMS的漏洞,下载了源码简单挖了一下然后给大家分享一下. 0x02 目录 Wap_index.php sq ...

  4. [Swift]LeetCode10. 正则表达式匹配 | Regular Expression Matching

    Given an input string (s) and a pattern (p), implement regular expression matching with support for  ...

  5. [Swift]LeetCode441. 排列硬币 | Arranging Coins

    You have a total of n coins that you want to form in a staircase shape, where every k-th row must ha ...

  6. 接口平台经常报server internal error（500）错误

    查询日志,发现连接mysql报错,web页面显示server internal error(500) 解决方法:重启mysql服务器 systemctl start mysqld #安装mysql # ...

  7. Python档案袋（ 面向对象 ）

    类即是一个模型,根据模型建立起不同的对象,对象间拥有共同的一些属性 简单的类: class P: #类变量,所有实例共享变量,推荐使用方法是:类名.类变量名 pvarx="ppvar1&qu ...

  8. Java-SSM框架页面时间格式转换

    在JSP中,列表查询绑定时间时,会出现以下的时间格式,那样看起来的话,感觉... 那如何转换成“yyyy-MM-dd HH:mm:ss”格式呢?--很简单,在JSP头顶加上 <%@ taglib ...

  9. windows服务器解决挖矿程序问题

    前几天发现服务器报警,cpu使用率已达100%,查资料知道正是最近比较流行的挖矿程序在捣鬼.我们使用的是阿里云的服务器,操作系统是windows server.网上有大量的资料讲如何处理,我把自己处理 ...

  10. 【Spark篇】---Spark解决数据倾斜问题

    一.前述 数据倾斜问题是大数据中的头号问题,所以解决数据清洗尤为重要,本文只针对几个常见的应用场景做些分析 . 二.具体方法  1.使用Hive ETL预处理数据 方案适用场景: 如果导致数据倾斜的是 ...