Các sự kiện phát hiện tàu được xem trong giao diện web Skylight bao gồm các chỉ báo trực quan về tỷ lệ và hướng, như thể hiện trong ảnh chụp màn hình bên dưới.

1. Hướng la bàn (tính bằng độ từ phía bắc thực) có thể được nhìn thấy ở phía trên bên trái của chip hình ảnh
2. Thang đo (tính bằng km) có thể được nhìn thấy ở phía dưới bên trái

Siêu dữ liệu liên quan đến hướng và tỷ lệ của chip hình ảnh cũng có sẵn thông qua API Skylight bằng cách sử dụng điểm cuối sự kiện.  

Yêu cầu API

Yêu cầu đến điểm cuối sự kiện sẽ trả về một đối tượng Sự kiện, có thể tùy chọn bao gồm Chi tiết sự kiện cho mỗi bản ghi trong phản hồi. Trong số các trường có thể được bao gồm trong Chi tiết sự kiện là:

1. meters_per_pixel (tỷ lệ hình ảnh)
2. định hướng (hướng la bàn)

Dưới đây là một ví dụ yêu cầu API bao gồm hai trường đó:

{query:
   events(eventTypes: [viirs], pageSize: 1, startTime: "2025-01-12T00:00:00Z")
   {
       items
       {
           event_id
           event_details {
               data_source
               meters_per_pixel
               orientation
           }
       }
   }
}

Phản hồi API

Phản hồi cho yêu cầu hiển thị trong phần trước trông như thế này:

{
   "data": {
       "query": {
           "items": [
               {
                   "event_id": "VNP02DNB_NRT.A2025012.0000.002.2025012021107_-33.99_25.71805",
                   "event_details": {
                       "data_source": "nasa",
                       "meters_per_pixel": 86,
                       "orientation": 351
                   }
               }
           ]
       }
   }
}

Trong ví dụ trên, định hướng là 351 độ từ phía bắc, biểu thị hướng tây bắc (giá trị định hướng bằng 0 biểu thị hướng bắc thực sự).

Hiển thị giao diện người dùng

Sử dụng dữ liệu meters_per_pixel và định hướng có trong phản hồi API, bạn có thể tạo màn hình định hướng tỷ lệ và la bàn của riêng mình, tương tự như cách sử dụng trong giao diện web Skylight (như được hiển thị ở đầu bài viết này).

Định hướng

Bạn có thể sử dụng thuộc tính xoay CSS để kiểm soát cách định hướng hiển thị, như trong ví dụ này:

       .rotate-180 {
       transform: rotate(180deg);
     }

Trong mã giao diện được liên kết, thẻ img có liên quan có thể được hiển thị như trong ví dụ sau:

               <img
                src={directionImg}
                style={{
                  transform: `rotate(${eventDetails.orientation}deg)`,
                }}
                alt="compass"
                className="compass"
              />