update：添加场景信息和场景截图案例

src/examples/CodeMap.js

@@ -23,6 +23,8 @@ import vueCodeStraightArrow from '@/examples/graphicElement/straightArrow/straig
 // 场景设置
 import vueCodeTerminatorLine from '@/examples/sceneSet/terminatorLine/terminatorLine.vue?raw'
 import vueCodeJingweiNetwork3D from '@/examples/sceneSet/jingweiNetwork3D/jingweiNetwork3D.vue?raw'
+import vueCodeSceneInfo from '@/examples/sceneSet/sceneInfo/sceneInfo.vue?raw'
+import vueCodeSceneScreenshot from '@/examples/sceneSet/sceneScreenshot/sceneScreenshot.vue?raw'
 import vueCodeJingweiNetwork2D from '@/examples/sceneSet/jingweiNetwork2D/jingweiNetwork2D.vue?raw'
 import vueCodeEarthCoordinate from '@/examples/sceneSet/earthCoordinate/earthCoordinate.vue?raw'
 import vueCodeMapx from '@/examples/sceneSet/mapx/mapx.vue?raw'
@@ -61,6 +63,8 @@ const vueCodeMap = {
     // 场景设置
     晨昏线: vueCodeTerminatorLine,
     经纬网络3D: vueCodeJingweiNetwork3D,
+    场景信息: vueCodeSceneInfo,
+    场景截图: vueCodeSceneScreenshot,
     经纬网络2D: vueCodeJingweiNetwork2D,
     地球坐标系: vueCodeEarthCoordinate,
     鹰眼图: vueCodeMapx,

src/examples/FunctionMap.js

@@ -23,6 +23,8 @@ import functionStraightArrow from '@/examples/graphicElement/straightArrow/strai
 // 场景设置
 import functionCodeTerminatorLine from '@/examples/sceneSet/terminatorLine/terminatorLine-function.js?raw'
 import functionCodeJingweiNetwork3D from '@/examples/sceneSet/jingweiNetwork3D/jingweiNetwork3D-function.js?raw'
+import functionCodeSceneInfo from '@/examples/sceneSet/sceneInfo/sceneInfo-function.js?raw'
+import functionCodeSceneScreenshot from '@/examples/sceneSet/sceneScreenshot/sceneScreenshot-function.js?raw'
 import functionCodeJingweiNetwork2D from '@/examples/sceneSet/jingweiNetwork2D/jingweiNetwork2D-function.js?raw'
 import functionCodeEarthCoordinate from '@/examples/sceneSet/earthCoordinate/earthCoordinate-function.js?raw'
 import functionCodeMapx from '@/examples/sceneSet/mapx/mapx-function.js?raw'
@@ -60,6 +62,8 @@ const functionCodeMap = {
     // 场景设置
     晨昏线: functionCodeTerminatorLine,
     经纬网络3D: functionCodeJingweiNetwork3D,
+    场景信息: functionCodeSceneInfo,
+    场景截图: functionCodeSceneScreenshot,
     经纬网络2D: functionCodeJingweiNetwork2D,
     地球坐标系: functionCodeEarthCoordinate,
     鹰眼图: functionCodeMapx,

src/examples/sceneSet/sceneInfo/sceneInfo-function.js

+export function addSceneInfo() {
+    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: true, // 启用InfoBox
+        });
+
+        const czml = [
+            {
+              id: "document",
+              name: "CZML Point",
+              version: "1.0",
+            },
+            {
+              id: "point",
+              name: "point",
+              description: "<!--HTML-->\r\n<p>GeoEye-1 is a high-resolution earth observation satellite owned by GeoEye, which was launched in September 2008.</p>\r\n\r\n<p>On December 1, 2004, General Dynamics C4 Systems announced it had been awarded a contract worth approximately $209 million to build the OrbView-5 satellite. Its sensor is designed by the ITT Exelis.</p>\r\n\r\n<p>The satellite, now known as GeoEye-1, was originally scheduled for April 2008 but lost its 30-day launch slot to a U.S. government mission which had been delayed. It was rescheduled for launch August 22, 2008 from Vandenberg Air Force Base aboard a Delta II launch vehicle. The launch was postponed to September 4, 2008, due to unavailability of the Big Crow telemetry-relay aircraft. It was delayed again to September 6 because Hurricane Hanna interfered with its launch crews.</p>\r\n\r\n<p>The launch took place successfully on September 6, 2008 at 11:50:57 a.m. PDT (18:50:57 UTC). The GeoEye-1 satellite separated successfully from its Delta II launch vehicle at 12:49 p.m. PDT (19:49 UTC), 58 minutes and 56 seconds after launch.</p>",
+              position: {
+                cartographicDegrees: [-111.0, 40.0, 0],
+              },
+              point: {
+                color: {
+                  rgba: [255, 255, 255, 255],
+                },
+                outlineColor: {
+                  rgba: [255, 0, 0, 255],
+                },
+                outlineWidth: 4,
+                pixelSize: 20,
+              },
+            },
+          ];
+          
+        var dataSourcePromise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
+  
+        dataSourcePromise.then(function (dataSource) {
+            viewer.zoomTo(dataSource).then(function() {
+                viewer.trackedEntity = dataSource.entities.getById('point');
+            });
+        }).catch(function (error) {
+            console.error(error);
+        });
+
+        // 监听selectedEntityChanged事件，更新InfoBox内容
+        viewer.selectedEntityChanged.addEventListener(function(entity) {
+            if (Cesium.defined(entity) && Cesium.defined(entity.description)) {
+                viewer.infoBox.viewModel.description = entity.description;
+            }
+        });
+    };
+    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);
+}
\ No newline at end of file

