实现效果如图：

实现代码如下：

<!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. spring的定时器

    一:基于xml配置的方式 1:编写普通的pojo 类 package com.aflyun.web.task; import org.springframework.stereotype.Compon ...

  2. 微信小程序 open-data更改样式 open-data 显示头像 圆形

    废话不多说,直接看效果: 效果一: 代码如下: <view class='zhubo'> <view class='zhuboLeft'> <view class='zh ...

  3. IOS微信点击input弹出输入法，关闭后页面留白解决方案

    场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局             解决方法: 给input添加 ...

  4. [Swift]LeetCode12. 整数转罗马数字 | Integer to Roman

    Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 ...

  5. [Swift]LeetCode784. 字母大小写全排列 | Letter Case Permutation

    Given a string S, we can transform every letter individually to be lowercase or uppercase to create ...

  6. SpringBoot时间戳与MySql数据库记录相差14小时排错

    项目中遇到存储的时间戳与真实时间相差14小时的现象,以下为解决步骤. 问题 CREATE TABLE `incident` ( `id` int(11) NOT NULL AUTO_INCREMENT ...

  7. Spring设计模式_策略模式/其他

    策略模式特性 1.执行最终结果一样 2.执行过程和执行逻辑不一样 3.使用同一接口 达到目的就可以了 Git地址 https://github.com/wujiachengSH/WjcStrategy ...

  8. java多线程（7）---Condition

    Condition 一.Condition概述 在线程的同步时可以使一个线程阻塞而等待一个信号,同时放弃锁使其他线程可以能竞争到锁. 在synchronized中我们可以使用Object的wait() ...

  9. Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...

  10. Vue API(directives) 自定义指令

    前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...