Skip to content

C
cesium-frame
Commit 7ec4f277 by jlc
Options

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

parent 9a604872
Showing with 166 additions and 0 deletions
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 0 → 100644
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 0 → 100644
<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 0 → 100644
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 0 → 100644
<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'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment