Skip to content

V
vue-cesium-lyc
Commit 1e1dfc3e by lyc
Options

1

parents
Showing with 1703 additions and 0 deletions
.gitignore 0 → 100644
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.vscode/extensions.json 0 → 100644
{
"recommendations": ["Vue.volar"]
}
README.md 0 → 100644
# Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
index.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<script src="../Build/CesiumUnminified/Cesium.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
package.json 0 → 100644
{
"name": "vite-vue-cesium",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"cesium": "1.99",
"element-plus": "^2.7.7",
"vite-plugin-cesium": "^1.2.22",
"vue": "^3.4.29"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.5",
"vite": "^5.3.1"
}
}
public/vite.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
src/App.vue 0 → 100644
<script lang="ts">
import demo from './components/demo.vue'
import draw from './components/draw.vue'
import moon from './components/moon.vue'
import boom from './components/boom.vue'
import fire from './components/fire.vue'
import selt from './components/selt.vue'
import sun from './components/sun.vue'
import camera from './components/camera.vue'
import dail from './components/dail.vue'
import baozha from './components/baozha.vue'
export default {
name: 'app',
components: { boom, demo ,draw,moon,fire,selt,sun,camera,dail,baozha}
}
</script>
<template>
<!-- <fire/> -->
<!-- <demo/> -->
<boom></boom>
<!-- <baozha/> -->
<!-- <moon></moon> -->
<!-- <sun/> -->
<!-- <selt/> -->
<!-- <draw/> -->
<!-- <camera/> -->
<!-- <dail/> -->
</template>
<style scoped>
</style>
src/assets/vue.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
src/components/baozha.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
<button id="explodeButton">Explode</button>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
const modelUrl = '/src/model/卫星.gltf';
const modelEntity = viewer.entities.add({
name: "Cesium Air",
position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000),
model: {
uri: modelUrl,
scale: 2000.0
}
});
// Fly the camera to the model
viewer.flyTo(modelEntity);
// Helper function to generate a random direction vector
function getRandomDirection() {
const theta = Math.random() * 2 * Math.PI;
const phi = Math.acos(2 * Math.random() - 1);
return new Cesium.Cartesian3(
Math.sin(phi) * Math.cos(theta),
Math.sin(phi) * Math.sin(theta),
Math.cos(phi)
);
}
// Function to perform the explosion effect
function explodeModel(entity) {
const duration = 3000; // Explosion duration in milliseconds
const explosionDistance = 500; // Distance to move parts away from the center
const startTime = Cesium.JulianDate.now();
const endTime = Cesium.JulianDate.addSeconds(startTime, duration / 1000, new Cesium.JulianDate());
viewer.clock.shouldAnimate = true; // Ensure the clock is running
viewer.scene.preUpdate.addEventListener(function (scene, time) {
const t = Cesium.JulianDate.secondsDifference(time, startTime) / (duration / 1000);
if (t > 1.0) {
viewer.scene.preUpdate.removeEventListener(this);
return;
}
const distance = explosionDistance * t;
const direction = getRandomDirection();
const offset = Cesium.Cartesian3.multiplyByScalar(direction, distance, new Cesium.Cartesian3());
entity.position = Cesium.Cartesian3.add(
Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000),
offset,
new Cesium.Cartesian3()
);
});
}
// Add event listener to the explode button
document.getElementById('explodeButton').addEventListener('click', function () {
explodeModel(modelEntity);
});
// const modelUrl = '/src/model/卫星.gltf';
// const model = viewer.entities.add({
// name: "Cesium Air",
// position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000),
// model: {
// uri: modelUrl,
// scale: 2000.0
// }
// });
// // Define explosion parameters
// const explosionDistance = 500; // Distance to move parts away from the center
// const explosionDuration = 3000; // Duration of the explosion in milliseconds
// // Helper function to calculate random direction vector
// function randomDirection() {
// const theta = Math.random() * 2 * Math.PI;
// const phi = Math.acos(2 * Math.random() - 1);
// const x = Math.sin(phi) * Math.cos(theta);
// const y = Math.sin(phi) * Math.sin(theta);
// const z = Math.cos(phi);
// return new Cesium.Cartesian3(x, y, z);
// }
// // Perform explosion effect
// function explodeModel(model) {
// const start = Date.now();
// function update() {
// const now = Date.now();
// const elapsed = now - start;
// const t = Math.min(elapsed / explosionDuration, 1.0);
// const distance = explosionDistance * t;
// // Move the model parts (simple example, entire model moves)
// const direction = randomDirection();
// const translation = Cesium.Cartesian3.multiplyByScalar(direction, distance, new Cesium.Cartesian3());
// model.position = Cesium.Cartesian3.add(model.position.getValue(Cesium.JulianDate.now()), translation, new Cesium.Cartesian3());
// if (t < 1.0) {
// requestAnimationFrame(update);
// }
// }
// update();
// }
// // Add button to trigger explosion
// const button = document.createElement('button');
// button.textContent = 'Explode';
// button.style.position = 'absolute';
// button.style.top = '10px';
// button.style.left = '10px';
// button.onclick = () => explodeModel(model);
// document.body.appendChild(button);
// viewer.zoomTo(model)
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
button {
position: absolute;
top: 50px;
left: 50px;
z-index: 88;
}
</style>
src/components/boom.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
<button id="explodeButton">Explode</button>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
// Add the model entity
const entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(104, 31),
model: {
uri: '/src/model/卫星.gltf',
minimumPixelSize: 64
},
});
viewer.clock.shouldAnimate = true;
viewer.scene.globe.depthTestAgainstTerrain = false;
let hpr = new Cesium.HeadingPitchRoll();
let trs = new Cesium.TranslationRotationScale();
let particleSystem = "";
const minimum = 10;
const maximum = 20;
particleSystem = viewer.scene.primitives.add(
new Cesium.ParticleSystem({
// ConeEmitter 锥形发射器，BoxEmitter 盒形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
emitter: new Cesium.SphereEmitter(Cesium.Math.toRadians(45.0)),
image: '/src/image/燃脂.png',
startColor: Cesium.Color.RED.withAlpha(0.7),
endColor: Cesium.Color.YELLOW.withAlpha(0.0),
startScale: 1.0,
endScale: 3.0,
particleLife: 1.5,
speed: 10.0,
emissionRate: 5000.0,
loop: false,
imageSize: new Cesium.Cartesian2(15, 15),
bursts: [
new Cesium.ParticleBurst({ time: 0.0, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.1, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.2, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.3, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.4, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.5, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.6, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.7, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.8, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.9, minimum, maximum }),
],
})
);
viewer.scene.preUpdate.addEventListener(function (scene, time) {
particleSystem.modelMatrix = entity.computeModelMatrix(time, new Cesium.Matrix4());
hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr);
trs.translation = Cesium.Cartesian3.fromElements(
-4.0,
0.0,
1.4,
new Cesium.Cartesian3()
);
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(
hpr,
new Cesium.Quaternion()
);
particleSystem.emitterModelMatrix =
Cesium.Matrix4.fromTranslationRotationScale(
trs,
new Cesium.Matrix4()
)
});
// Add event listener to the explode button
document.getElementById('explodeButton').addEventListener('click', function () {
// Trigger the particle system burst
particleSystem.show = true;
setTimeout(() => {
particleSystem.show = false;
}, 2000);
});
// let hpr = new Cesium.HeadingPitchRoll();
// let trs = new Cesium.TranslationRotationScale();
// let particleSystem = "";
// const entity = viewer.entities.add({
// position: Cesium.Cartesian3.fromDegrees(104, 31),
// model: {
// uri: '/src/model/scene.gltf',
// minimumPixelSize: 64
// },
// });
// viewer.clock.shouldAnimate = true;
// viewer.scene.globe.depthTestAgainstTerrain = false;
// const minimum = 10
// const maximum = 20;
// particleSystem = viewer.scene.primitives.add(
// new Cesium.ParticleSystem({
// //ConeEmitter 锥形发射器，BoxEmitter 盒形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
// emitter: new Cesium.SphereEmitter(Cesium.Math.toRadians(45.0)),
// image:
// "/src/image/燃脂.png",
// startColor: Cesium.Color.RED.withAlpha(0.7),
// endColor: Cesium.Color.YELLOW.withAlpha(0.0),
// startScale: 1.0,
// endScale: 3.0,
// particleLife: 1.5,
// speed: 10.0,
// emissionRate: 5000.0,
// loop :false,
// imageSize: new Cesium.Cartesian2(15, 15),
// bursts: [
// new Cesium.ParticleBurst({ time: 0.0, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.1, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.2, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.3, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.4, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.5, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.6, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.7, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.8, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.9, minimum, maximum }),
// ],
// })
// );
// viewer.scene.preUpdate.addEventListener(function (scene, time) {
// particleSystem.modelMatrix = entity.computeModelMatrix(time, new Cesium.Matrix4())
// hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr);
// trs.translation = Cesium.Cartesian3.fromElements(
// -4.0,
// 0.0,
// 1.4,
// new Cesium.Cartesian3()
// );
// trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(
// hpr,
// new Cesium.Quaternion()
// );
// particleSystem.emitterModelMatrix =
// Cesium.Matrix4.fromTranslationRotationScale(
// trs,
// new Cesium.Matrix4()
// )
// });
// viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(104, 31, 80),
// orientation: {
// heading: 5.916424, //相机绕z轴旋转。左右摇头。
// pitch: -1.265734, //相机绕y轴旋转。上下点头。
// roll: 0.0, //相机绕x轴旋转。左右歪头。
// },
// duration: 3,
// });
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
button {
position: absolute;
top: 50px;
left: 50px;
z-index: 88;
}
</style>
src/components/camera.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
<div>
<button @click="viewTrack">viewTrack</button>
</div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'
let viewer;
var satelliteEntity
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
viewer = new Cesium.Viewer("cesiumContainer", {
})
var start = new Cesium.JulianDate.fromDate(new Date());//把js中的时间转换为儒略时间
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());//东八区时间
// 结束时间
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
//确保查看器处于预期的时间
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //循环结束时
//时间变化来控制速度 // 时间速率，数字越大时间过的越快
viewer.clock.multiplier = 10;
//给时间线设置边界
viewer.timeline.zoomTo(start, stop);
class mySatePosition {
constructor() {
this.lon = 0;
this.lat = 0;
this.satelliteHeight = 700000; //卫星高度
this.orbitHeight = 700000 / 2; //轨道高度
this.time = 0;
}
}
function getRandState(ifLat, degree) {
var arr = [];
var lat = Math.floor(360);
for (var i = lat; i <= 360 + lat; i += 30) {
var aaa = new mySatePosition();
if (ifLat == 'lon') {
aaa.lon = degree;
aaa.lat = i;
} else {
aaa.lon = i
aaa.lat = degree;
}
aaa.time = i - lat;
arr.push(aaa);
}
return arr
}
function computePosition(source, panduan) {
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i < source.length; i++) {
var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate());
var position = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, panduan === 1 ? source[i].satelliteHeight : source[i].orbitHeight);
property.addSample(time, position);
}
return property;
}
let ifLat = 'lon'
let degree= 60
//获取路径
let path = getRandState(ifLat, degree);
//扫描圆锥
var entityPath = computePosition(path, 2);
var entity = viewer.entities.add({
//关联时间轴 TimeIntervalCollection管理时间间隔数据的集合 把时间轴的起止时间同步为实体的
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: entityPath,
orientation: new Cesium.VelocityOrientationProperty(entityPath)
});
entity.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
//卫星环绕
var satellitePath = computePosition(path, 1);
satelliteEntity = viewer.entities.add({
// 将实体availability设置为与模拟时间相同的时间间隔。
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
//计算实体位置属性
position: satellitePath,
//基于位置移动自动计算方向.
orientation: new Cesium.VelocityOrientationProperty(satellitePath),
//加载飞机模型
model: {
uri: '/src/model/空间站.gltf',
minimumPixelSize: 100,
scale: 200.0,
},
//白色路径
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.PINK
}),
width: 5
}
});
//插值器
satelliteEntity.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
console.log(satelliteEntity.position._property)
})
function viewTrack() {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(60, 0, 1000000.0)
})
viewer.trackedEntity = satelliteEntity;
}
</script>
<style>
</style>
src/components/dail.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
<div class="time">
<img src="/src/image/time.png" style="width: 100%; height: 100%;">
</div>
<div>
<button class="button1" v-on:click="forward">▶</button>
<button class="button2" v-on:click="start">◼</button>
<button class="button3" v-on:click="back">◀</button>
<button class="button4" v-on:click="multiplier">×2</button>
<button class="button5" v-on:click="divide">×-2</button>
<button class="button6" v-on:click="reset">⚪</button>
<p class="bei">{{ bei }}X</p>
<p class="time-text"> {{ timetext }}</p>
</div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'
let viewer;
var bei = ref(1)
var timetext = ref()
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
viewer = new Cesium.Viewer("cesiumContainer", {
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
vrButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: true,
navigationHelpButton: false,
})
// 格式化时间轴
viewer.timeline.makeLabel = function (date) {
const julianDT = new Cesium.JulianDate();
Cesium.JulianDate.addHours(date, 8, julianDT);
var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);
let hour = gregorianDT.hour + "";
let minute = gregorianDT.minute + "";
let second = gregorianDT.second + "";
timetext = `${gregorianDT.year}年${gregorianDT.month}月${gregorianDT.day}日`;
return `${gregorianDT.year}年${gregorianDT.month}月${gregorianDT.day}日${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(2,"0")}`;
};
})
var forward = () => {
let t = viewer.clockViewModel.multiplier;
viewer.clockViewModel.multiplier = Math.abs(t);
viewer.clock.shouldAnimate = true;
}
var flag = false;
var start = () => {
flag = !(flag);
if (flag == true)
viewer.clock.shouldAnimate = true;
else
viewer.clock.shouldAnimate = false;
}
var back = () => {
let t = viewer.clockViewModel.multiplier;
viewer.clockViewModel.multiplier = Math.abs(t);
viewer.clock.shouldAnimate = true;
}
var multiplier = () => {
viewer.clockViewModel.multiplier *= 2;
bei.value = viewer.clockViewModel.multiplier
}
var divide = () => {
viewer.clockViewModel.multiplier /= 2;
bei.value = viewer.clockViewModel.multiplier
}
var reset = () => {
viewer.clock.currentTime = viewer.clock.startTime;
}
</script>
<style>
.time {
width: 180px;
height: 100px;
position: absolute;
bottom: 0px;
left: 0px;
}
.button1 {
position: absolute;
top: 938px;
left: 110px;
}
.button2 {
position: absolute;
top: 938px;
left: 75px;
}
.button3 {
position: absolute;
top: 938px;
left: 40px;
}
.button4 {
position: absolute;
top: 938px;
left: 140px;
}
.button5 {
position: absolute;
top: 938px;
left: 0px;
}
.button6 {
position: absolute;
top: 850px;
left: 0px;
}
.bei {
color: aliceblue;
font-size: 15px;
position: absolute;
top: 877px;
left: 80px;
}
.time-text {
color: aliceblue;
font-size: 15px;
position: absolute;
top: 900px;
left: 40px;
}
</style>
src/components/fire.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
let hpr = new Cesium.HeadingPitchRoll();
let trs = new Cesium.TranslationRotationScale();
let particleSystem = "";
const entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(104, 31),
});
viewer.clock.shouldAnimate = true;
viewer.scene.globe.depthTestAgainstTerrain = false;
const minimum = 10
const maximum = 20;
particleSystem = viewer.scene.primitives.add(
new Cesium.ParticleSystem({
//ConeEmitter 锥形发射器，BoxEmitter 盒形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
emitter: new Cesium.CircleEmitter(Cesium.Math.toRadians(45.0)),
image:
"/src/image/燃脂.png",
startColor: Cesium.Color.RED,
endColor: Cesium.Color.YELLOW,
startScale: 1.0,
endScale: 3.0,
particleLife: 1.5,
speed: 10.0,
emissionRate: 200.0,
imageSize: new Cesium.Cartesian2(25, 25),
bursts: [
new Cesium.ParticleBurst({ time: 0.0, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.1, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.2, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.3, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.4, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.5, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.6, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.7, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.8, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.9, minimum, maximum }),
],
})
);
viewer.scene.preUpdate.addEventListener(function (scene, time) {
particleSystem.modelMatrix = entity.computeModelMatrix(time, new Cesium.Matrix4())
hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr);
trs.translation = Cesium.Cartesian3.fromElements(
-4.0,
0.0,
1.4,
new Cesium.Cartesian3()
);
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(
hpr,
new Cesium.Quaternion()
);
particleSystem.emitterModelMatrix =
Cesium.Matrix4.fromTranslationRotationScale(
trs,
new Cesium.Matrix4()
)
});
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(104, 31, 80),
orientation: {
heading: 5.916424, //相机绕z轴旋转。左右摇头。
pitch: -1.265734, //相机绕y轴旋转。上下点头。
roll: 0.0, //相机绕x轴旋转。左右歪头。
},
duration: 3,
});
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
button {
position: absolute;
top: 50px;
left: 50px;
z-index: 88;
}
</style>
src/components/moon.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'
import Cartesian2 from 'cesium/Source/Core/Cartesian2';
var image = '/src/image/moon1.jpg';
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
baseLayerPicker: false, // 影像切换
animation: true, //是否显示动画控件
infoBox: false, //是否显示点击要素之后显示的信息
geocoder: false, //是否显示地名查找控件
timeline: true, //是否显示时间线控件
fullscreenButton: false,
shouldAnimate: false,
navigationHelpButton: false, //是否显示帮助信息控件
terrainProvider: new Cesium.createWorldTerrain({
requestWaterMask: true,
requestVertexNormals: true
}),
})
var start = new Cesium.JulianDate.fromDate(new Date());
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 10;
viewer.timeline.zoomTo(start, stop);
const inclination = Cesium.Math.toRadians(28.5); // 轨道倾角（以弧度表示）
const semiMajorAxis = 38440000; // 半长轴（米），大约为月球到地球的平均距离
// const period = 27.321582 * 24 * 60 * 60; // 月球的公转周期（秒）
const period = 360 ;
// 定义轨道上的点数
const numberOfPoints = 100;
function createMoonOrbit(inclination, semiMajorAxis, period, numberOfPoints) {
const positions = [];
// 计算每个点的位置
for (let i = 0; i < numberOfPoints; i++) {
const meanAnomaly = (2 * Math.PI / period) * (i * period / numberOfPoints); // 平均异常
const trueAnomaly = meanAnomaly; // 简化处理，假设轨道是圆的
const radius = semiMajorAxis; // 圆轨道的半径等于半长轴
// 计算笛卡尔坐标
const x = radius * Math.cos(trueAnomaly);
const y = radius * Math.sin(trueAnomaly) * Math.cos(inclination);
const z = radius * Math.sin(trueAnomaly) * Math.sin(inclination);
// 将笛卡尔坐标转换为经纬度坐标
const cartographic = Cesium.Cartographic.fromCartesian(Cesium.Cartesian3.fromElements(x, y, z));
// 添加到位置数组
positions.push(cartographic);
}
positions.push(positions[0])
return positions;
}
// 创建轨道路径
const moonOrbitPositions = createMoonOrbit(inclination, semiMajorAxis, period, numberOfPoints);
// 将轨道位置转换为Cartesian3坐标
const cartesianPositions = moonOrbitPositions.map(position => Cesium.Cartesian3.fromRadians(position.longitude, position.latitude, position.height));
// 创建SampledPositionProperty
const orbitPosition = new Cesium.SampledPositionProperty();
for (let i = 0; i <= numberOfPoints; i++) {
const time = Cesium.JulianDate.addSeconds(viewer.clock.startTime, i * period / numberOfPoints, new Cesium.JulianDate());
orbitPosition.addSample(time, cartesianPositions[i]);
}
const moonEntity = viewer.entities.add({
name: 'Moon',
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: orbitPosition,
orientation: new Cesium.VelocityOrientationProperty(orbitPosition),
// 设置月球的形状
model: {
uri: '/src/model/moon.gltf',
minimumPixelSize: 100,
scale: 200.0,
},
// 显示月球的运动轨迹
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.PINK
}),
width: 5
}
});
// 设置插值选项
moonEntity.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
button {
position: absolute;
top: 50px;
left: 50px;
z-index: 88;
}
</style>
src/components/selt.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
baseLayerPicker: false, // 影像切换
animation: true, //是否显示动画控件
infoBox: false, //是否显示点击要素之后显示的信息
geocoder: false, //是否显示地名查找控件
timeline: true, //是否显示时间线控件
fullscreenButton: false,
shouldAnimate: false,
navigationHelpButton: false, //是否显示帮助信息控件
terrainProvider: new Cesium.createWorldTerrain({
requestWaterMask: true,
requestVertexNormals: true
}),
})
var start = new Cesium.JulianDate.fromDate(new Date());//把js中的时间转换为儒略时间
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());//东八区时间
// 结束时间
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
//确保查看器处于预期的时间
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //循环结束时
//时间变化来控制速度 // 时间速率，数字越大时间过的越快
viewer.clock.multiplier = 10;
//给时间线设置边界
viewer.timeline.zoomTo(start, stop);
class mySatePosition {
constructor() {
this.lon = 0;
this.lat = 0;
this.satelliteHeight = 700000; //卫星高度
this.orbitHeight = 700000 / 2; //轨道高度
this.time = 0;
}
}
function getRandState(ifLat, degree) {
var arr = [];
var lat = Math.floor(Math.random() * 360);
for (var i = lat; i <= 360 + lat; i += 30) {
var aaa = new mySatePosition();
if (ifLat == 'lon') {
aaa.lon = degree;
aaa.lat = i;
} else {
aaa.lon = i
aaa.lat = degree;
}
aaa.time = i - lat;
arr.push(aaa);
}
return arr
}
function computePosition(source, panduan) {
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i < source.length; i++) {
var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate());
var position = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, panduan === 1 ? source[i].satelliteHeight : source[i].orbitHeight);
property.addSample(time, position);
}
return property;
}
function startSimulation(ifLat, degree) {
//获取路径
let path = getRandState(ifLat, degree);
//扫描圆锥
var entityPath = computePosition(path, 2);
var entity = viewer.entities.add({
//关联时间轴 TimeIntervalCollection管理时间间隔数据的集合 把时间轴的起止时间同步为实体的
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: entityPath,
orientation: new Cesium.VelocityOrientationProperty(entityPath),
cylinder: {
HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
length: 700000,
topRadius: 0,
bottomRadius: 700000 / 2,
material: Cesium.Color.RED.withAlpha(0.4),
outline: true,
numberOfVerticalLines: 0,
outlineColor: Cesium.Color.RED.withAlpha(0.8)
},
});
entity.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
//卫星环绕
var satellitePath = computePosition(path, 1);
var satelliteEntity = viewer.entities.add({
// 将实体availability设置为与模拟时间相同的时间间隔。
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
//计算实体位置属性
position: satellitePath,
//基于位置移动自动计算方向.
orientation: new Cesium.VelocityOrientationProperty(satellitePath),
//加载飞机模型
model: {
uri: '/src/model/scene1.gltf',
minimumPixelSize: 32,
scale: 2000.0,
},
//白色路径
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.PINK
}),
width: 5
}
});
//插值器
satelliteEntity.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
}
startSimulation('lat', 0)
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
button {
position: absolute;
top: 50px;
left: 50px;
z-index: 88;
}
</style>
src/components/sun.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'
import Cartesian2 from 'cesium/Source/Core/Cartesian2';
import Camera from 'cesium/Source/Scene/Camera';
var image = '/src/image/moon1.jpg';
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
const scene = viewer.scene;
const globe = scene.globe;
const baseLayer = viewer.scene.imageryLayers.get(0);
globe.showGroundAtmosphere = false;
globe.baseColor = Cesium.Color.TRANSPARENT;
globe.translucency.enabled = true;
globe.undergroundColor = undefined;
scene.screenSpaceCameraController.enableCollisionDetection = false;
// Set oceans on Bing base layer to transparent
baseLayer.colorToAlpha = new Cesium.Color(0.0, 0.016, 0.059);
baseLayer.colorToAlphaThreshold = 0.2;
viewer.scene.globe.enableLighting = false;
viewer.shadows = false;
viewer.scene.sun.show = false;//还可以viewer.scene.sun.destroy();
//月亮
viewer.scene.moon.show = false;
viewer.scene.skyAtmosphere.show = false;
//雾
viewer.scene.fog.enable = false;
var start = new Cesium.JulianDate.fromDate(new Date());
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());
var stop = Cesium.JulianDate.addDays(start, 27.321582, new Cesium.JulianDate());
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 1;
viewer.timeline.zoomTo(start, stop);
const inclination = Cesium.Math.toRadians(28.5); // 轨道倾角（以弧度表示）
const semiMajorAxis = 38440000; // 半长轴（米），大约为月球到地球的平均距离
// const period = 27.321582 * 24 * 60 * 60; // 月球的公转周期（秒）
const period = 50;
// 定义轨道上的点数
const numberOfPoints = 1000;
function createMoonOrbit(inclination, semiMajorAxis, period, numberOfPoints) {
const positions = [];
// 计算每个点的位置
for (let i = 0; i < numberOfPoints; i++) {
const meanAnomaly = (2 * Math.PI / period) * (i * period / numberOfPoints); // 平均异常
const trueAnomaly = meanAnomaly; // 简化处理，假设轨道是圆的
const radius = semiMajorAxis; // 圆轨道的半径等于半长轴
const x = radius * Math.cos(trueAnomaly);
const y = radius * Math.sin(trueAnomaly) * Math.cos(inclination);
const z = radius * Math.sin(trueAnomaly) * Math.sin(inclination);
const cartographic = Cesium.Cartographic.fromCartesian(Cesium.Cartesian3.fromElements(x, y, z));
positions.push(cartographic);
}
return positions;
}
const moonOrbitPositions = createMoonOrbit(inclination, semiMajorAxis, period, numberOfPoints);
const cartesianPositions = moonOrbitPositions.map(position => Cesium.Cartesian3.fromRadians(position.longitude, position.latitude, position.height));
const orbitPosition = new Cesium.SampledPositionProperty();
for (let i = 0; i < numberOfPoints; i++) {
const time = Cesium.JulianDate.addSeconds(viewer.clock.startTime, i * period / numberOfPoints, new Cesium.JulianDate());
orbitPosition.addSample(time, cartesianPositions[i]);
}
const mantleRadius = 6400000.0;
const sunEntity = viewer.entities.add({
position: Cesium.Cartesian3.ZERO,
ellipsoid: {
radii: new Cesium.Cartesian3(
mantleRadius,
mantleRadius,
mantleRadius
),
material: new Cesium.ImageMaterialProperty({
image: "/src/image/sun.jpg",
repeat: new Cartesian2(1, 1)
})
},
})
const moonEntity = viewer.entities.add({
name: 'Moon',
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: orbitPosition,
orientation: new Cesium.VelocityOrientationProperty(orbitPosition),
model: {
uri: '/src/model/earth.gltf',
minimumPixelSize: 100,
scale: 200.0,
shadows: Cesium.ShadowMode.DISABLED,
},
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.PINK
}),
width: 5
}
});
moonEntity.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
button {
position: absolute;
top: 50px;
left: 50px;
z-index: 88;
}
</style>
src/main.js 0 → 100644
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
\ No newline at end of file
src/model/scene.gltf 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/style.css 0 → 100644
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
vite.config.js 0 → 100644
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from "vite-plugin-cesium";
export default defineConfig({
plugins: [vue(),cesium()],
})
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