Analisis Spasio-Temporal Sederhana

#BelajarGEE14: Variasi visualisasi untuk mengetahui perubahan spasial melalui data multi waktu

6 min readMar 5, 2024

Halo semuanya,

Analisis informasi spasial memudahkan untuk memahami sebuah fenomena, kita tentu sudah paham tentang premis itu. Namun, bagaimana jika kita tambahkan satu dimensi lagi yaitu waktu? Analisis yang melibatkan dimensi ruang dan waktu disebut dengan spatio-temporal.

Sebetulnya ini tidak jauh-jauh dari change detection, time series analysis untuk deteksi pattern, forecasting atau prediction, serta spatio-temporal interpolation dan extrapolation. Dari sekian jenis tersebut, pasti erat kaitannya dengan T0 dan T1 atau kondisi sebelum hingga sesudah [1].

Dimensi waktu telah ditambahkan ke dalam dimensi ruang, akibatnya data yang dihasilkan jadi lebih kompleks. Oleh karena itu salah satu untuk mempermudah analisis data adalah membuat visualisasinya menjadi lebih menarik. Google Earth Engine (GEE) punya library yang memungkinkan kita untuk melakukan analisis spatio-temporal menggunakan split panel. Meskipun sederhana, tapi ini menarik karena tampilan datanya menjadi lebih interaktif.

1. Load image

Saya gunakan data citra PlanetScope resolusi spasial 3 meter dengan dua waktu akuisisi, yakni 5 Januari 2020 (unduh disini) dan 12 November 2023 (unduh disini). Fenomena yang akan diidentifikasi adalah erupsi di stratovolcano bernama Whakaari di Selandia Baru pada akhir 2019.

var vis1 = { min: 0, max: 1500, bands: [ 'b8', 'b6', 'b4' ] };:
(a) Variabel vis1 digunakan untuk menentukan parameter visualisasi untuk citra PlanetScope pada tanggal 12 November 2023.
(b) min: 0 dan max: 1500 menentukan rentang nilai piksel yang akan ditampilkan.
(c)bands: [ 'b8', 'b6', 'b4' ] menentukan urutan band yang akan ditampilkan, yang dalam hal ini adalah inframerah dekat (NIR), merah, dan hijau.
var vis2 = { min: 0, max: 1500, bands: [ 'b4', 'b3', 'b2' ] };:
(a) Variabel vis2 digunakan untuk menentukan parameter visualisasi untuk citra PlanetScope pada tanggal 5 Januari 2020.
(b) Seperti sebelumnya, min: 0 dan max: 1500 menentukan rentang nilai piksel yang akan ditampilkan. Namun, dalam hal ini, urutan band yang ditampilkan adalah merah, hijau, dan biru.
Map.addLayer(nov1523, vis1, '12 November 2023'): Menambahkan layer citra PlanetScope pada tanggal 12 November 2023 ke peta dengan parameter visualisasi vis1. Judul layer ditetapkan sebagai 12 November 2023.
Map.addLayer(jan0520, vis2, '5 January 2020');: Menambahkan layer citra PlanetScope pada tanggal 5 Januari 2020 ke peta dengan parameter visualisasi vis2. Judul layer ditetapkan sebagai ‘5 January 2020’.
Map.setCenter(177.184882, -37.521775, 15);: Mengatur pusat peta pada koordinat geografis (177.184882, -37.521775) dengan tingkat zoom sebesar 15.

// Planetscope image true color visualization
var vis1 = { min: 0, max: 1500, bands: [ 'b8', 'b6', 'b4' ] };
var vis2 = { min: 0, max: 1500, bands: [ 'b4', 'b3', 'b2' ] };

// Show the image
Map.addLayer(nov1523, vis1, '12 November 2023');
Map.addLayer(jan0520, vis2, '5 January 2020');

Map.setCenter(177.184882, -37.521775, 15);

2. Mengatur posisi layer

var leftMap = ui.Map(): Variabel leftMap digunakan untuk menentukan objek peta yang akan ditempatkan di sebelah kiri.
var rightMap = ui.Map(): Variabel rightMap digunakan untuk menentukan objek peta yang akan ditempatkan di sebelah kanan.
var pscope2023 = ui.Map.Layer(nov1523, vis1): Variabel pscope2023 digunakan untuk menentukan layer citra PlanetScope pada tahun 2023 dengan parameter visualisasi vis1.
var pscope2020 = ui.Map.Layer(jan0520, vis2): Variabel pscope2020 digunakan untuk menentukan layer citra PlanetScope pada tahun 2020 dengan parameter visualisasi vis2.
var pscope2023_layer = rightMap.layers(): Variabel pscope2023_layer digunakan untuk mengakses lapisan (layers) pada objek peta rightMap.
var pscope2020_layer = leftMap.layers(): Variabel pscope2020_layer digunakan untuk mengakses lapisan (layers) pada objek peta leftMap.
pscope2023_layer.add(pscope2023): Menambahkan layer citra PlanetScope tahun 2023 ke objek peta rightMap.
pscope2020_layer.add(pscope2020): Menambahkan layer citra PlanetScope tahun 2020 ke objek peta leftMap.

//Layer Position
var leftMap = ui.Map();
var rightMap = ui.Map();

var pscope2023 = ui.Map.Layer(nov1523, vis1);
var pscope2020 = ui.Map.Layer(jan0520, vis2);

