实现效果如图：

实现代码如下：

<!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. 使用BurpSuite进行双文件上传拿Webshell

    首先进入网站后台:(后台界面应该是良精CMS) <ignore_js_op> 在 添加产品 这一栏有个上传文件: <ignore_js_op> 选择一个*.jpg格式的图片进行 ...

  2. [Swift]LeetCode329. 矩阵中的最长递增路径 | Longest Increasing Path in a Matrix

    Given an integer matrix, find the length of the longest increasing path. From each cell, you can eit ...

  3. [Swift]LeetCode749. 隔离病毒 | Contain Virus

    A virus is spreading rapidly, and your task is to quarantine the infected area by installing walls. ...

  4. [Swift]LeetCode1014. 最佳观光组合 | Best Sightseeing Pair

    Given an array A of positive integers, A[i] represents the value of the i-th sightseeing spot, and t ...

  5. Java运行原理及内存分析

    Java运行原理及内存分析 一.Java运行原理 二.Java内存分析

  6. Data - Tools

    数据工具汇总 史上最全的大数据分析和制作工具 全球100款大数据工具汇总 SQL 数据分析常用语句 01 - NumPy HomePage:http://www.numpy.org/ NumPy(数值 ...

  7. Python内置函数(32)——input

    英文文档: input([prompt]) If the prompt argument is present, it is written to standard output without a ...

  8. 网络协议 9 - TCP协议（下）：聪明反被聪明误

    网络协议 1 - 概述 网络协议 2 - IP 是怎么来,又是怎么没的? 网络协议 3 - 从物理层到 MAC 层 网络协议 4 - 交换机与 VLAN:办公室太复杂,我要回学校 网络协议 5 - I ...

  9. .NET Core实战项目之CMS 第十五章 各层联动工作实现增删改查业务

    连着两天更新叙述性的文章大家可别以为我转行了!哈哈!今天就继续讲讲我们的.NET Core实战项目之CMS系统的教程吧!这个系列教程拖得太久了,所以今天我就以菜单部分的增删改查为例来讲述下我的项目分层 ...

  10. 『Island 基环树直径』

    Island(IOI 2008) Description 你准备浏览一个公园,该公园由 N 个岛屿组成,当地管理部门从每个岛屿 i 出发向另外一个岛屿建了一座长度为 L_i 的桥,不过桥是可以双向行走 ...