1.添加近地显示夜空天空盒子的效果；

.gitignore

@@ -21,3 +21,4 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
+pnpm-lock.yaml

src/components/CesiumMap/skyBoxOnGround.js

@@ -0,0 +1,230 @@
+import * as Cesium from 'cesium'
+
+//片元着色器，直接从源码复制
+const SkyBoxFS = `uniform samplerCube u_cubeMap;
+    in vec3 v_texCoord;
+    out vec4 fragColor;
+    void main(){
+        vec4 color = texture(u_cubeMap, normalize(v_texCoord));
+        fragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);
+    }
+`;
+
+//顶点着色器有修改，主要是乘了一个旋转矩阵
+const SkyBoxVS = `
+    in vec3 position;
+    out vec3 v_texCoord;
+    uniform mat3 u_rotateMatrix;
+    void main(){
+        vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));
+        gl_Position = czm_projection * vec4(p, 1.0);
+        v_texCoord = position.xyz;
+    }
+`;
+
+const BoxGeometry = Cesium.BoxGeometry;
+const Cartesian3 = Cesium.Cartesian3;
+const defaultValue = Cesium.defaultValue;
+const defined = Cesium.defined;
+const destroyObject = Cesium.destroyObject;
+const DeveloperError = Cesium.DeveloperError;
+const GeometryPipeline = Cesium.GeometryPipeline;
+const Matrix3 = Cesium.Matrix3;
+const Matrix4 = Cesium.Matrix4;
+const Transforms = Cesium.Transforms;
+const VertexFormat = Cesium.VertexFormat;
+const BufferUsage = Cesium.BufferUsage;
+const CubeMap = Cesium.CubeMap;
+const DrawCommand = Cesium.DrawCommand;
+const loadCubeMap = Cesium.loadCubeMap;
+const RenderState = Cesium.RenderState;
+const VertexArray = Cesium.VertexArray;
+const BlendingState = Cesium.BlendingState;
+const SceneMode = Cesium.SceneMode;
+const ShaderProgram = Cesium.ShaderProgram;
+const ShaderSource = Cesium.ShaderSource;
+
+const skyboxMatrix3 = new Matrix3();
+
+// 存储默认天空盒
+let defaultSkybox = null
+// 存储当前天空盒
+let currentSkybox = null
+
+const checkSkyBoxEventHandler = (scene) => {
+  let position = scene.camera.position;
+  let cameraHeight = Cesium.Cartographic.fromCartesian(position).height;
+  if (cameraHeight < 240000) {
+    scene.skyBox = currentSkybox;
+    scene.skyAtmosphere.show = false;
+  } else {
+    scene.skyBox = defaultSkybox;
+    scene.skyAtmosphere.show = true;
+  }
+}
+
+
+/**
+* 为了兼容高版本的Cesium，因为新版cesium中getRotation被移除
+*/
+if (!Cesium.defined(Cesium.Matrix4.getRotation)) {
+  Cesium.Matrix4.getRotation = Cesium.Matrix4.getMatrix3
+}
+
+/**
+* 近景天空盒
+* @type Object
+* @default undefined
+*/
+export default class SkyBoxOnGround {
+  constructor(options) {
+    this.sources = options.sources;
+    this._sources = undefined;
+    /**
+     * Determines if the sky box will be shown.
+     *
+     * @type {Boolean}
+     * @default true
+     */
+    this.show = defaultValue(options.show, true);
+
+    this._command = new DrawCommand({
+      modelMatrix: Matrix4.clone(Matrix4.IDENTITY),
+      owner: this
+    });
+    this._cubeMap = undefined;
+
+    this._attributeLocations = undefined;
+    this._useHdr = undefined;
+
+    // 将生成的天空盒传出保存
+    currentSkybox = this;
+  }
+
+  update(frameState, useHdr) {
+    const that = this;
+
+    if (!this.show) {
+      return undefined;
+    }
+
+    if ((frameState.mode !== SceneMode.SCENE3D) && (frameState.mode !== SceneMode.MORPHING)) {
+      return undefined;
+    }
+
+    if (!frameState.passes.render) {
+      return undefined;
+    }
+
+    const context = frameState.context;
+
+    if (this._sources !== this.sources) {
+      this._sources = this.sources;
+      const sources = this.sources;
+
+      if ((!defined(sources.positiveX)) || (!defined(sources.negativeX)) || (!defined(sources.positiveY)) || (!defined(sources.negativeY)) || (!defined(sources.positiveZ)) || (!defined(sources.negativeZ))) {
+        throw new DeveloperError('this.sources is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties.');
+      }
+
+      if ((typeof sources.positiveX !== typeof sources.negativeX) || (typeof sources.positiveX !== typeof sources.positiveY) || (typeof sources.positiveX !== typeof sources.negativeY) || (typeof sources.positiveX !== typeof sources.positiveZ) || (typeof sources.positiveX !== typeof sources.negativeZ)) {
+        throw new DeveloperError('this.sources properties must all be the same type.');
+      }
+
+      if (typeof sources.positiveX === 'string') {
+        loadCubeMap(context, this._sources).then(function (cubeMap) {
+          that._cubeMap = that._cubeMap && that._cubeMap.destroy();
+          that._cubeMap = cubeMap;
+        });
+      } else {
+        this._cubeMap = this._cubeMap && this._cubeMap.destroy();
+        this._cubeMap = new CubeMap({
+          context: context,
+          source: sources
+        });
+      }
+    }
+
+    const command = this._command;
+
+    command.modelMatrix = Transforms.eastNorthUpToFixedFrame(frameState.camera._positionWC);
+
+    if (!defined(command.vertexArray)) {
+      command.uniformMap = {
+        u_cubeMap: function () {
+          return that._cubeMap;
+        },
+        u_rotateMatrix: function () {
+          return Matrix4.getRotation(command.modelMatrix, skyboxMatrix3);
+        },
+      };
+
+      const geometry = BoxGeometry.createGeometry(BoxGeometry.fromDimensions({
+        dimensions: new Cartesian3(2.0, 2.0, 2.0),
+        vertexFormat: VertexFormat.POSITION_ONLY
+      }));
+      const attributeLocations = this._attributeLocations = GeometryPipeline.createAttributeLocations(geometry);
+
+      command.vertexArray = VertexArray.fromGeometry({
+        context: context,
+        geometry: geometry,
+        attributeLocations: attributeLocations,
+        bufferUsage: BufferUsage._DRAW
+      });
+
+      command.renderState = RenderState.fromCache({
+        blending: BlendingState.ALPHA_BLEND
+      });
+    }
+
+    if (!defined(command.shaderProgram) || this._useHdr !== useHdr) {
+      const fs = new ShaderSource({
+        defines: [useHdr ? 'HDR' : ''],
+        sources: [SkyBoxFS]
+      });
+      command.shaderProgram = ShaderProgram.fromCache({
+        context: context,
+        vertexShaderSource: SkyBoxVS,
+        fragmentShaderSource: fs,
+        attributeLocations: this._attributeLocations
+      });
+      this._useHdr = useHdr;
+    }
+
+    if (!defined(this._cubeMap)) {
+      return undefined;
+    }
+    return command;
+  }
+
+  setSkyBox(viewer) {
+
+    // 自带的默认天空盒
+    defaultSkybox = viewer.scene.skyBox;
+
+    // 渲染前监听并判断相机位置
+    viewer.scene.preUpdate.addEventListener(checkSkyBoxEventHandler);
+  }
+
+  removeSkyBox(viewer) {
+    if(!viewer || !defaultSkybox) return;
+
+    viewer.scene.preUpdate.removeEventListener(checkSkyBoxEventHandler);
+    viewer.scene.skyBox = defaultSkybox;
+    viewer.scene.skyAtmosphere.show = true;
+    defaultSkybox = null;
+  }
+
+  isDestroyed() {
+    return false
+  }
+
+  destroy() {
+    defaultSkybox = null;
+    currentSkybox = null;
+    const command = this._command;
+    command.vertexArray = command.vertexArray && command.vertexArray.destroy();
+    command.shaderProgram = command.shaderProgram && command.shaderProgram.destroy();
+    this._cubeMap = this._cubeMap && this._cubeMap.destroy();
+    return destroyObject(this);
+  }
+}

