在使用Cesium引擎时，我们经常要使用大屏适配导致地球或者模型的黑色天空盒和大屏的样式不匹配造成场景不好看的情况，这样就可以用到我们修改Cesium的天空为纯色背景，与大屏更适配，直接上代码。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta charset="UTF-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <meta name="viewport"

    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

  <title>加载纯色背景</title>

  <script src="js/cesium1.95/Cesium.js"></script>

   <link rel="stylesheet" href="js/cesium1.95//Widgets/widgets.css"/>

  <style>

    html,

    body,

    #cesiumContainer {

      width: 100%;

      height: 100%;

      margin: 0;

      padding: 0;

      overflow: hidden;

    }

  </style>

</head>

<body>

 <!-- 设置你需要的背景图片 -->

  <div id="cesiumContainer" class="fullSize" style="background-image: url(image/bg.jpg)"></div>

  <script>

    var viewer = new Cesium.Viewer('cesiumContainer', {

      //需要进行可视化的数据源的集合

      selectionIndicator: false,//关闭绿色点击框

      animation: false, //是否显示动画控件

      shouldAnimate: false,

      homeButton: false, //是否显示Home按钮

      fullscreenButton: false, //是否显示全屏按钮

      baseLayerPicker: false, //是否显示图层选择控件

      geocoder: false, //是否显示地名查找控件

      timeline: false, //是否显示时间线控件

      sceneModePicker: false, //是否显示投影方式控件

      navigationHelpButton: false, //是否显示帮助信息控件

      infoBox: false, //是否显示点击要素之后显示的信息

      requestRenderMode: true, //启用请求渲染模式

      scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存

      sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode

      fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处

      //加载谷歌影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口

      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({

        url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",

      }),

      //需要纯色背景必须设置

      contextOptions: {

        webgl: {

          alpha: true,

        }

      },

    })

    //背景透明

    viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);

    //关闭大气

    viewer.scene.skyAtmosphere.show = false

    //抗锯齿

    viewer.scene.fxaa = true;

    viewer.scene.postProcessStages.fxaa.enabled = true;

    //关闭天空月亮

    viewer.scene.sun.show = false; //在Cesium1.6(不确定)之后的版本会显示太阳和月亮，不关闭会影响展示

    viewer.scene.moon.show = false;

    viewer.scene.skyBox.show = false;//关闭天空盒，否则会显示天空颜色

    //隐藏地球

    viewer.scene.undergroundMode = true; //重要，开启地下模式，设置基色透明，这样就看不见黑色地球了

    viewer.scene.globe.show = false; //不显示地球，这条和地球透明度选一个就可以

    viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);

    var tileset = viewer.scene.primitives.add(

                            new Cesium.Cesium3DTileset({

                                url:'http://**********/3dtile/xiaoyi_dongyi_new/tileset.json',

                                maximumScreenSpaceError: 16,//默认16,最大屏幕空间错误

                                maximumNumberOfLoadedTiles: 1000,

                                maximumMemoryUsage:1024//默认512,内存MB的最大数量

                            }));

    tileset.readyPromise.then((tileset) => {

        viewer.zoomTo(tileset);//视野定位到模型处

    });

  </script>

</body>

</html>

Cesium教程10-把影像和天空改成背景图片的更多相关文章

  1. Glide的加载图片的帮助类,用来把图片圆角或者改成圆形图片

    Glide虽然非常好用但是没找到把图片圆角的方法,所以百度了一个非常不错的加载类自己实现圆角图 感谢原文章作者:http://blog.csdn.net/weidongjian/article/det ...

  2. quick-cocos2d-x教程10:实现血条效果。

    血条是常见功能.能够通过一个血条背景和一个不断改变的血条宽度.来实现少血. 在MainScence.lua中,先改代码: function MainScene:ctor()     local bg ...

  3. node-webkit教程(10)Platform Service之File dialogs

    node-webkit教程(10)Platform Service之File dialogs 文/玄魂 目录 node-webkit教程(10)Platform Service之File dialog ...

  4. Linux pwn入门教程(10)——针对函数重定位流程的几种攻击

    作者:Tangerine@SAINTSEC 本系列的最后一篇 感谢各位看客的支持 感谢原作者的付出一直以来都有读者向笔者咨询教程系列问题,奈何该系列并非笔者所写[笔者仅为代发]且笔者功底薄弱,故无法解 ...

  5. 【译】ASP.NET MVC 5 教程 - 10：添加验证

    原文:[译]ASP.NET MVC 5 教程 - 10:添加验证 在本节中,我们将为Movie模型添加验证逻辑,并确认验证规则在用户试图使用程序创建和编辑电影时有效. DRY 原则 ASP.NET M ...

  6. [译]Vulkan教程(10)交换链

    [译]Vulkan教程(10)交换链 Vulkan does not have the concept of a "default framebuffer", hence it r ...

  7. GIS地理工具案例教程——批量合并影像-批量镶嵌栅格

    GIS地理工具案例教程--批量合并影像-批量镶嵌栅格 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 关键词:批量.迭代.循环.自动.智能.地理 ...

  8. GIS地理工具案例教程——批量合并影像

    GIS地理工具案例教程——批量合并影像 商务合作,科技咨询,版权转让:向日葵,135—4855__4328,xiexiaokui#qq.com 描述:合并目录下的所有影像 功能:对指定工作空间下的栅格 ...

  9. 黑马lavarel教程---10、lavarel模型关联

    黑马lavarel教程---10.lavarel模型关联 一.总结 一句话总结: 1.模型关联比较方便,一次定义,后面都可以使用 2.关联关系 使用动态属性进行调用 1.一对多,多对多实例? 一对多: ...

  10. Directx11教程(10) 画一个简易坐标轴

    原文:Directx11教程(10) 画一个简易坐标轴       本篇教程中,我们将在三维场景中,画一个简易的坐标轴,分别用红.绿.蓝三种颜色表示x,y,z轴的正向坐标轴. 为此,我们要先建立一个A ...

随机推荐

  1. 冲刺 NOIP2024 之动态规划专题

    专题链接 B - Birds \(3.19\) . 混合背包 \(DP\) . 定义 \(f_{i,j}\) 表示取到鸟巢 \(i\) ,获得 \(j\) 只小鸟时所剩的魔力值. 显然有 \(f_{0 ...

  2. 数据解析之Beautifulsoup

    一.BeautifulSoup的简单使用 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据.官方解释如下: Beautiful Soup提供一些简单的.pyt ...

  3. 深入理解 C# 编程：枚举、文件处理、异常处理和数字相加

    C# 枚举 枚举是一个特殊的"类",表示一组常量(不可更改/只读变量). 要创建枚举,请使用 enum 关键字(而不是 class 或 interface),并用逗号分隔枚举项: ...

  4. openGauss数据库源码学习-指标采集、预测与异常检测

    opengauss 源码解析 指标采集.预测与异常检测 代码位置:/gausskernel/dbmind/tools/anomaly_detection 各模组在整体结构上的组合在摩天轮论坛上官方解析 ...

  5. mybatis plugin源码解析

    概述 Plugin,意为插件,是mybatis为开发者提供的,对方法进行自定义编程的手段.其中用到了动态代理.反射方法,通过指定需要增强的对象与方法,进行程序编写. 核心类 主要涉及几个核心类:Int ...

  6. 重新整理数据结构与算法(c#)—— 二叉树排序树补删除节点[二十二]

    前言 续前一章. 正文 删除节点规则: 1.假如删除的是叶子节点,让他的父节点,断开和它的联系. 2.如果删除节点右左子树或者右子树的话,那么应该这样. 如果删除节点是它的父节点的左节点,而删除节点有 ...

  7. ABP -Vnext框架一步一步入门落地教程——使用ABP -Vnext创建一个WEBAPI接口（二）

    开发主题:何谓开发应用服务端 在官方开发教程这一段的内容叫做开发应用服务端,作为现在前后端分离的开发模式来说,一个应用就分为前端页面框架和后端API,页面框架调用WEBAPI实现业务就完事了.所以咱们 ...

  8. JVM简明笔记4：垃圾回收

    1 垃圾回收相关算法 垃圾回收器首先要做的就是,判断一个对象是存活状态还是死亡状态,死亡的对象将会被标识为垃圾数据并等待收集器进行清除. 判断一个对象是否为死亡状态的常用算法有两个:引用计数器算法 . ...

  9. 力扣1127(MySQL)-用户购买平台（困难）

    题目: 支出表: Spending 这张表记录了用户在一个在线购物网站的支出历史,该在线购物平台同时拥有桌面端('desktop')和手机端('mobile')的应用程序.这张表的主键是 (user_ ...

  10. 力扣430(java)-扁平化多级双向链表（中等）

    题目: 你会得到一个双链表,其中包含的节点有一个下一个指针.一个前一个指针和一个额外的 子指针 .这个子指针可能指向一个单独的双向链表,也包含这些特殊的节点.这些子列表可以有一个或多个自己的子列表,以 ...