src/examples/sceneSet/sceneInfo/sceneInfo.vue

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

src/examples/sceneSet/sceneScreenshot/sceneScreenshot-function.js

+let viewer;  // 全局声明viewer
+
+export function addSceneScreenshot() {
+    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'
+
+        viewer = new window.Cesium.Viewer('cesiumContainer', {
+            navigationHelpButton: false, // 是否显示帮助信息控件
+            infoBox: true,  // 是否显示点击要素之后显示的信息
+            fullscreenButton: false, // 全屏显示
+            CreditsDisplay: false,
+            contextOptions: {
+                webgl: {
+                    alpha: true,
+                    depth: true,
+                    stencil: true,
+                    antialias: true,
+                    premultipliedAlpha: true,
+                    // 通过canvas.toDataURL()实现截图需要将该项设置为true
+                    preserveDrawingBuffer: true,
+                    failIfMajorPerformanceCaveat: true
+                }
+            }
+        });
+    };
+    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);
+}
+
+export function exportImage(){
+    // 获取场景的canvas
+    const canvas = viewer.scene.canvas;
+    // 创建一个临时的a标签用于下载图片
+    const a = document.createElement('a');
+    a.href = canvas.toDataURL('image/png');
+    a.download = 'screenshot.png';
+    // 模拟点击a标签进行下载
+    a.click();
+}
\ No newline at end of file

src/examples/sceneSet/sceneScreenshot/sceneScreenshot.vue

+<template>
+    <div id="cesiumContainer" class="cesium-container"></div>
+    <button @click="exportImage()" class="btn-class">下载场景图片</button>
+</template>
+<script setup>
+import { onMounted } from 'vue';
+import { addSceneScreenshot, exportImage } from './function';
+
+onMounted(() => {
+    addSceneScreenshot()
+});
+</script>
+
+<style>
+.cesium-container {
+width: 100%;
+height: 100vh;
+}
+.btn-class {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+</style>
\ No newline at end of file

src/views/ElementMap.js

@@ -80,6 +80,14 @@ export const elementSceneSetMap = {
         title: '经纬网络3D',
         pngUrl: '/src/assets/JingweiNetwork3D.png'
     },
+    场景信息: {
+        title: '场景信息',
+        pngUrl: '/src/assets/SceneInfo.png'
+    },
+    场景截图: {
+        title: '场景截图',
+        pngUrl: '/src/assets/SceneScreenshot.png'
+    },
     经纬网络2D: {
         title: '经纬网络2D',
         pngUrl: '/src/assets/JingweiNetwork2D.png'