src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue

@@ -74,10 +74,11 @@ import {
   drawKeyarea,
   pickFeatureProperty,
 } from './forestFireDraw'
+import SkyBoxOnGround from "@/components/CesiumMap/skyBoxOnGround";
 // 属性弹窗相关
-import DialogPropertyGrid from './../DialogPropertyGrid';
-import { setPropertyData } from './../DialogPropertyGrid/property';
-import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
+// import DialogPropertyGrid from './../DialogPropertyGrid';
+// import { setPropertyData } from './../DialogPropertyGrid/property';
+// import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
 
 // 工具栏图标
 import baseDrawIcon from "@/assets/icons/toolbar_base_draw.png";
@@ -111,6 +112,14 @@ import toolbarKeyareaIcon from '@/assets/icons/toolbar_keyarea.png';
 import toolbarRainIcon from '@/assets/icons/toolbar_rain.png';
 import toolbarSnowIcon from '@/assets/icons/toolbar_snow.png';
 import toolbarFogIcon from '@/assets/icons/toolbar_fog.png';
+import toolbarNightIcon from '@/assets/icons/toolbar_night.png';
+// 夜空盒图片
+import posx from '@/assets/images/night_box/posx.jpg';
+import negx from '@/assets/images/night_box/negx.jpg';
+import posy from '@/assets/images/night_box/posy.jpg';
+import negy from '@/assets/images/night_box/negy.jpg';
+import posz from '@/assets/images/night_box/posz.jpg';
+import negz from '@/assets/images/night_box/negz.jpg';
 
 const props = defineProps({
   viewer: {
@@ -120,6 +129,19 @@ const props = defineProps({
 
 // 初始化地图实例
 let viewer = null
+// cesium自带天空盒
+let defaultSkybox = null
+// 近地夜空盒
+const groundSkyBox = new SkyBoxOnGround({
+  sources: {
+    positiveX: posx,
+    negativeX: negx,
+    positiveY: posy,
+    negativeY: negy,
+    positiveZ: posz,
+    negativeZ: negz,
+  },
+})
 let drawTool = null
 let measureTool = null
 let weatherParticle = null
@@ -279,6 +301,13 @@ const options = ref([
         icon: toolbarFogIcon,
         active: false
       },
+      {
+        id: 34,
+        name: 'night',
+        label: '近地夜晚环境',
+        icon: toolbarNightIcon,
+        active: false
+      },
     ]
   },
   {
@@ -341,11 +370,18 @@ const weatherSwitchClick = (name) => {
 
   if(option.active) {
     option.active = false;
-    weatherParticle.destroy();
+    if(option.name === 'night') {
+      groundSkyBox.removeSkyBox(viewer);
+    } else {
+      weatherParticle.destroy();
+    }
   } else {
     // 取消其它天气按钮的激活状态
     list.forEach(item => {
       if(item.name !== name) {
+        if(item.name === 'night') {
+          groundSkyBox.removeSkyBox(viewer);
+        }
         item.active = false;
       }
     });
@@ -361,6 +397,8 @@ const weatherSwitchClick = (name) => {
       case 'fog':
         weatherParticle && weatherParticle.fog()
         break
+      case 'night':
+        groundSkyBox.setSkyBox(viewer);
     }
   }
 }
@@ -368,6 +406,7 @@ const weatherSwitchClick = (name) => {
 watch(() => props.viewer, (v) => {
   if (v) {
     viewer = v;
+    defaultSkybox = v.scene.skyBox
     
     // 添加绘制图层
     toolbarLayer = new Cesium.CustomDataSource('toolbarLayer');
@@ -416,6 +455,7 @@ watch(() => props.viewer, (v) => {
     bus.on('toolbar_rain', () => weatherSwitchClick('rain'))
     bus.on('toolbar_snow', () => weatherSwitchClick('snow'))
     bus.on('toolbar_fog', () => weatherSwitchClick('fog'))
+    bus.on('toolbar_night', () => weatherSwitchClick('night'))
     // 清空
     bus.on('toolbar_clear', toolbarClear);