Skip to content

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

11

parent c649dee2
Showing with 1425 additions and 157 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/nasa.vue
......@@ -26,68 +26,307 @@ onMounted(() => {
viewer.clock.multiplier = 1;
viewer.timeline.zoomTo(adjustedStart, stop);
const scene = viewer.scene;
let handler;
// 定义轨道的相关参数
const inclination = Cesium.Math.toRadians(28.5); // 轨道倾角（以弧度表示）
const inclination = Cesium.Math.toRadians(0); // 轨道倾角（以弧度表示）
const semiMajorAxis = 38440000; // 半长轴（米），大约为月球到地球的平均距离
const period = 360; // 轨道周期（秒）
const numberOfPoints = 1000; // 轨道上的点数
const numberOfPoints = 100; // 轨道上的点数
// function animatedParabola(twoPoints) {
// const startPoint = [twoPoints[0], twoPoints[1], twoPoints[2]]; // 起点的经度、纬度、高度
// const step = 10; // 自定义线段的数量，越多则越平滑
// const endPoint1 = [twoPoints[3], twoPoints[4], twoPoints[5]]; // 终点的经度、纬度、高度
// const endPoint = [startPoint[0] + (endPoint1[0] - startPoint[0]) * 2, startPoint[1] + (endPoint1[1] - startPoint[1]) * 2, startPoint[2] + (endPoint1[2] - startPoint[2]) * 2]
// const dLon = (endPoint[0] - startPoint[0]) / step; // 经度差值
// const dLat = (endPoint[1] - startPoint[1]) / step; // 纬度差值
// const heigh = endPoint1[2]
// const x2 = 10000 * Math.sqrt(dLon * dLon + dLat * dLat); // 小数点扩大10000倍，提高精确度
// const a = heigh / (x2 * x2); // 抛物线函数中的a
// let pointsArray = []; // 存储所有点的数组
// function y(x, height) { // 模拟抛物线函数，求高度H
// return Math.floor(height - a * x * x);
// }
// for (let i = 0; i <= step / 2; i++) { // 逐“帧”计算点
// const lon = startPoint[0] + dLon * i; // 更新经度
// const lat = startPoint[1] + dLat * i; // 更新纬度
// const x = x2 * (2 * i / step - 1); // 求抛物线函数x
// const alt = y(x, heigh); // 求高度
// pointsArray.push(Cesium.Cartesian3.fromDegrees(lon, lat, alt));
// }
// return pointsArray;
// }
function animatedParabola(twoPoints) {
// 解构赋值获取起点和终点的经纬度和高度
const [startLongitude, startLatitude, startHeight, endLongitude, endLatitude, endHeight] = twoPoints;
const startPoint = [startLongitude, startLatitude, startHeight]; // 起点的经度、纬度、高度
const step = 10; // 自定义线段的数量，越多则越平滑
const endPoint1 = [endLongitude, endLatitude, endHeight]; // 终点的经度、纬度、高度
const endPoint = [startPoint[0] + (endPoint1[0] - startPoint[0]) * 2, startPoint[1] + (endPoint1[1] - startPoint[1]) * 2, startPoint[2] + (endPoint1[2] - startPoint[2]) * 2];
const dLon = (endPoint[0] - startPoint[0]) / step; // 经度差值
const dLat = (endPoint[1] - startPoint[1]) / step; // 纬度差值
const heightDiff = endHeight - startHeight;
const x2 = 10000 * Math.sqrt(dLon * dLon + dLat * dLat); // 小数点扩大10000倍，提高精确度
const a = heightDiff / (x2 * x2); // 抛物线函数中的a
let pointsArray = []; // 存储所有点的数组
function y(x, heightDiff) { // 模拟抛物线函数，求高度H
return Math.floor(startHeight + heightDiff - a * x * x);
}
for (let i = 0; i <= step / 2; i++) { // 逐“帧”计算点
const lon = startPoint[0] + dLon * i; // 更新经度
const lat = startPoint[1] + dLat * i; // 更新纬度
const x = x2 * (2 * i / step - 1); // 求抛物线函数x
const alt = y(x, heightDiff); // 求高度
// 创建月球轨道
function createMoonOrbit(inclination, semiMajorAxis, period, numberOfPoints) {
const positions = [];
pointsArray.push(Cesium.Cartesian3.fromDegrees(lon, lat, alt));
}
return pointsArray;
}
let trajectoryPoints = animatedParabola([-80.6045, 28.6079, 0, -70.60, 28, 402336]);
function calculateStraightLine(point1, point2) {
// 创建地球椭球体对象
const ellipsoid = Cesium.Ellipsoid.WGS84;
// 定义两点的笛卡尔坐标
const cartographic1 = Cesium.Cartographic.fromDegrees(point1.longitude, point1.latitude, point1.height);
const cartographic2 = Cesium.Cartographic.fromDegrees(point2.longitude, point2.latitude, point2.height);
// 获取两点的地球中心笛卡尔坐标
const cartesian1 = ellipsoid.cartographicToCartesian(cartographic1);
const cartesian2 = ellipsoid.cartographicToCartesian(cartographic2);
// 计算两点之间的向量
const direction = Cesium.Cartesian3.subtract(cartesian2, cartesian1, new Cesium.Cartesian3());
const directionNormalized = Cesium.Cartesian3.normalize(direction, new Cesium.Cartesian3());
// 计算两点之间的距离
const distance = Cesium.Cartesian3.magnitude(direction);
// 生成10个点
const numberOfPoints = 10;
const points = [];
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);
const t = i / numberOfPoints;
const interpolatedPoint = Cesium.Cartesian3.add(cartesian1, Cesium.Cartesian3.multiplyByScalar(directionNormalized, t * distance, new Cesium.Cartesian3()), new Cesium.Cartesian3());
points.push(interpolatedPoint);
}
return positions;
return points;
}
function twopointPositions(point1, point2) {
const numberOfPoints = point2.longitude-point1.longitude;
const points = [];
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 t = i / numberOfPoints;
const longitude = point1.longitude + t * (point2.longitude - point1.longitude);
const latitude = point1.latitude + t * (point2.latitude - point1.latitude);
const height = point1.height + t * (point2.height - point1.height);
// 使用Cesium.Cartesian3.fromDegrees将经纬度和高度转换为笛卡尔坐标
const cartesianPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
// 添加笛卡尔坐标
points.push(cartesianPosition);
}
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]);
return points;
}
// function twopointPositions(point1, point2) {
// // 将Cartesian3坐标转换为Cartographic坐标
// const cartographic1 = Cesium.Cartographic.fromCartesian(point1);
// const cartographic2 = Cesium.Cartographic.fromCartesian(point2);
// // 提取经纬度和高度
// const longitude1 = Cesium.Math.toDegrees(cartographic1.longitude);
// const latitude1 = Cesium.Math.toDegrees(cartographic1.latitude);
// const height1 = cartographic1.height;
// const longitude2 = Cesium.Math.toDegrees(cartographic2.longitude);
// const latitude2 = Cesium.Math.toDegrees(cartographic2.latitude);
// const height2 = cartographic2.height;
// // 计算要插入的点的数量
// // const numberOfPoints = Math.abs(longitude2 - longitude1);
// const numberOfPoints = longitude2 - longitude1;// 注意这里使用了绝对值
// // 生成点
// const points = [];
// for (let i = 0; i <= numberOfPoints; i++) {
// const t = i / numberOfPoints;
// const longitude = longitude1 + t * (longitude2 - longitude1);
// const latitude = latitude1 + t * (latitude2 - latitude1);
// const height = height1 + t * (height2 - height1);
// // 使用Cesium.Cartesian3.fromDegrees将经纬度和高度转换为笛卡尔坐标
// const cartesianPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
// // 添加笛卡尔坐标
// points.push(cartesianPosition);
// }
// return points;
// }
const point1 = {
longitude: -70.6,
latitude: 28,
height: 402336.0
};
const point2 = {
longitude: 100.0,
latitude: 14.0,
height: 1791000.0
};
const point3 = {
longitude: 250,
latitude: 0,
height: 801000.0
}
const point4 = {
longitude: 340,
latitude: 0,
height: 1000000.0
}
const point5 = {
longitude: 360,
latitude: 0,
height: 1200000.0
}
const point6 = {
longitude: 450,
latitude: 0,
height: 3000000.0
}
const point61 = {
longitude: 460,
latitude: 0,
height: 3000000.0
}
const point7 = {
longitude: 600,
latitude: 20,
height: 0.0
}
const ellipsePositions = calculateEllipseTrack(
[100, 0], // 中心点的经纬度
15000000, // 半长轴
20000000, // 半短轴
300, // 椭圆上点的数量
[94.5, 0, 16590000] // 新中心点的经纬度和高度
);
const ellipsePositions1 = ellipsePositions.slice(78, 231)
const raoyuePositions = calculateEllipseTrack(
[100, 0],
4000000,
3900000,
100,
[94.5, 0, 32690000]
);
const raoyuePositions1 = raoyuePositions.slice(0, 24).reverse()
raoyuePositions1.push(...raoyuePositions.slice(75, 100).reverse())
const huanraoPositions = calculateEllipseTrack(
[100, 0],
10000000,
7000000,
100,
[95, 0, 35800000]
);
const huanraoPositions1 = huanraoPositions.slice(0, 77).reverse()
huanraoPositions1.push(...huanraoPositions.slice(77, 100).reverse())
const fanhuiPositions = calculateEllipseTrack(
[100, 0],
4000000,
3900000,
100,
[94.5, 0, 32690000]
);
const fanhuiPositions1 = fanhuiPositions.slice(26, 77).reverse()
const fanhangPositions = calculateEllipseTrack(
[100, 0], // 中心点的经纬度
15000000, // 半长轴
20000000, // 半短轴
300, // 椭圆上点的数量
[94.5, 0, 16590000] // 新中心点的经纬度和高度
);
const fanhangPositions1 = fanhangPositions.slice(0, 78).reverse()
fanhangPositions1.push(...fanhangPositions.slice(231, 300).reverse())
trajectoryPoints.push(...twopointPositions(point1, point2))
trajectoryPoints.push(...twopointPositions(point2, point3))
trajectoryPoints.push(...twopointPositions(point3, point4))
trajectoryPoints.push(...twopointPositions(point4, point5))
trajectoryPoints.push(...twopointPositions(point5, point6))
// trajectoryPoints.push(...calculateStraightLine(point6, point7))
trajectoryPoints.push(...animatedParabola([90, 0, 3000000, 98, 0, 3000000]))
trajectoryPoints.push(...ellipsePositions1.reverse())
trajectoryPoints.push(...raoyuePositions1)
trajectoryPoints.push(...huanraoPositions1)
trajectoryPoints.push(...fanhuiPositions1)
trajectoryPoints.push(...fanhangPositions1)
trajectoryPoints.push(...twopointPositions(point61, point7))
// const line=viewer.entities.add({
// polyline: {
// positions: trajectoryPoints,
// material: Cesium.Color.LIGHTYELLOW
// }
// })
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 moonEntity = viewer.entities.add({
name: 'Moon',
const satelliteEntity = viewer.entities.add({
name: 'satellite',
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: orbitPosition,
orientation: new Cesium.VelocityOrientationProperty(orbitPosition),
position: satellitePositions,
orientation: new Cesium.VelocityOrientationProperty(satellitePositions),
// point: {
// pixelSize: 10,
// color: Cesium.Color.WHITE
// },
model: {
uri: '/src/model/moon1.glb',
minimumPixelSize: 100,
scale: 200.0,
uri: '/src/model/卫星.gltf',
minimumPixelSize: 50,
scale: 60.0,
},
path: {
show: true, // 显示路径
leadTime: 0, // 不显示未来的路径
trailTime: 360, // 显示过去60秒的路径
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.PINK
color: Cesium.Color.YELLOWGREEN
}),
width: 5
}
});
moonEntity.position.setInterpolationOptions({
satelliteEntity.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
......@@ -99,79 +338,76 @@ onMounted(() => {
// 获取当前时间的笛卡尔坐标
function getCartesianPositionAtTime(julianDate) {
const result = new Cesium.Cartesian3();
orbitPosition.getValue(julianDate, result);
return result;
}
console.log(orbitPosition)
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);
for (let i = 0; i <= number; i++) {
const angle = (i / number) * 360.0;
const radians = Cesium.Math.toRadians(angle);
const x = moonEllipsoid.radii.x * Math.cos(radians);
const y = moonEllipsoid.radii.y * Math.sin(radians);
const z = 0;
const moon = Cesium.Matrix4.multiplyByPoint(localToFixedFrameMatrix, new Cesium.Cartesian3(x, y, z), new Cesium.Cartesian3());
positions.push(moon);
}
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
// }),
// }
// });
// }
// 创建代表卫星的实体
const satelliteEntity = viewer.entities.add({
position: new Cesium.CallbackProperty(function (time, result) {
const currentPosition = getCartesianPositionAtTime(time);
moonEquatorPositions = computeMoonPosition(numberOfPoints, currentPosition);
const seconds = Cesium.JulianDate.secondsDifference(time, viewer.clock.startTime);
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,
},
});
function calculateEllipseTrack(centerDegrees, semiMajorAxis, semiMinorAxis, numberOfPoints, centerOffsetDegrees) {
// 将中心点从度数转换为Cartesian3
var center = Cesium.Cartesian3.fromDegrees(centerDegrees[0], centerDegrees[1], 0);
// 创建椭圆轨道上的点
var positions = [];
for (var i = 0; i <= numberOfPoints; i++) {
var angle = 2 * Cesium.Math.PI * i / numberOfPoints;
var x = semiMajorAxis * Math.cos(angle);
var y = semiMinorAxis * Math.sin(angle);
// 将局部坐标转换为WGS84坐标
var localPosition = Cesium.Cartesian3.add(center,
Cesium.Cartesian3.fromElements(x, y, 0),
new Cesium.Cartesian3());
// 将Cartographic坐标转换为笛卡尔坐标
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(localPosition);
// 确保高度有效
if (isNaN(cartographic.height)) {
console.error('Invalid height at angle:', angle);
continue;
}
// 将Cartographic坐标转换为笛卡尔坐标
var cartesianPosition = viewer.scene.globe.ellipsoid.cartographicToCartesian(cartographic);
// 添加笛卡尔坐标
positions.push(cartesianPosition);
}
// 闭合路径
// 将椭圆轨道移动到新的中心点
var center2 = Cesium.Cartesian3.fromDegrees(centerOffsetDegrees[0], centerOffsetDegrees[1], centerOffsetDegrees[2]);
// 将椭圆上的所有点移动到新的中心点
for (let i = 0; i <= numberOfPoints; i++) {
positions[i].x = positions[i].x + center2.x
positions[i].y = positions[i].y + center2.y
positions[i].z = positions[i].z + center2.z
// positions1.push(satellite1)
}
return positions;
}
var moon = viewer.entities.add({
name: 'moon',
position: Cesium.Cartesian3.fromDegrees(95, 0, 39000000),
ellipsoid: {
radii: new Cesium.Cartesian3(2400000,2400000, 2400000),
// 如果有纹理，使用纹理
material: new Cesium.ImageMaterialProperty({
image: "/src/image/moon1.jpg"
}),
}
});
})
......
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/shuizhunmian.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<div id="toolbar">
<table>
<tbody>
<tr>
<td class="header">Elevation</td>
</tr>
<tr>
<td id="minHeight"><span data-bind="text: minHeight"></span>m</td>
<td><canvas id="colorRamp"></canvas></td>
<td><span data-bind="text: maxHeight"></span>m</td>
</tr>
<tr>
<td class="header">Options</td>
</tr>
<tr>
<td>Exaggeration</td>
<td>
<input type="range" min="1" max="5" step="0.1" data-bind="value: exaggeration, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: exaggeration">
</td>
</tr>
</tbody>
</table>
</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", {
timeline: false,
animation: false,
// terrainProvider: await Cesium.createWorldBathymetryAsync({
// requestVertexNormals: true,
// }),
})
viewer.baseLayerPicker.viewModel.selectedImagery =
viewer.baseLayerPicker.viewModel.imageryProviderViewModels[11];
const scene = viewer.scene;
// prevent aliasing from countour lines
scene.msaaSamples = 4;
const globe = scene.globe;
globe.enableLighting = true;
globe.maximumScreenSpaceError = 1.0; // Load higher resolution tiles for better seafloor shading
// Sandcastle.addToggleButton("Lighting enabled", true, function (
// checked
// ) {
// globe.enableLighting = checked;
// });
scene.light = new Cesium.DirectionalLight({
direction: new Cesium.Cartesian3(1, 0, 0), // Updated every frame
});
const camera = scene.camera;
const cameraMaxHeight = globe.ellipsoid.maximumRadius * 2;
const scratchNormal = new Cesium.Cartesian3();
scene.preRender.addEventListener(function (scene, time) {
const surfaceNormal = globe.ellipsoid.geodeticSurfaceNormal(
camera.positionWC,
scratchNormal
);
const negativeNormal = Cesium.Cartesian3.negate(
surfaceNormal,
surfaceNormal
);
scene.light.direction = Cesium.Cartesian3.normalize(
Cesium.Cartesian3.add(
negativeNormal,
camera.rightWC,
surfaceNormal
),
scene.light.direction
);
const zoomMagnitude =
Cesium.Cartesian3.magnitude(camera.positionWC) / cameraMaxHeight;
updateGlobeMaterialUniforms(zoomMagnitude);
});
// Sandcastle.addToggleButton("Fog enabled", true, (checked) => {
// scene.fog.enabled = checked;
// globe.showGroundAtmosphere = checked;
// });
// Globe materials
let showContourLines = true;
let showElevationColorRamp = true;
let invertContourLines = true;
const minHeight = -10000.0;
const seaLevel = 0.0;
const maxHeight = 2000.0;
const countourLineSpacing = 500.0;
const range = maxHeight - minHeight;
const d = (height) => (height - minHeight) / range;
function getColorRamp() {
// const ramp = document.getElementById("colorRamp");
const ramp = document.getElementById("colorRamp");
ramp.width = 100;
ramp.height = 15;
const ctx = ramp.getContext("2d");
const grd = ctx.createLinearGradient(0, 0, 100, 0);
grd.addColorStop(d(maxHeight), "#B79E6C");
grd.addColorStop(d(100.0), "#FBFFEE");
grd.addColorStop(d(0.0), "#F9FCCA");
grd.addColorStop(d(-500.0), "#BDE7AD");
grd.addColorStop(d(-1000.0), "#81D2A3");
grd.addColorStop(d(-1500.0), "#5AB7A4");
grd.addColorStop(d(-2000.0), "#4C9AA0");
grd.addColorStop(d(-2500.0), "#437D9A");
grd.addColorStop(d(-4000.0), "#3E6194");
grd.addColorStop(d(-5000.0), "#424380");
grd.addColorStop(d(-8000.0), "#392D52");
grd.addColorStop(d(minHeight), "#291C2F");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, ramp.width, ramp.height);
return ramp;
}
// function getColorRamp(elevationRamp) {
// var ramp = document.createElement('canvas');
// ramp.width = 1;
// ramp.height = 100;
// var ctx = ramp.getContext('2d');
// var values = elevationRamp;
// var grd = ctx.createLinearGradient(0, 0, 0, 100);
// grd.addColorStop(values[0], '#000000'); //black
// grd.addColorStop(values[1], '#2747E0'); //blue
// grd.addColorStop(values[2], '#D33B7D'); //pink
// grd.addColorStop(values[3], '#D33038'); //red
// grd.addColorStop(values[4], '#FF9742'); //orange
// grd.addColorStop(values[5], '#ffd700'); //yellow
// grd.addColorStop(values[6], '#ffffff'); //white
// ctx.fillStyle = grd;
// ctx.fillRect(0, 0, 1, 100);
// return ramp;
// }
function getElevationContourMaterial() {
return new Cesium.Material({
fabric: {
type: "ElevationColorContour",
materials: {
contourMaterial: {
type: "ElevationContour",
},
elevationRampMaterial: {
type: "ElevationRamp",
},
},
components: {
diffuse:
"(1.0 - contourMaterial.alpha) * elevationRampMaterial.diffuse + contourMaterial.alpha * contourMaterial.diffuse",
alpha:
"max(contourMaterial.alpha, elevationRampMaterial.alpha)",
},
},
translucent: false,
});
}
function updateGlobeMaterialUniforms(zoomMagnitude) {
const material = globe.material;
if (!Cesium.defined(material)) {
return;
}
const spacing = 5.0 * Math.pow(10, Math.floor(4 * zoomMagnitude));
if (showContourLines) {
const uniforms = showElevationColorRamp
? material.materials.contourMaterial.uniforms
: material.uniforms;
uniforms.spacing = spacing * scene.verticalExaggeration;
}
if (showElevationColorRamp) {
const uniforms = showContourLines
? material.materials.elevationRampMaterial.uniforms
: material.uniforms;
uniforms.spacing = spacing * scene.verticalExaggeration;
uniforms.minimumHeight = minHeight * scene.verticalExaggeration;
uniforms.maximumHeight = maxHeight * scene.verticalExaggeration;
}
}
function updateGlobeMaterial() {
let material;
if (showContourLines) {
if (showElevationColorRamp) {
material = getElevationContourMaterial();
let shadingUniforms =
material.materials.elevationRampMaterial.uniforms;
shadingUniforms.image = getColorRamp();
shadingUniforms.minimumHeight =
minHeight * scene.verticalExaggeration;
shadingUniforms.maximumHeight =
maxHeight * scene.verticalExaggeration;
shadingUniforms = material.materials.contourMaterial.uniforms;
shadingUniforms.width = 1.0;
shadingUniforms.spacing =
countourLineSpacing * scene.verticalExaggeration;
shadingUniforms.color = invertContourLines
? Cesium.Color.WHITE.withAlpha(0.5)
: Cesium.Color.BLACK.withAlpha(0.5);
globe.material = material;
return;
}
material = Cesium.Material.fromType("ElevationContour");
const shadingUniforms = material.uniforms;
shadingUniforms.width = 1.0;
shadingUniforms.spacing =
countourLineSpacing * scene.verticalExaggeration;
shadingUniforms.color = invertContourLines
? Cesium.Color.WHITE
: Cesium.Color.BLACK;
globe.material = material;
return;
}
if (showElevationColorRamp) {
material = Cesium.Material.fromType("ElevationRamp");
const shadingUniforms = material.uniforms;
shadingUniforms.image = getColorRamp();
shadingUniforms.minimumHeight =
minHeight * scene.verticalExaggeration;
shadingUniforms.maximumHeight =
maxHeight * scene.verticalExaggeration;
globe.material = material;
return;
}
globe.material = material;
}
updateGlobeMaterial();
// Sandcastle.addToggleButton(
// "Color ramp enabled",
// showElevationColorRamp,
// function (checked) {
// showElevationColorRamp = checked;
// updateGlobeMaterial();
// }
// );
// Sandcastle.addToggleButton(
// "Contour lines enabled",
// showContourLines,
// function (checked) {
// showContourLines = checked;
// updateGlobeMaterial();
// }
// );
// Sandcastle.addToggleButton(
// "Invert contour line color",
// invertContourLines,
// function (checked) {
// invertContourLines = checked;
// updateGlobeMaterial();
// }
// );
// Vertical exaggeration
const viewModel = {
exaggeration: scene.verticalExaggeration,
minHeight: minHeight,
maxHeight: maxHeight,
};
function updateExaggeration() {
scene.verticalExaggeration = Number(viewModel.exaggeration);
}
Cesium.knockout.track(viewModel);
const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
for (const name in viewModel) {
if (viewModel.hasOwnProperty(name)) {
Cesium.knockout
.getObservable(viewModel, name)
.subscribe(updateExaggeration);
}
}
scene.camera.setView({
destination: new Cesium.Cartesian3(
-3877002.181627189,
5147948.256341475,
864384.3423478723
),
orientation: new Cesium.HeadingPitchRoll(
5.914830423853524,
-0.7139104486007932,
0.00017507632714419685
),
});
})
</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