update：将cesium的在线版本都变为1.99

src/examples/CodeMap.js

@@ -5,6 +5,7 @@ import vueCodePlane from '@/examples/plane.vue?raw'
 import vueCodeCirclesAndEllipses from '@/examples/circlesAndEllipses.vue?raw'
 
 import vueCodeBox from '@/examples/box.vue?raw'
+import vueCodeStraightArrow from '@/examples/straightArrow.vue?raw'
 
 import vueCodeRain from '@/examples/rain.vue?raw'
 import vueCodeSnow from '@/examples/snow.vue?raw'
@@ -18,6 +19,7 @@ const vueCodeMap = {
     面: vueCodePlane,
     椭圆: vueCodeCirclesAndEllipses,
     盒子: vueCodeBox,
+    直线箭头: vueCodeStraightArrow,
 
     雨: vueCodeRain,
     雪: vueCodeSnow,

src/examples/FunctionMap.js

@@ -5,6 +5,7 @@ import functionCodePlane from '@/examples/plane-function.js?raw'
 import functionCodeCirclesAndEllipses from '@/examples/circlesAndEllipses-function.js?raw'
 
 import functionBox from '@/examples/box-function.js?raw'
+import functionStraightArrow from '@/examples/straightArrow-function.js?raw'
 
 import functionCodeRain from '@/examples/rain-function.js?raw'
 import functionCodeSnow from '@/examples/snow-function.js?raw'
@@ -18,6 +19,7 @@ const functionCodeMap = {
     面: functionCodePlane,
     椭圆: functionCodeCirclesAndEllipses,
     盒子: functionBox,
+    直线箭头: functionStraightArrow,
 
     雨: functionCodeRain,
     雪: functionCodeSnow,

src/examples/box-function.js

 export function addBox() {
     const script = document.createElement('script');
-    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
     script.onload = () => {
         window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
 

src/examples/circlesAndEllipses-function.js

 export function addCirclesAndEllipses() {
     const script = document.createElement('script');
-    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
     script.onload = () => {
         window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
 

src/examples/fog-function.js

 export function addFog() {
     const script = document.createElement('script');
-    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
     script.onload = () => {
         window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
 
@@ -14,17 +14,17 @@ export function addFog() {
                     uniform sampler2D depthTexture;
                     uniform float visibility;
                     uniform vec4 fogColor;
-                in vec2 v_textureCoordinates; 
-                out vec4 fragColor;
+                    varying vec2 v_textureCoordinates; 
+                    varying vec4 fragColor;
                     void main(void) 
                     { 
-                    vec4 origcolor = texture(colorTexture, v_textureCoordinates); 
+                         vec4 origcolor = texture2D(colorTexture, v_textureCoordinates);
                         float depth = czm_readDepth(depthTexture, v_textureCoordinates); 
-                    vec4 depthcolor = texture(depthTexture, v_textureCoordinates); 
+                        vec4 depthcolor = texture2D(depthTexture, v_textureCoordinates);
                         float f = visibility * (depthcolor.r - 0.3) / 0.2; 
                         if (f < 0.0) f = 0.0; 
                         else if (f > 1.0) f = 1.0; 
-                    fragColor = mix(origcolor, fogColor, f); 
+                        gl_FragColor = mix(origcolor, fogColor, f);
                     }
                 `,
             uniforms: {

src/examples/line-function.js

 export function addLine() {
     const script = document.createElement('script');
-    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
     script.onload = () => {
         window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
 

src/examples/multiLine-function.js

 export function addMultiLine() {
     const script = document.createElement('script');
-    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
     script.onload = () => {
         window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
 
@@ -74,24 +74,6 @@ export function addMultiLine() {
               },
             },
             {
-              id: "purpleLine",
-              name: "Purple arrow at height",
-              polyline: {
-                positions: {
-                  cartographicDegrees: [-75, 43, 500000, -125, 43, 500000],
-                },
-                material: {
-                  polylineArrow: {
-                    color: {
-                      rgba: [148, 0, 211, 255],
-                    },
-                  },
-                },
-                arcType: "NONE",
-                width: 10,
-              },
-            },
-            {
               id: "dashedLine",
               name: "Blue dashed line",
               polyline: {

src/examples/plane-function.js

 export function addPlane() {
     const script = document.createElement('script');
-    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
     script.onload = () => {
         window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
 

src/examples/point-function.js

 export function addPoint() {
     const script = document.createElement('script');
-    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
     script.onload = () => {
         window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
 

src/examples/rain-function.js

 export function addRain() {
     const script = document.createElement('script');
-    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
     script.onload = () => {
         window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
 
@@ -11,14 +11,14 @@ export function addRain() {
         viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
             fragmentShader: `
                     uniform sampler2D colorTexture;
-                in vec2 v_textureCoordinates;
+                    varying vec2 v_textureCoordinates;
                     uniform float tiltAngle;
                     uniform float rainSize;
                     uniform float rainSpeed;
                     float hash(float x) {
                         return fract(sin(x * 133.3) * 13.13);
                     }
-                out vec4 fragColor;
+                    varying vec4 fragColor;
                     void main(void) {
                         float time = czm_frameNumber / rainSpeed;
                         vec2 resolution = czm_viewport.zw;
@@ -31,7 +31,7 @@ export function addRain() {
                         float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);
                         float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;
                         c *= v * b;
-                    fragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(c, 1), .5);
+                        gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c, 1.0), 0.5);
                     }
                     `,
             uniforms: {

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.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
     script.onload = () => {
         window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
 
@@ -11,7 +11,7 @@ export function addSnow() {
         viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
             fragmentShader: `
                     uniform sampler2D colorTexture; 
-              in vec2 v_textureCoordinates;
+                    varying vec2 v_textureCoordinates;
                     uniform float snowSpeed;
                     uniform float snowSize;
                     float snow(vec2 uv,float scale)
@@ -24,7 +24,7 @@ export function addSnow() {
                         k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);
                         return k*w;
                     }
-              out vec4 fragColor;
+                    varying vec4 fragColor;
                     void main(void){
                         vec2 resolution=czm_viewport.zw;
                         vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
@@ -38,7 +38,7 @@ export function addSnow() {
                         c+=snow(uv,6.);
                         c+=snow(uv,5.);
                         finalColor=(vec3(c));
-                  fragColor=mix(texture(colorTexture,v_textureCoordinates),vec4(finalColor,1),.5);
+                        gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor, 1.0), 0.5);
                     }
                 `,
             uniforms: {

src/examples/straightArrow-function.js

+export function addStraightArrow() {
+    const script = document.createElement('script');
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
+    script.onload = () => {
+        window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
+
+        const viewer = new window.Cesium.Viewer('cesiumContainer', {
+            infoBox: false,
+        });
+
+        const czml = [
+            {
+                id: "document",
+                name: "CZML Geometries: Polyline",
+                version: "1.0",
+            },
+            {
+              id: "purpleLine",
+              name: "Purple arrow at height",
+              polyline: {
+                positions: {
+                  cartographicDegrees: [-75, 43, 500000, -125, 43, 500000],
+                },
+                material: {
+                  polylineArrow: {
+                    color: {
+                      rgba: [148, 0, 211, 255],
+                    },
+                  },
+                },
+                arcType: "NONE",
+                width: 10,
+              },
+            },
+        ];
+          
+          const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
+          viewer.dataSources.add(dataSourcePromise);
+          viewer.zoomTo(dataSourcePromise);  
+    };
+    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/straightArrow.vue

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

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.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
     script.onload = () => {
         window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
 

src/views/ElementMap.js

@@ -22,6 +22,10 @@ export const elementGraphicMap = {
     盒子: {
         title: '盒子',
         pngUrl: '/src/assets/ColumnBody.png'
+    },
+    直线箭头: {
+        title: '直线箭头',
+        pngUrl: '/src/assets/StraightArrow.png'
     }
 }