实现效果如图：

实现代码如下：

<!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. 音视频编解码技术（二）：AAC 音频编码技术

    一.AAC编码概述 AAC是高级音频编码(Advanced Audio Coding)的缩写,出现于1997年,最初是基于MPEG-2的音频编码技术,目的是取代MP3格式.2000年,MPEG-4标准 ...

  2. [Swift]LeetCode349. 两个数组的交集 | Intersection of Two Arrays

    Given two arrays, write a function to compute their intersection. Example 1: Input: nums1 = [1,2,2,1 ...

  3. [Swift]LeetCode424. 替换后的最长重复字符 | Longest Repeating Character Replacement

    Given a string that consists of only uppercase English letters, you can replace any letter in the st ...

  4. [Swift]LeetCode735. 行星碰撞 | Asteroid Collision

    We are given an array asteroids of integers representing asteroids in a row. For each asteroid, the ...

  5. Qt创建分割窗口

    1.QT中QSplitter类可以用来灵活分割窗口,从而产生可用的布局,在以后进行界面布局很有用. 2.先看代码,这个分割窗口按顺序添加子窗口: #include "mainwindow.h ...

  6. Cassandra如何利用线性一致性来实现轻量级的事务

    分布式数据库会面临着一个独特的挑战,就是数据必须要严格的按照读,写顺序执行.如创建用户,转账,两个潜在的写操作竞态条件必须要确保一个写操作必须在另外一个之前发生.在Cassandra中,使用Paxos ...

  7. java代码之美（10）---Java8 Map中的computeIfAbsent方法

    Map中的computeIfAbsent方法 Map接口的实现类如HashMap,ConcurrentHashMap,HashTable等继承了此方法,通过此方法可以在特定需求下,让你的代码更加简洁. ...

  8. qt4升级到qt5的一些问题

    由于最近项目使用的qt版本从qt4.8升级到qt5.5,虽然从4到5的变化不大,不过还是有许多的问题需要记录一下,希望可以帮助到更多的人​ 1.由于Qt5将大部分桌面部件移到了Qt Widgets模块 ...

  9. 『最长等差数列 线性DP』

    最长等差数列(51nod 1055) Description N个不同的正整数,找出由这些数组成的最长的等差数列. 例如:1 3 5 6 8 9 10 12 13 14 等差子数列包括(仅包括两项的不 ...

  10. logback配置信息

    <?xml version="1.0" encoding="UTF-8"?> <configuration scan="true&q ...