首页 > 其他分享 >Cesium教程10-把影像和天空改成背景图片

Cesium教程10-把影像和天空改成背景图片

时间:2022-10-25 12:56:08浏览次数:60  
标签:10 false 控件 viewer scene Cesium true 背景图片

在使用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>
  <link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
  <script src="../../Build/Cesium/Cesium.js"></script>
  <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(../../img/back.png);"></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
      //需要进行可视化的数据源的集合
      selectionIndicator: false,//关闭绿色点击框
      animation: false, //是否显示动画控件
      shouldAnimate: true,
      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.skyBox.show = false //关闭天空盒,否则会显示天空颜色
    //背景透明
    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.moon.show = false
    viewer.scene.sun.show = false
  </script>
</body>

</html>

 

标签:10,false,控件,viewer,scene,Cesium,true,背景图片
From: https://www.cnblogs.com/tiandi/p/16824488.html

相关文章

  • POJ 2110(最小生成树)
    这题的思路就是找一个范围,看看这个范围是否可行主流是二分Ans,我是先把点排序,求最小生成树检查首位的ProgramP2110;typeed=recordu,v,w:longint;end;vara......
  • 【1024】程序员节丨致敬所有技术布道师
    MobTech袤博科技作为全球领先的数据智能科技平台,秉承着“让世界心中有数”的企业愿景,以数为乐,将技术成就与科研成果共享给每一位开发者。又是一年1024程序员节,MobTech与技术......
  • win10快捷方式去箭头(win10快捷方式去箭头副作用)
    WIN10怎么去掉快捷方式小箭头?360去不掉的??方法1:打开【360卫士】→【人工服务】→在查找方案栏输入:去除快捷方式小箭头→搜索→点下面的【立即修复】→OK!如何去掉Win10快捷......
  • win10解压软件哪个好(win10用哪个解压软件)
    手机上用的解压软件哪个好一点还没广告啊?手机上用的解压软件哪个好解压工具UnRARPro是一款文件解压缩工具,UnrarPro解压缩软件能够在android手机上进行压缩软件。解压30M包......
  • AcWing 100. IncDec序列
    题目链接:​​传送门​​将序列转化成差分数列那么题目就变成了对一个数组可进行三种操作对两个元素一个加一一个减一或对一个元素加一或对一个元素减一其实后面两种操作......
  • LOJ #10180. 「一本通 5.5 练习 1」烽火传递
    题目链接:​​传送门​​设表示处理到第个位置的最小花费很明显转移要从之前的个位置转移过来就是最后答案要取这样转移是的,但足以通过本题的正解是单调队列优化由于只......
  • LOJ #10005. 「一本通 1.1 练习 1」数列极差
    题目链接:​​传送门​​贪心题才是难的按照从小到大的顺序排,这样相乘会得到最大值,因为后面的最大值乘的更多最小值同理,就是从大到小处理就可以但是注意在操作的过程中不......
  • LOJ #10202. 「一本通 6.2 练习 5」樱花
    题目链接:​​传送门​​​​别人的题解​​​不想写那么多latex了化完式子之后就是求的约数个数#include<bits/stdc++.h>#defineusingnamespacestd;typedeflonglong......
  • win10打印机设置(win7共享给win10打印机设置)
    win10系统中打印机怎么设置点击win键,呼出下图菜单。点击上图中的“设置”按钮,进入下图菜单。点击上图中的“设备蓝牙、打印机、鼠标”按钮,进入下图菜单。通过点击下图方框中......
  • win10打印机脱机(win10打印机脱机怎么处理)
    Win10系统下打印机脱机状态怎么解除呢?1、将鼠标移动到桌面的右上角或者右下角,在弹出的菜单中点击设置按钮脱机状态。2、在设置界面点击控制面板打印机电脑图解。3、在控制......