JavaScript로 국제 우주 정거장 위치 추적

13506 단어 javascripttutorialwebdev


안녕하세요 여러분 👋



안녕 친구들, 여기는 SnowBit입니다. 저는 열정적이고 독학으로 성공한 젊은 개발자이며 성공적인 개발자가 되려는 의도를 가지고 있습니다.

오늘은 즐거운 나눔이 될 놀라운 주제를 가지고 찾아왔습니다🛰

ISS는 무엇입니까?



국제우주정거장은 지구 저궤도에 있는 모듈식 우주정거장입니다. NASA, Roscosmos, JAXA, ESA 및 CSA의 5개 우주 기관이 참여하는 다국적 공동 프로젝트입니다. 우주정거장의 소유권과 사용은 정부 간 조약과 협정에 의해 확립됩니다.

소스Wikipedia

코드를 살펴보겠습니다 😎



1단계 - 지도


  • Mapbox으로 이동하여 계정 생성
  • 공개 토큰 복사 및 저장


    • 2단계 - Mapbox 가져오기




    <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />


    이것을 <head> 파일의 .html 태그에 붙여넣으십시오.

    3단계 - 지도 설정



    자바스크립트 파일에서.

    mapboxgl.accessToken = 'YOUR_PUBLIC_TOKEN';
    const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v10',
    center: [-74.5, 40],
    zoom: 0 
    });


    지도 표시

    const ISSLoc = (lng, lat) => {

    const geojson = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [lng, lat]
            },
            properties: {
                title: 'Mapbox',
                description: 'San Francisco, California'
              }
          },
        ]
      };
      for (const feature of geojson.features) {
        const el = document.getElementById('marker');

        new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);
      }
      new mapboxgl.Marker(el)
      .setLngLat(feature.geometry.coordinates)
      .setPopup(
        new mapboxgl.Popup({ offset: 25 }) // add popups
          .setHTML(
            `<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`
          )
      )
      .addTo(map);
      new mapboxgl.Marker(el)
  .setLngLat(feature.geometry.coordinates)
  .setPopup(
    new mapboxgl.Popup({ offset: 25 }) // add popups
      .setHTML(
        `<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`
      )
  )
  .addTo(map);
}


    4단계 - 팝업 스타일 지정



    CSS 파일에서.

    .marker {
    background-image: url('sat.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}
.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}


    이미지 파일: sat.png

    5단계 - ISS 위치 가져오기




    const getISSLoc = () => {
    fetch('https://api.wheretheiss.at/v1/satellites/25544')
    .then(response => response.json())
    .then(data => {
        ISSLoc(data.longitude, data.latitude)
        long = data.longitude
        latt = data.latitude
    })
}


    매초 ISS 위치 업데이트

    const updateISSLoc = () => {
    setInterval(() => {
        getISSLoc()
    }, 1000  )
}
updateISSLoc()


    그리고 해냈어 👏

    전체 소스 코드를 확인하십시오: https://github.com/codewithsnowbit/ISS-Live-Location


    읽어주셔서 감사합니다. 좋은 하루 보내세요!
    당신의 감사는 나의 동기입니다 😊
  • Twitter에서 나를 팔로우하세요 -
  • YouTube에서 저를 구독하세요 -
    • React의 체크박스 애니메이션
    JavaScript에 있는 다른 데이터 유형은 무엇입니까?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage