JavaScript 30줄로 처음부터 위성 추적기 만들기

이것은 국제 우주정거장의 경로를 보여 주며 속도가 40배 높아졌다.현재 위치를 실시간으로 보려면 시계 바퀴의 왼쪽 상단에 있는 시계 아이콘을 누르십시오

이것은 하나direct link to the app입니다.및 source code on Glitch

1 - 위성의 쌍선 원소 집합 얻기

쌍선 원소 집합이나 TLE는 지구 주위를 운행하는 물체의 운동을 설명하는 데이터 형식이다.그것은 북미항공우주방어사령부(NORAD)가 창설했다.당신은 read more about it and its history here

궤도에 대한 설명에 따라 우리는 궤도가 언제든지 위치할 수 있음을 예측할 수 있다(아래의 두 번째 단계이다)

이것은 대부분의 실시간 위성 추적기가 지도상에서 배달차를 추적하는 것처럼 실시간이 아니라는 것을 의미한다.우주에서 물체를 추적하는 사람들은 일반적으로 최신의 TLE(정기적으로 업데이트)를 받고 물체의 현재 위치를 예측한다. 끊임없이 수신되는 위치의 업데이트에 의존하지 않는다

TLE 는 어디에서 제공됩니까?전 세계 정부 등록처가 하나도 없다.누가 이 위성을 소유하고 이를 감시하든지 간에 전 세계 우주계의 이익을 위해 TLE(스파이 위성이 아니라면)를 갱신하고 발표할 책임이 있다

우리는 Space Track에서 이 TLE를 찾을 수 있다. 이것은 미국 우주사령부가 관리하는 등록표이다

또 다른 출처는 T.S.Kelso 박사가 관리한this list on CeleStrak

로그인할 필요가 없으므로 CelerStrak을 사용합니다.국제 우주정거장의 TLE를 찾으려면 Space Stations 링크를 클릭하십시오

첫 번째는 국제 우주정거장의 TLE:

ISS (ZARYA)             
1 25544U 98067A   21122.75616700  .00027980  00000-0  51432-3 0  9994
2 25544  51.6442 207.4449 0002769 310.1189 193.6568 15.48993527281553

이 숫자들의 의미는listed in table 1 in Dr T.S. Kelso's column이다.그 중 대다수는 위성에 대한 표지부와 메타데이터로 위성이 발사되었을 때와 같다

기상위성, GPS위성, 심지어SpaceX's Starlink constellation의 TLE를 찾을 수 있습니다. 형식이 같습니다

2. 위성 궤도 예측

관심 있는 목표의 TLE를 얻는 방법을 알았으니 다음 단계는 시간적 위치로 전환하는 것입니다

우리는 satellite-js를 사용하여 이 조작을 진행할 것이다

CDN의 라이브러리 포함:

<script src="https://cdnjs.cloudflare.com/ajax/libs/satellite.js/4.0.0/satellite.min.js"></script>

그리고 TLE를 전달, 시간:

const ISS_TLE = 
    `1 25544U 98067A   21122.75616700  .00027980  00000-0  51432-3 0  9994
     2 25544  51.6442 207.4449 0002769 310.1189 193.6568 15.48993527281553`;
// Initialize the satellite record with this TLE
const satrec = satellite.twoline2satrec(
  ISS_TLE.split('\n')[0].trim(), 
  ISS_TLE.split('\n')[1].trim()
);
// Get the position of the satellite at the given date
const date = new Date();
const positionAndVelocity = satellite.propagate(satrec, date);
const gmst = satellite.gstime(date);
const position = satellite.eciToGeodetic(positionAndVelocity.position, gmst);

console.log(position.longitude);// in radians
console.log(position.latitude);// in radians
console.log(position.height);// in km

현재 위성의 현재 위치가 있습니다new Date()

이 위치는 특정 위성 운동 모형을 모의한 결과입니다.이 모델은 SGP4/SDP4라고 불린다.모든 TLE는 이 특정 모델을 가정합니다

이 모델의 정확성을 알고 싶다면 간단한 답은it depends

Accuracy of the two-line element sets is dependent upon a number of factors. These range from the particular sensors used and amount of data collected to the type of orbit and condition of the space environment. Unfortunately, since these factors vary for each element set, so does the accuracy. While NORAD has experimented with methods to incorporate prediction quality into the element sets, none of these methods has yet proved successful.

3. 결과 시각화

이제 우리는 주어진 시간에 위성 위치를 얻을 수 있는 방법이 생겼다.우리는 미래의 시간에 그것의 경로에 애니메이션을 설정할 수 있으며, 이것은 다음 단계에서 완성될 것이다.p>

먼저, CesiumJ 시각화 공간의 단일 점을 어떻게 사용하는지 봅시다

CDN에서 라이브러리를 로드합니다:

<script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

용기 요소 만들기:

<div id="cesiumContainer"></div>

뷰어를 초기화합니다.영패에 접근해야 하는 기능을 사용하지 않기 위해 추가 옵션을 전송합니다:

// Initialize the Cesium viewer.
const viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.TileMapServiceImageryProvider({
    url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
  }),
  baseLayerPicker: false, geocoder: false, homeButton: false, infoBox: false,
  navigationHelpButton: false, sceneModePicker: false
});
viewer.scene.globe.enableLighting = true;

마지막으로 우리는 위성 위치를 공간의 붉은 점으로 가시화할 것이다:

const satellitePoint = viewer.entities.add({
  position: Cesium.Cartesian3.fromRadians(
    position.longitude, position.latitude, position.height * 1000
  ),
  point: { pixelSize: 5, color: Cesium.Color.RED }
});

참조complete source code of this step in simple.html on Glitch

4 - 경로에 대한 애니메이션 설정

경로에 애니메이션을 설정하기 위해서 우리는 앞으로 더 많은 위치에서 샘플링을 할 수 있습니다.CesiumJS는 이 견본들 사이를 시간에 따라 삽입할 수 있는 내장된 방법이 있습니다

이 방면의 설정은 좀 지루하다.You can see the full code on Glitch . 주요 개념은 다음과 같습니다

저희가 만들었습니다SampledPositionProperty.이것은 시간의 추이에 따라 위치를 유지하고 샘플을 삽입하는 대상입니다:

const positionsOverTime = new Cesium.SampledPositionProperty();

우리는 얻고자 하는 견본의 수량을 순환하고 각 견본에 대해 시간 대상을 구성한다. CesiumJS에서 JulianDate와 한 위치라고 부르고 이를 견본으로 추가한다.

for (let i = 0; i < totalSeconds; i+= timestepInSeconds) {
  const time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
  // ...Get position from satellite-js...
  const position = Cesium.Cartesian3.fromRadians(p.longitude, p.latitude, p.height * 1000);
  positionsOverTime.addSample(time, position);
}

마지막으로, 우리는 이positionsOverTime의 대상을 우리의 지점에 전달합니다

const satellitePoint = viewer.entities.add({
  position: positionsOverTime,
  point: { pixelSize: 5, color: Cesium.Color.RED }
});

이 점은 아래 시간선의 이동에 따라 이동합니다.카메라를 이동점에 연결하려면 다음과 같은 조작을 해야 합니다:

viewer.trackedEntity = satellitePoint;

결론

나는 네가 위성 추적기 건조에 관한 지식을 좀 배우는 것을 좋아하길 바란다.TLE의 매개 변수가 도대체 무엇을 의미하는지, 우리가 건드리지 못한 많은 화제들이 있다.얼마나 자주 업데이트됩니까?업데이트 방법

나는 모르겠지만, 나는 이런 데이터가 &에 있다는 것을 발견했다.어디서 얻을 수 있는지 놀랍게도 브라우저에서 자바스크립트로 이 모든 것을 완성할 수 있습니다

다음은 몇 가지 재미있는 생각입니다. 지금 우리는 이렇게 할 수 있습니다:

여러 개의 위성을 상상해 보세요. 마치 별자리 전체처럼.영감은 Celestrak's viewer에서 유래한 것으로 그 목록에 있는 모든 위성을 보여 준다.아마도 시간의 추이에 따라 체인 위성의 수량이 어떻게 증가했는지 상상할 수 있을 것이다

또는 거리의 장면을 시뮬레이션합니다.아마도 건축물/고도 데이터를 추가하여 도시에서 위성을 볼 수 있는 가장 좋은 위치를 찾을 수 있을 것이다

street-level.html의 작은 고장 소스 코드에 원형이 있습니다.데모: https://satellite-viewer.glitch.me/street-level.html

별도 참조James Darpinian's "See a satellite tonight" 응용 프로그램, 이 응용 프로그램은 CesiumJS와 구글의 거리 풍경을 결합시켰습니다

원점이 아닌 적당한 비율의 3D 모형을 사용하고 위성이 우주에서 서로의 거리를 진정으로 이해하는 것도 재미있을 수 있습니다