Smart City 3D #5: Prototype Awal Smart City 3D Mapping - Perwira Learning Center

1. Latar Belakang

    Perkembangan teknologi pemetaan digital membuka peluang bagi pengembang untuk menampilkan informasi kota secara lebih visual dan interaktif melalui peta berbasis web. Salah satu pendekatan yang mulai banyak digunakan adalah visualisasi kota dalam bentuk tiga dimensi, dimana pengguna dapat melihat tampilan wilayah secara lebih realistis dibandingkan peta konvensional dua dimensi. Teknologi ini tidak hanya menampilkan lokasi geografis, tetapi juga memungkinkan representasi bangunan dan lingkungan kota secara lebih mendekati kondisi sebenarnya. Oleh karena itu, dilakukan pembuatan prototype awal 3D mapping menggunakan library CesiumJS untuk mengeksplorasi bagaimana teknologi tersebut dapat diterapkan pada aplikasi Smart City Purbalingga serta untuk memahami potensi dan kendala yang mungkin muncul dalam proses pengembangannya.

2. Alat dan Bahan

A. Perangkat Lunak

- Sistem Operasi Linux (atau lainnya)

- Visual Studio Code (atau text editor lain)

- Laravel 12.0

- Library CesiumJS

B. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Tujuan Prototype Awal 3D Mapping

    Prototype awal 3D mapping dibuat untuk melakukan eksplorasi terhadap teknologi visualisasi kota dalam bentuk tiga dimensi pada aplikasi berbasis web. Melalui prototype ini, dilakukan percobaan untuk mengetahui bagaimana peta digital dapat divisualisasikan dalam bentuk globe tiga dimensi serta bagaimana data geospasial dapat ditampilkan secara interaktif kepada pengguna.

3.2 Pembuatan Prototype Awal 3D Mapping

    Pada tahap ini dilakukan pembuatan prototype awal visualisasi peta tiga dimensi menggunakan library CesiumJS. Library ini dipilih karena memiliki kemampuan untuk menampilkan visualisasi bumi secara realistis serta mendukung berbagai format data geospasial yang umum digunakan dalam aplikasi pemetaan.

1. Integrasi CesiumJS pada proyek Laravel

    

- Import library Cesium JS dengan link berikut

- Tambahkan style css untuk mengatur ukuran globe

- Tambahkan <div> untuk menampilkan globe, tak lupa kode JavaScript untuk menulis Access Token dan menampilkan fungsi Cesium JS

2. Menampilkan globe

    

- Jalankan php artisan serve pada terminal Visual Studio Code

php artisan serve

- Buka port yang tersedia, misalnya http://127.0.0.1:8001

3. Mengarahkan kamera ke wilayah Purbalingga

- Tambahkan kode flyTo untuk membuat kamera langsung menuju ke posisi koordinat ketika globe pertama kali ditampilkan dengan animasi.

Koordinat pada kode merupakan koordinat pusat kota purbalingga

viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
            109.3469, // longitude - garis bujur
            -7.4038, // latitude - garis lintang
            500 // ketinggian kamera
        )
    });

Hasil

4. Menampilkan bangunan kota menggunakan OSM Buildings

- Masukkan kode sebelumnya di dalam sebuah async function dan panggil nama functionnya

Muncul popup berisi data OSM ketika bangunan di klik

5. Menghapus tampilan bawaan CesiumJS

Hal yang perlu di ubah hanyalah pada bagian kode berikut:

- Menghapus widget jam/animasi di kiri bawah

Widget jam di kiri bawah berhasil dihapus

- Menghapus timeline bawah

Timeline di bawah halaman berhasil dihapus

- Menghapus tombol rumah, tombol help atau "?", tombol 2D/3D, dan tombol searchbar di kanan atas

Tombol-tombol berhasil dihapus

- Menghapus watermatk Cesium JS di kiri bawah

Watermark di kiri bawah berhasil dihapus

3.3 Hasil 3D Mapping

    Sekarang, map buatan Cesium JS sudah siap digunakan untuk di cantumkan pada aplikasi maupun untuk di tambahkan fitur tambahan lain.

3.4 Kendala yang Ditemukan

    Terdapat beberapa kendala selama eksplorasi 3D Mapping menggunakan Cesium JS, berikut beberapa kendala yang menghambat pengembangan yaitu sebagai berikut.

• Laptop terlalu sering freeze dan Visual Studio Code mengalami lag parah
• Sulit membuat tampilan bangunan agar mudah dibedakan berdasarkan ukuran, tinggi, maupun lebarnya
• Bangunan terlihat kurang rapi apabila menggunakan data bangunan OSM, namun akan memakan waktu yang sangat lama untuk mengambil data geospasial yang pas untuk masing-masing bangunan di kota purbalingga
• Tidak dapat menambahkan tekstur pada bangunan

3.5 Solusi dan Keputusan Pengembangan

    Berdasarkan berbagai kendala yang ditemukan selama proses eksplorasi, dilakukan evaluasi terhadap pendekatan yang sistem Smart City. Untuk sementara waktu, pengembangan sistem difokuskan pada implementasi peta dua dimensi menggunakan library Leaflet. Keputusan bersifat sementara ini diambil untuk mempermudah proses pengembangan kedepannya sehingga tidak ada hal yang menghambat progress pengerjaan proyek karena libary Leaflet masih tergolong ringan.

 3.5 Kesimpulan

    Berdasarkan proses eksplorasi yang telah dilakukan, dapat disimpulkan bahwa teknologi visualisasi peta tiga dimensi menggunakan CesiumJS mampu menampilkan peta digital dalam bentuk globe interaktif yang dapat digunakan sebagai dasar pengembangan visualisasi kota.

    Namun, implementasi teknologi tersebut memerlukan sumber daya komputasi yang cukup besar serta proses integrasi data geospasial yang relatif kompleks. Oleh karena itu, pada tahap awal pengembangan Smart City Purbalingga, pendekatan pemetaan dua dimensi menggunakan Leaflet dipilih sebagai solusi yang lebih efisien untuk menampilkan informasi kota secara lebih ringan.

4. Daftar Pustaka

Cesium Community. (2019, Desember). Cesium Ion Logo Removal. Diakses dari: https://community.cesium.com/t/cesium-ion-logo-removal/8979

Cesium Community. (2015, Juli). Remove Clock in Viewer. Diakses dari: https://community.cesium.com/t/remove-clock-in-viewer/2726

Cesium Community. (2016, Maret). How to "Hide" Animation widget (clock) and Timeline. Diakses dari: https://community.cesium.com/t/how-to-hide-animation-widget-clock-and-timeline/3791