update：添加雪的场景

src/components/AsideMenuBar.vue

@@ -22,7 +22,7 @@
                         <el-icon><SemiSelect /></el-icon>
                         <span>天气</span>
                     </template>
-                    <el-menu-item v-for="item in elementLineData" :key="item.id" :index="item.title" @click="goAnchor(item.title)">
+                    <el-menu-item v-for="item in elementWeatherMap" :key="item.id" :index="item.title" @click="goAnchor(item.title)">
                         <el-icon><View /></el-icon>
                         <span>{{item.title}}</span>
                     </el-menu-item>
@@ -46,14 +46,14 @@
 <script setup>
 import { ref } from 'vue';
 import { MapLocation, SemiSelect, Grid, View } from "@element-plus/icons-vue";
-import { elementGraphicMap, elementLineMap, elementPlaneMap } from '@/views/ElementMap';
+import { elementGraphicMap, elementWeatherMap, elementPlaneMap } from '@/views/ElementMap';
 
 const elementPointData = ref()
 const elementLineData = ref()
 const elementPlaneData = ref()
 
 elementPointData.value = elementGraphicMap;
-elementLineData.value = elementLineMap;
+elementLineData.value = elementWeatherMap;
 elementPlaneData.value = elementPlaneMap;
 
 const props = defineProps({

src/examples/CodeMap.js

@@ -2,10 +2,14 @@ import vueCodePoint from '@/examples/point.vue?raw'
 import vueCodeLine from '@/examples/line.vue?raw'
 import vueCodePlane from '@/examples/plane.vue?raw'
 
+import vueCodeSnow from '@/examples/snow.vue?raw'
+
 const vueCodeMap = {
     点: vueCodePoint,
     多线: vueCodeLine,
-    多面: vueCodePlane
+    多面: vueCodePlane,
+
+    雪: vueCodeSnow
 }
 
 export function findVueCodeById(id){

src/examples/FunctionMap.js

@@ -2,10 +2,14 @@ import functionCodePoint from '@/examples/point-function.js?raw'
 import functionCodeLine from '@/examples/line-function.js?raw'
 import functionCodePlane from '@/examples/plane-function.js?raw'
 
+import functionCodeSnow from '@/examples/snow-function.js?raw'
+
 const functionCodeMap = {
     点: functionCodePoint,
     多线: functionCodeLine,
-    多面: functionCodePlane
+    多面: functionCodePlane,
+
+    雪: functionCodeSnow
 }
 
 export function findFunctionCodeById(id){

src/examples/snow-function.js

+export function addSnow() {
+    const script = document.createElement('script');
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
+    script.onload = () => {
+        window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
+
+        const viewer = new window.Cesium.Viewer('cesiumContainer', {
+            infoBox: false,
+        });
+
+        viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
+          fragmentShader: `
+              uniform sampler2D colorTexture; 
+              in vec2 v_textureCoordinates;
+              uniform float snowSpeed;
+              uniform float snowSize;
+              float snow(vec2 uv,float scale)
+              {
+                  float time=czm_frameNumber*snowSpeed;
+                  float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;
+                  uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;
+                  uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;
+                  p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);
+                  k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);
+                  return k*w;
+              }
+              out vec4 fragColor;
+              void main(void){
+                  vec2 resolution=czm_viewport.zw;
+                  vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
+                  vec3 finalColor=vec3(0);
+                  float c=0.;
+                  c+=snow(uv,30.)*.0;
+                  c+=snow(uv,20.)*.0;
+                  c+=snow(uv,15.)*.0;
+                  c+=snow(uv,10.);
+                  c+=snow(uv,8.);
+                  c+=snow(uv,6.);
+                  c+=snow(uv,5.);
+                  finalColor=(vec3(c));
+                  fragColor=mix(texture(colorTexture,v_textureCoordinates),vec4(finalColor,1),.5);
+              }
+          `,
+          uniforms: {
+              snowSize: 0.02,
+              snowSpeed: 0.005
+          },
+      }));
+    };
+    document.head.appendChild(script);
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
+    document.head.appendChild(link);
+}

src/examples/snow.vue

+<template>
+    <div id="cesiumContainer" class="cesium-container"></div>
+</template>
+<script setup>
+import { onMounted } from 'vue';
+import { addSnow } from './function';
+onMounted(() => {
+    addSnow()
+});
+</script>
+
+<style>
+.cesium-container {
+width: 100%;
+height: 100vh;
+}
+</style>
\ No newline at end of file

src/views/ElementMap.js

 export const elementGraphicMap = {
     One: {
         title: '点',
-        pngUrl: '/src/assets/PointOne.png'
+        pngUrl: '/src/assets/Point.png'
     },
     Two: {
         title: '多线',
-        pngUrl: '/src/assets/LineOne.png'
+        pngUrl: '/src/assets/Line.png'
     },
     Three: {
         title: '多面',
@@ -13,30 +13,30 @@ export const elementGraphicMap = {
     }
 }
 
-export const elementLineMap = {
+export const elementWeatherMap = {
     One: {
-        title: 'lineOne',
-        pngUrl: '/src/assets/LineOne.png'
+        title: '雨',
+        pngUrl: '/src/assets/Line.png'
     },
     Two: {
-        title: 'lineTwo',
-        pngUrl: '/src/assets/LineOne.png'
+        title: '雪',
+        pngUrl: '/src/assets/Snow.png'
     },
     Three: {
-        title: 'lineThree',
-        pngUrl: '/src/assets/LineOne.png'
+        title: '雾',
+        pngUrl: '/src/assets/Line.png'
     },
     Four: {
-        title: 'lineFour',
-        pngUrl: '/src/assets/LineOne.png'
+        title: '水面',
+        pngUrl: '/src/assets/Line.png'
     },
     Five: {
-        title: 'lineFive',
-        pngUrl: '/src/assets/LineOne.png'
+        title: '云图',
+        pngUrl: '/src/assets/Line.png'
     },
     Six: {
-        title: 'lineSix',
-        pngUrl: '/src/assets/LineOne.png'
+        title: '风场',
+        pngUrl: '/src/assets/Line.png'
     }
 }
 

src/views/indexView.vue

@@ -10,9 +10,9 @@
             </div>
         </div>
         <div class="mt-10">
-            <span class="text-base font-bold">线的案例</span>
+            <span class="text-base font-bold">天气</span>
             <div style="overflow-y: auto" class="container">
-                <div v-for="item in elementLineData" :key="item.id" @click="indexBtn(item.title)" class="item-container">
+                <div v-for="item in elementWeatherMap" :key="item.id" @click="indexBtn(item.title)" class="item-container">
                     <div :id="item.title">{{item.title}}</div>
                     <img :src="item.pngUrl" width="250">
                 </div>
@@ -33,7 +33,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { elementGraphicMap, elementLineMap, elementPlaneMap } from './ElementMap';
+import { elementGraphicMap, elementWeatherMap, elementPlaneMap } from './ElementMap';
 
 const router = useRouter()
 const elementPointData = ref()
@@ -41,7 +41,7 @@ const elementLineData = ref()
 const elementPlaneData = ref()
 
 elementPointData.value = elementGraphicMap;
-elementLineData.value = elementLineMap;
+elementLineData.value = elementWeatherMap;
 elementPlaneData.value = elementPlaneMap;
 
 // 跳转到对应的编码编辑内容