var pscope2023_layer = rightMap.layers();
var pscope2020_layer = leftMap.layers();

pscope2023_layer.add(pscope2023);
pscope2020_layer.add(pscope2020);

Mengatur posisi dua layer ke panel kiri dan kanan

3. Membuat label

label_2020: Ini adalah variabel yang menyimpan label dengan teks 5 January 2020. Label ini akan ditampilkan pada peta kiri.
label_2020.style().set({...}): Ini adalah fungsi untuk mengatur gaya atau penampilan label. Posisinya diatur menjadi 'bottom-left' (di bagian bawah kiri peta) dan teksnya diatur menjadi bold.
label_2023: Ini adalah variabel yang menyimpan label dengan teks 12 November 2023. Label ini akan ditampilkan pada peta sebelah kanan.
label_2023.style().set({...}): Ini adalah fungsi untuk mengatur gaya atau penampilan label. Posisinya diatur menjadi 'bottom-right' (di bagian bawah kanan peta) dan teksnya diatur menjadi bold.

//Label
var label_2020 = ui.Label('5 January 2020');
label_2020.style().set({
  position: 'bottom-left',
  fontWeight: 'bold' // Setting the font weight to bold
});
var label_2023 = ui.Label('12 November 2023');
label_2023.style().set({
  position: 'bottom-right',
  fontWeight: 'bold' // Setting the font weight to bold
});

leftMap.add(label_2020)
rightMap.add(label_2023)

Menambahkan label pada panel kiri dan kanan

4. Menampilkan legenda

splitPanel: Ini adalah variabel yang menyimpan panel split (pembagi) yang menampilkan dua peta, yaitu leftMap dan rightMap. Orientasinya diatur menjadi horizontal dan efek "wipe" diaktifkan.
ui.root.clear(): Ini adalah fungsi untuk menghapus semua elemen yang ada di root panel.
ui.root.add(splitPanel): Ini adalah fungsi untuk menambahkan splitPanel ke root panel, sehingga splitPanel akan ditampilkan di antarmuka pengguna.
linkPanel: Ini adalah variabel yang menautkan perilaku peta antara leftMap dan rightMap.
leftMap.centerObject(jan0520, 15): Ini adalah fungsi untuk menengahkan peta kiri pada objek jan0520 dengan tingkat zoom sebesar 15.
rightMap.centerObject(nov1523, 15): Ini adalah fungsi untuk menengahkan peta kanan pada objek nov1523 dengan tingkat zoom sebesar 15.
title: Ini adalah variabel yang menyimpan label judul dengan teks 'Click to inspect'. Penempatannya diatur menjadi di tengah kiri.

// Display Legend
var splitPanel = ui.SplitPanel({
  firstPanel : leftMap,
  secondPanel : rightMap,
  orientation : 'horizontal',
  wipe: true
})
ui.root.clear()
ui.root.add(splitPanel)

var linkPanel = ui.Map.Linker([leftMap, rightMap])
leftMap.centerObject(jan0520, 15);
rightMap.centerObject(nov1523, 15);

// Create the title label.
var title = ui.Label('Click to inspect')
title.style().set('position', 'middle-left')
Map.add(title)

Label di kiri dan kanan bawah panel peta

5. Menampilkan panel

panel: Ini adalah variabel yang menyimpan panel untuk menampilkan legenda. Lebarnya diatur menjadi 300px.
intro: Ini adalah variabel yang berisi panel intro dengan label-label yang ditampilkan di dalamnya. Label-label tersebut termasuk dalam beberapa kategori, yaitu 'Heading 1', 'Heading 2', 'Caption', dan 'Data Source'.
Setiap label memiliki properti gaya yang berbeda, seperti ukuran font, ketebalan, dan warna teks.
Label ‘Heading 1’ memiliki ukuran font yang lebih besar dan ketebalan yang lebih tebal dibandingkan dengan label lainnya.
Panel intro kemudian ditambahkan ke dalam panel utama panel.
ui.root.insert(0, panel): Ini adalah fungsi untuk menyisipkan panel legenda ke dalam root panel. Dengan parameter 0, panel legenda akan dimasukkan ke dalam posisi paling atas dalam root panel.

// Legend Panel
var panel = ui.Panel();
panel.style().set('width', '300px');
// Create an intro panel with labels.
var intro = ui.Panel([
ui.Label({
value: 'Heading 2',
style: {fontWeight: 'bold',color: '585858'}}),
ui.Label({
value: 'Heading 1',
style: {fontSize: '25px', color: '585858', fontWeight: 'bold'}
}),
ui.Label({
value: 'Heading 2',
style: {fontWeight: 'bold',color: '585858'}}),
// Caption
ui.Label({
  value:"Caption",
  style: {color: '585858'}}),

ui.Label({
//Data Sources
value : 'Heading 3 (Data source)',
style: {fontSize: '10px',color: '585858'}}),
]);
panel.add(intro);
ui.root.insert(0, panel);

Link ke full script

Referensi

[1] Erwig, M., & Schneider, M. (2002). Spatio-Temporal Predicates. IEEE Trans. Knowl. Data Eng., 14, 881–901. https://doi.org/10.1109/TKDE.2002.1019220.
[2] Google. (2024). Ui.splitpanel | Google Earth engine | google for developers. https://developers.google.com/earth-engine/apidocs/ui-splitpanel