Skip to content

V
vue-cesium-lyc
Commit 50c3c2e5 by lyc
Options

11

parent c649dee2
Showing with 1096 additions and 64 deletions
index.html
......@@ -15,4 +15,5 @@
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<!-- <script src="../Build/CesiumUnminified/Cesium.js"></script> -->
</html>
package-lock.json
......@@ -12,6 +12,7 @@
"cesium-heatmap": "^0.0.4",
"element-plus": "^2.7.7",
"heatmap.js": "^2.0.5",
"satellite.js": "^5.0.0",
"vite-plugin-cesium": "^1.2.22",
"vue": "^3.4.29"
},
......@@ -1675,6 +1676,11 @@
"node": ">=14.0.0"
}
},
"node_modules/satellite.js": {
"version": "5.0.0",
"resolved": "https://registry.npmmirror.com/satellite.js/-/satellite.js-5.0.0.tgz",
"integrity": "sha512-ie3yiJ2LJAJIhVUKdYhgp7V0btXKAMImDjRnuaNfJGl8rjwP2HwVIh4HLFcpiXYEiYwXc5fqh5+yZqCe6KIwWw=="
},
"node_modules/send": {
"version": "0.18.0",
"resolved": "https://registry.npmmirror.com/send/-/send-0.18.0.tgz",
......
package.json
......@@ -13,6 +13,7 @@
"cesium-heatmap": "^0.0.4",
"element-plus": "^2.7.7",
"heatmap.js": "^2.0.5",
"satellite.js": "^5.0.0",
"vite-plugin-cesium": "^1.2.22",
"vue": "^3.4.29"
},
......
src/App.vue
......@@ -23,6 +23,11 @@ import relitu from './components/relitu.vue'
// import test from './components/test.vue'
import dengyue from './components/dengyue.vue'
import dici from './components/dici.vue'
import nasa from './components/nasa.vue'
// import shuizhunmian from './components/shuizhunmian.vue'
import benying from './components/benying.vue'
import dirihuihezuobiao from './components/dirihuihezuobiao.vue'
import shubiaotianjiashijian from './components/shubiaotianjiashijian.vue'
//封装
import point from './encapsulation/point.vue'
......@@ -32,10 +37,11 @@ import polygonq from './encapsulation/polygon.vue'
import sensor from './encapsulation/sensor.vue'
export default {
name: 'app',
components: {
boom, demo, draw, moon, fire, selt, sun, camera, dail, baozha, kedupan, raotaiyang, qq, setl, xyz, shiye,jiguang,shiqushiti,kuosanquan,relitu,dengyue,dici,
boom, demo, draw, moon, fire, selt, sun, camera, dail, baozha, kedupan, raotaiyang, qq, setl, xyz, shiye, jiguang, shiqushiti, kuosanquan, relitu, dengyue, dici, nasa, benying, dirihuihezuobiao,shubiaotianjiashijian,
point, lineq,polygonq,sensor
}
}
......@@ -61,16 +67,21 @@ export default {
<!-- <lineq/> -->
<!-- <jiguang/> -->
<!-- <shiqushiti/> -->
<kuosanquan/>
<!-- <kuosanquan/> -->
<!-- <relitu/> -->
<!-- <test/> -->
<!-- <dengyue/> -->
<!-- <dici/> -->
<!-- <test/> -->
<!-- <dengyue/> -->
<!-- <dici/> -->
<!-- <nasa/> -->
<!-- <shuizhunmian/> -->
<!-- <benying/> -->
<!-- <dirihuihezuobiao/> -->
<shubiaotianjiashijian/>
<!-- <point/> -->
<!-- <polygonq/> -->
<!-- <station/> -->
<!-- <sensor/> -->
<!-- <sensor/> -->
</template>
......
src/components/benying.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
var image = '/src/image/moon1.jpg';
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
// terrainProvider: new Cesium.CesiumIonTerrainProvider({
// ionResource: 'https://assets.agi.com/stk-terrain/latest'
// }),
baseLayerPicker: false,
shadows: false // 关闭默认的阴影效果
})
// // 计算太阳位置
// function calculateSunPosition() {
// var now = new Date();
// var lat = 0; // 经度
// var lon = 0; // 纬度
// var altitude = 0; // 海拔
// var location = { latitude: lat, longitude: lon, altitude: altitude };
// var result = SunPosition.at(now, location);
// var azimuth = result.azimuth; // 方位角
// var altitude = result.altitude; // 高度角
// // 将太阳的位置转换为 Cartesian3
// var radiansAzimuth = Cesium.Math.toRadians(azimuth);
// var radiansAltitude = Cesium.Math.toRadians(altitude);
// var radius = 1.0; // 单位距离
// var sunPosition = Cesium.Cartesian3.fromRadians(radiansAzimuth, radiansAltitude, radius);
// return sunPosition;
// }
// function updateSunPosition() {
// var sunPosition = calculateSunPosition();
// // 更新太阳光方向
// var lightDirection = Cesium.Cartesian3.fromRadians(
// sunPosition.longitude,
// sunPosition.latitude,
// sunPosition.radius
// );
// lightDirection = Cesium.Cartesian3.normalize(lightDirection, new Cesium.Cartesian3());
// viewer.scene.light = new Cesium.DirectionalLight(lightDirection, Cesium.Color.WHITE);
// // 修改地球着色器来添加阴影效果
// var fragmentShader = `
// czm_terrainMaterial.diffuse = czm_terrainMaterial.baseColor * czm_terrainMaterial.diffuse;
// // 计算太阳光方向与地形法线之间的点积
// var dotProduct = Cesium.dot(viewer.scene.light.direction, czm_terrainMaterial.normal);
// if (dotProduct < 0.0) {
// czm_terrainMaterial.diffuse *= vec4(0.0, 0.0, 0.0, 1.0); // 阴影部分
// } else {
// czm_terrainMaterial.diffuse *= vec4(1.0, 1.0, 1.0, 1.0); // 非阴影部分
// }
// `;
// viewer.scene.globe.ellipsoidSurfaceAppearance.material.uniforms.u_diffuse = Cesium.Color.fromCssColorString('white');
// viewer.scene.globe.ellipsoidSurfaceAppearance.material.fragmentShader = fragmentShader;
// requestAnimationFrame(updateSunPosition);
// }
// // 开始更新太阳位置
// updateSunPosition();
})
</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/dirihuihezuobiao.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import Cartesian2 from 'cesium/Source/Core/Cartesian2';
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
// 初始化时钟
const start = Cesium.JulianDate.fromDate(new Date());
const adjustedStart = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());
const stop = Cesium.JulianDate.addSeconds(adjustedStart, 360, new Cesium.JulianDate());
viewer.clock.startTime = adjustedStart.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = adjustedStart.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 1;
viewer.timeline.zoomTo(adjustedStart, stop);
const scene = viewer.scene;
let handler;
// 定义轨道的相关参数
const inclination = Cesium.Math.toRadians(0); // 轨道倾角（以弧度表示）
const semiMajorAxis = 106371393; // 半长轴（米），大约为月球到地球的平均距离
const period = 360; // 轨道周期（秒）
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);
let cartesianPositions = moonOrbitPositions.map(position => Cesium.Cartesian3.fromRadians(position.longitude, position.latitude, position.height));
const sunpoint = Cesium.Cartesian3.fromDegrees(0, 0, 100000000)
const sun= viewer.entities.add({
position: sunpoint,
ellipsoid: {
radii: new Cesium.Cartesian3(
10400000,
10400000,
10400000
),
material: new Cesium.ImageMaterialProperty({
image: "/src/image/sun.jpg",
repeat: new Cartesian2(1, 1)
})
},
})
for (let i = 0; i < cartesianPositions.length; i++) {
cartesianPositions[i].x = cartesianPositions[i].x + sunpoint.x
cartesianPositions[i].y = cartesianPositions[i].y + sunpoint.y
cartesianPositions[i].z = cartesianPositions[i].z + sunpoint.z
}
viewer.entities.add({
polyline: {
positions: cartesianPositions,
width: 2,
material: Cesium.Color.YELLOWGREEN
}
})
const l1 = Cesium.Cartesian3.fromDegrees(0, 0, 30000000)
const l2 = Cesium.Cartesian3.fromDegrees(180, 0, 30000000)
function generateTrackPositions(latitudeDegrees, altitudeMeters, numberOfPoints,l1) {
// 将纬度从度转换为弧度
const latitudeRadians = Cesium.Math.toRadians(latitudeDegrees);
const localToFixedFrameMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(l1)
// 创建坐标点数组
var positions = [];
for (let i = 0; i <= numberOfPoints; i++) {
// 计算每个点的经度（弧度），均匀分布在0到360度之间
const longitudeRadians = Cesium.Math.toRadians(i * (360 / numberOfPoints));
// 通过经纬度和高度创建Cartesian3坐标
const position = Cesium.Cartesian3.fromRadians(longitudeRadians, latitudeRadians, altitudeMeters);
const moon = Cesium.Matrix4.multiplyByPoint(localToFixedFrameMatrix, position, new Cesium.Cartesian3());
positions.push(moon);
}
return positions;
}
const positionsl1 = generateTrackPositions(60, 1000, 100,l1);
const positionsl2 = generateTrackPositions(60, 1000, 100, l2);
let trajectoryPoints1 = positionsl1
const satellitePositions1 = new Cesium.SampledPositionProperty();
for (let i = 0; i < trajectoryPoints1.length; i++) {
const time = Cesium.JulianDate.addSeconds(viewer.clock.startTime, i * period / trajectoryPoints1.length, new Cesium.JulianDate());
satellitePositions1.addSample(time, trajectoryPoints1[i]);
}
const satelliteEntity1 = viewer.entities.add({
name: 'satellite',
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: satellitePositions1,
orientation: new Cesium.VelocityOrientationProperty(satellitePositions1),
point: {
pixelSize: 10,
color: Cesium.Color.WHITE
},
// model: {
// uri: '/src/model/卫星.gltf',
// minimumPixelSize: 50,
// scale: 60.0,
// },
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.PINK
}),
width: 5
}
});
satelliteEntity1.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
let trajectoryPoints2 = positionsl2
const satellitePositions2 = new Cesium.SampledPositionProperty();
for (let i = 0; i < trajectoryPoints2.length; i++) {
const time = Cesium.JulianDate.addSeconds(viewer.clock.startTime, i * period / trajectoryPoints2.length, new Cesium.JulianDate());
satellitePositions2.addSample(time, trajectoryPoints2[i]);
}
const satelliteEntity2 = viewer.entities.add({
name: 'satellite2',
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: satellitePositions2,
orientation: new Cesium.VelocityOrientationProperty(satellitePositions2),
point: {
pixelSize: 10,
color: Cesium.Color.WHITE
},
// model: {
// uri: '/src/model/卫星.gltf',
// minimumPixelSize: 50,
// scale: 60.0,
// },
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.PINK
}),
width: 5
}
});
satelliteEntity2.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/raotaiyng.vue
......@@ -68,15 +68,15 @@ onMounted(() => {
})]),
position: orbitPosition,
orientation: new Cesium.VelocityOrientationProperty(orbitPosition),
// point: {
// pixelSize: 10,
// color: Cesium.Color.WHITE
// },
model: {
uri: '/src/model/moon1.glb',
minimumPixelSize: 100,
scale: 200.0,
point: {
pixelSize: 10,
color: Cesium.Color.WHITE
},
// model: {
// uri: '/src/model/moon1.glb',
// minimumPixelSize: 100,
// scale: 200.0,
// },
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
......@@ -109,7 +109,7 @@ onMounted(() => {
const currentPosition = getCartesianPositionAtTime(viewer.clock.currentTime);
const moonEllipsoid = new Cesium.Ellipsoid(1737400.0, 1737400.0, 1737400.0);
// 计算月球赤道位置
// // 计算月球赤道位置
function computeMoonPosition(number, currentPosition) {
const positions = [];
const localToFixedFrameMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(currentPosition);
......@@ -125,21 +125,9 @@ onMounted(() => {
return positions;
}
let moonEquatorPositions = computeMoonPosition(numberOfPoints, currentPosition);
// function qq() {
// // 创建代表月球赤道轨道的实体
// const satelliteOrbitEntity = viewer.entities.add({
// polyline: {
// positions: moonEquatorPositions,
// width: 2,
// material: new Cesium.PolylineGlowMaterialProperty({
// glowPower: 0.1,
// color: Cesium.Color.PINK
// }),
// }
// });
// }
let moonEquatorPositions = computeMoonPosition(numberOfPoints, currentPosition,45);
// 创建代表卫星的实体
const satelliteEntity = viewer.entities.add({
......@@ -151,22 +139,53 @@ onMounted(() => {
const index = Math.floor((seconds % period) / period * numberOfPoints);
return moonEquatorPositions[index];
}, false),
// point: {
// pixelSize: 10,
// color: Cesium.Color.RED
// }
model: {
uri: '/src/model/卫星.gltf',
minimumPixelSize: 100,
scale: 200.0,
},
point: {
pixelSize: 10,
color: Cesium.Color.RED
}
// model: {
// uri: '/src/model/卫星.gltf',
// minimumPixelSize: 100,
// scale: 200.0,
// },
});
function generateTrackPositions(latitudeDegrees, altitudeMeters, numberOfPoints) {
// 将纬度从度转换为弧度
const latitudeRadians = Cesium.Math.toRadians(latitudeDegrees);
const localToFixedFrameMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(currentPosition)
// 创建坐标点数组
var positions = [];
for (let i = 0; i <= numberOfPoints; i++) {
// 计算每个点的经度（弧度），均匀分布在0到360度之间
const longitudeRadians = Cesium.Math.toRadians(i * (360 / numberOfPoints));
// 通过经纬度和高度创建Cartesian3坐标
const position = Cesium.Cartesian3.fromRadians(longitudeRadians, latitudeRadians, altitudeMeters);
const moon = Cesium.Matrix4.multiplyByPoint(localToFixedFrameMatrix, position, new Cesium.Cartesian3());
positions.push(moon);
}
return positions;
}
// 使用函数生成点位信息
const positions = generateTrackPositions(60, 1000, 100);
// 创建Polyline实体
const polyline = viewer.entities.add({
polyline: {
positions: positions,
width: 2,
material: Cesium.Color.BLUEVIOLET
}
});
// 更新相机视角以查看整个轨道
// viewer.zoomTo(polyline);
......
src/components/shubiaotianjiashijian.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
// 绑定屏幕空间事件
// const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
// handler.setInputAction(function (event) {
// console.log('shift + 左键单击', event.position);
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 移除屏幕空间事件
// handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
function leftClickShift(viewer,event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);
}
const event1 = function (event) {
console.log('shift + 左键单击', event.position);
}
leftClickShift(viewer, event1)
function leftDown(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.LEFT_DOWN);
}
const event2 = function (event) {
console.log('左键按下', event.position);
}
leftDown(viewer, event2)
function leftUp(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.LEFT_UP);
}
const event3 = function (event) {
console.log('左键弹起', event.position);
}
leftUp(viewer, event3)
function leftClick(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
const event4 = function (event) {
console.log('左键点击', event.position);
}
leftClick(viewer, event4)
function leftDoubleClick(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}
const event5 = function (event) {
console.log('左键双击', event.position);
}
leftDoubleClick(viewer, event5)
function rightDown(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.RIGHT_DOWN);
}
const event6 = function (event) {
console.log('右键按下', event.position);
}
rightDown(viewer, event6)
function rightUp(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.RIGHT_UP);
}
const event7 = function (event) {
console.log('右键弹起', event.position);
}
rightUp(viewer, event7)
function rightClick(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
const event8 = function (event) {
console.log('右键点击', event.position);
}
rightClick(viewer, event8)
function middleDown(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
}
const event9 = function (event) {
console.log('中键按下', event.position);
}
middleDown(viewer, event9)
function middleUp(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.MIDDLE_UP);
}
const event10 = function (event) {
console.log('中键弹起', event.position);
}
middleUp(viewer, event10)
function middleClick(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
}
const event11 = function (event) {
console.log('中键点击', event.position);
}
middleClick(viewer, event11)
function mouseMove(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
const event12 = function (event) {
console.log('鼠标移动', event.position);
}
mouseMove(viewer, event12)
function wheel(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.WHEEL);
}
const event13 = function (event) {
console.log('滚轮滚动', event.position);
}
wheel(viewer, event13)
function leftClickCtrl(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.CTRL);
}
const event14 = function (event) {
console.log('ctrl + 左键单击', event.position);
}
leftClickCtrl(viewer, event14)
function leftClickAlt(viewer, event) {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event, Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.ALT);
}
const event15 = function (event) {
console.log('alt + 左键单击', event.position);
}
leftClickAlt(viewer, event15)
})
</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/xyz.vue
......@@ -5,41 +5,144 @@
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { degreesLat, degreesLong, eciToGeodetic, gstime, propagate, twoline2satrec, sgp4 } from "satellite.js"
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
// 初始化时钟
const start = Cesium.JulianDate.fromDate(new Date());
const adjustedStart = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());
const stop = Cesium.JulianDate.addHours(adjustedStart, 2, new Cesium.JulianDate());
viewer.clock.startTime = adjustedStart.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = adjustedStart.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 1;
viewer.timeline.zoomTo(adjustedStart, stop);
const scene = viewer.scene;
let handler;
// 添加用于显示标签的实体
const entity = viewer.entities.add({
label: {
show: false,
showBackground: true,
font: "16px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.TOP,
pixelOffset: new Cesium.Cartesian2(15, 0),
eyeOffset: new Cesium.Cartesian3(0, 0, -10000)
const inclination = Cesium.Math.toRadians(0); // 轨道倾角（以弧度表示）
const semiMajorAxis = 38440000; // 半长轴（米），大约为月球到地球的平均距离
const period = 7200; // 轨道周期（秒）
const numberOfPoints = 100; // 轨道上的点数
// const scene = viewer.scene;
// let handler;
// // 添加用于显示标签的实体
// const entity = viewer.entities.add({
// label: {
// show: false,
// showBackground: true,
// font: "16px monospace",
// horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
// verticalOrigin: Cesium.VerticalOrigin.TOP,
// pixelOffset: new Cesium.Cartesian2(15, 0),
// eyeOffset: new Cesium.Cartesian3(0, 0, -10000)
// },
// });
// // 设置鼠标事件处理器
// handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
// handler.setInputAction(function (movement) {
// const cartesian = viewer.camera.pickEllipsoid(movement.endPosition,scene.globe.ellipsoid);
// if (cartesian) {
// entity.position = cartesian;
// entity.label.show = true;
// entity.label.text =`X: ${cartesian.x.toFixed(2)}` +`\nY: ${cartesian.y.toFixed(2)}` +`\nZ: ${cartesian.z.toFixed(2)}`;
// } else {
// entity.label.show = false;
// }
// }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// var tle="CALSPHERE 1 \n"
var tle = ["CALSPHERE 1", "1 00900U 64063C 24029.76888369 .00000866 00000+0 89909-3 0 9997", "2 00900 90.1943 52.4440 0027342 45.0648 17.5538 13.74747465951867"]
var tle1 = ["UFO 11(USA 174) " ,
"1 28117U 03057A 24243.89424236 - .00000115 00000 + 0 00000 + 0 0 9993",
"2 28117 8.1824 36.5002 0003757 127.4461 212.7769 1.00271176 75873"]
const onSatelliteTrack = (tle,time) => {
// TLE
let tleLine0 = tle[0];
let tleLine1 = tle[1];
let tleLine2 = tle[2];
// TLE解析
let satrec = twoline2satrec(tleLine1, tleLine2);
let timeDla = 2 * Math.PI / satrec.no / 2;
// T1,T2
let startTime = new Date(time[0])
let endTime = new Date(time[1])
let currentTime = new Date(startTime);
let positions = []; // 轨道坐标数组
let i = 0;
while (currentTime <= endTime) {
let positionEci = propagate(satrec, currentTime).position; // ECI坐标
let gmst = gstime(currentTime); // GMST 格林尼治恒星时
let positionGd = eciToGeodetic(positionEci, gmst); // 经纬度坐标
let longitudeDeg = degreesLong(positionGd.longitude); // 经度
let latitudeDeg = degreesLat(positionGd.latitude); // 纬度
positions.push(new Cesium.Cartesian3.fromDegrees(longitudeDeg, latitudeDeg, positionGd.height * 1000));
// positions.push(i * 1, longitudeDeg, latitudeDeg, positionGd.height * 1000); // 将当前卫星坐标放入轨道坐标
i++;
currentTime.setTime(currentTime.getTime() + 1 * 1000); // 60 表示 60s一个点
}
return positions
}
let time = [adjustedStart, stop]
let q = onSatelliteTrack(tle, time)
console.log(q)
let trajectoryPoints = onSatelliteTrack(tle1,time)
// viewer.entities.add({
// polyline: {
// positions: q,
// width: 5,
// material: Cesium.Color.YELLOW
// }
// })
const satellitePositions = new Cesium.SampledPositionProperty();
for (let i = 0; i < trajectoryPoints.length; i++) {
const time = Cesium.JulianDate.addSeconds(viewer.clock.startTime, i * period / trajectoryPoints.length, new Cesium.JulianDate());
satellitePositions.addSample(time, trajectoryPoints[i]);
}
const satelliteEntity = viewer.entities.add({
name: 'satellite',
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: satellitePositions,
orientation: new Cesium.VelocityOrientationProperty(satellitePositions),
point: {
pixelSize: 10,
color: Cesium.Color.WHITE
},
// model: {
// uri: '/src/model/卫星.gltf',
// minimumPixelSize: 50,
// scale: 60.0,
// },
path: {
show: true, // 显示路径
leadTime: 0, // 不显示未来的路径
trailTime: period, // 显示过去60秒的路径
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.YELLOWGREEN
}),
width: 5
}
});
// 设置鼠标事件处理器
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
const cartesian = viewer.camera.pickEllipsoid(movement.endPosition,scene.globe.ellipsoid);
if (cartesian) {
entity.position = cartesian;
entity.label.show = true;
entity.label.text =`X: ${cartesian.x.toFixed(2)}` +`\nY: ${cartesian.y.toFixed(2)}` +`\nZ: ${cartesian.z.toFixed(2)}`;
} else {
entity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
satelliteEntity.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
})
</script>
......
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