update：水面的场景的添加

src/examples/CodeMap.js

@@ -5,6 +5,7 @@ import vueCodePlane from '@/examples/plane.vue?raw'
 import vueCodeRain from '@/examples/rain.vue?raw'
 import vueCodeSnow from '@/examples/snow.vue?raw'
 import vueCodeFog from '@/examples/fog.vue?raw'
+import vueCodeWaterSurface from '@/examples/waterSurface.vue?raw'
 
 const vueCodeMap = {
     点: vueCodePoint,
@@ -13,7 +14,8 @@ const vueCodeMap = {
 
     雨: vueCodeRain,
     雪: vueCodeSnow,
-    雾: vueCodeFog
+    雾: vueCodeFog,
+    水面: vueCodeWaterSurface
 }
 
 export function findVueCodeById(id){

src/examples/FunctionMap.js

@@ -5,6 +5,7 @@ import functionCodePlane from '@/examples/plane-function.js?raw'
 import functionCodeRain from '@/examples/rain-function.js?raw'
 import functionCodeSnow from '@/examples/snow-function.js?raw'
 import functionCodeFog from '@/examples/fog-function.js?raw'
+import functionCodeWaterSurface from '@/examples/waterSurface-function.js?raw'
 
 const functionCodeMap = {
     点: functionCodePoint,
@@ -13,7 +14,8 @@ const functionCodeMap = {
 
     雨: functionCodeRain,
     雪: functionCodeSnow,
-    雾: functionCodeFog
+    雾: functionCodeFog,
+    水面: functionCodeWaterSurface
 }
 
 export function findFunctionCodeById(id){

src/examples/waterSurface-function.js

+export function addWaterSurface() {
+    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.primitives.add(
+            new Cesium.Primitive({
+                geometryInstances: new Cesium.GeometryInstance({
+                    geometry: new Cesium.RectangleGeometry({
+                        rectangle: Cesium.Rectangle.fromDegrees(
+                            100,
+                            30,
+                            101,
+                            31
+                        ),
+                        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
+                        height: 0,
+                    }),
+                }),
+                appearance: new Cesium.EllipsoidSurfaceAppearance({
+                    material: new Cesium.Material({
+                        fabric: {
+                            type: "Water",
+                            uniforms: {
+                                baseWaterColor: new Cesium.Color(
+                                    64 / 255.0,
+                                    157 / 255.0,
+                                    253 / 255.0,
+                                    0.6
+                                ),
+                                normalMap: "https://webgishome-pic.oss-cn-chengdu.aliyuncs.com/cesium/waterMaterial.jpg",
+                                frequency: 1000.0,
+                                animationSpeed: 0.1,
+                                amplitude: 10,
+                                specularIntensity: 8,
+                            },
+                        },
+                    }),
+                }),
+            })
+        );
+
+        viewer.camera.setView({
+            destination: Cesium.Cartesian3.fromDegrees(100.5, 30.5, 150000),
+            orientation: {
+                heading: 6.283185, //相机绕z轴旋转。左右摇头。
+                pitch: 30, //相机绕y轴旋转。上下点头。
+                roll: 0.0, //相机绕x轴旋转。左右歪头。
+            },
+        });
+    };
+    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/waterSurface.vue

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

src/views/ElementMap.js

@@ -28,7 +28,7 @@ export const elementWeatherMap = {
     },
     Four: {
         title: '水面',
-        pngUrl: '/src/assets/Line.png'
+        pngUrl: '/src/assets/WaterSurface.png'
     },
     Five: {
         title: '云图',