3 Dimensi MapBox Membuat Webgis Yogyakarta Indonesia Spasialkan

Tutorial WebGIS Visualisasi 3 Dimensi dengan MapBox

August 11, 2017 128 0

Pada postingan yang lain, sudah dijelaskan bagaimana membuat visualisasi 3 dimensi menggunakan plugin QGIS2threeJS pada perangkat lunak QGIS. Tutorial kali ini, masih dalam satu fokus yang sama, yakni berkaitan dengan visualisasi 3D. Hanya saja kali ini data yang akan kita mainkan adalah data tinggi bangunan dari OSM (OpenStreetMap). Data akan saya upload, tenang saja bagi yang belum mempersiapkan data untuk tutorial kali ini. Silakan sedot lewat sini datanya (Password untuk ekstrak: subscribe-channel-youtube-spasialkan). Bagi yang ingin menggunakan data sendiri silakan, atau kalau mau menggunakan data OSM namun dengan area kajian yang lain, tutorialnya ada di sini.

Sesuai judul, alat yang digunakan dalam pembuatan webgis 3 dimensi ini adalah MapBox (atau MapBox Studio). Tidak perlu download dan install, karena memang itu bukan software. Tapi silakan buat akun terlebih dahulu di sini. Cukup buat akun yang free saja karena memang sudah termasuk storage tilesets 50 GB dan datasets 5GB. Kalau dirasa kurang tinggal buat akun free lagi, hehe. Atau kalau mau yang bergengsi silakan buat akun berbayar. Bedanya apa antara yang free dan berbayar? Baca saja di halaman ‘Pricing’.

READ  Tutorial WebGIS Animasi 3 Dimensi dengan QGIS2ThreeJS

Ok, lanjut, sampai tahap ini Saya asumsikan, teman-teman sudah signin ke MapBox Studio dan sudah memiliki data yang akan divisualisasikan.

Jika teman-teman menggunakan data sampel tutorial ini, bisa dibuka lewat software GIS desktop (seperti QGIS), dan buka tabel atributnya. Di sana terdapat field ‘elevasi’ yang berisi data ketinggian bangunan, hipotetik tentunya, bukan data sesuai lapangan. Field tersebut yang nantinya menjadi dasar nilai ketinggian dalam visualisasi 3 dimensinya.

Field Elevasi

Bagi yang menggunakan data pribadi, pastikan datanya sudah memiliki informasi ketinggian, terserah nama field yang digunakan, yang penting setiap bangunan punya nilai ketinggian. Kalau ada informasi lain seperti harga, jenis, luas, dan jumlah lantai bangunan akan lebih bagus lagi, karena informasi tersebut dapat dimunculkan dalam bentuk popup.

READ  Cara Membuat Visualisasi Anaglip dengan Ilwis

Sebagai catatan, tutorial ini menggunakan script pemograman HTML, CSS, dan Javascript. Jadi, akan lebih baik jika teman-teman sudah memiliki dasar pemahaman terkait bahasa-bahasa tersebut. Adapun bahan sourcecode yang digunakan menggunakan referensi dari thinkingspatial.com/mapbox-gl-js-3d-buildings, tentunya dengan beberapa modifikasi.

Berikut detail langkah-langkahnya:

  • Unggah data shapefile ke MapBox Studio dalam ekstensi *.zip menjadi Tilesets

Unggah TileSets

  • Jika proses sukses maka akan dihasilkan Map ID, silakan di copy dan simpan. Untuk melihat detail tilesets, bisa langsung diklik saja nama tilesetsnya.

Simpan MapID

  • Masuk ke menu ‘style’ pada MapBox Studio karena di langkah ketiga ini kita akan membuat basemaps dari webgis. Pada tutorial ini digunakan template basemaps ‘Streets’.

Membuat Style

  • Jangan lupa publish style.
READ  Modul Tutorial Pemetaan Menggunakan QGIS

Publish Style

  • Simpan Style URL-nya

Simpan Style URL

  • Masuk ke halaman ‘account’ untuk membuat Access Token.

Access Token

Sampai tahap ini semua bahan sudah siap tinggal memanggilnya dalam webgis. Silakan simak source code berikut ini. Salin ke direktori lokal kalian dan lakukan beberapa pengaturan sesuai dengan perintah yang sudah Saya tulis dalam bentuk comment dalam sourcecode.

 

See the Pen WebGIS 3D MapBOX by Spasialkan.com | Peta Digital & WebGIS (@spasialkan).

Catatan: Result dari code di atas tidak bisa running dengan sempurna karena belum diisikan Access Tokennya. Silakan isikan dengan Acces Token beserta data-data kalian untuk melihat hasil visualisasinya. Kalau masih ada yang membingungkan atau kurang jelas silakan ditanyakan melalui kolom komentar di bawah ini
Tutorial WebGIS Visualisasi 3 Dimensi dengan MapBox
5 (100%) 4 votes

Tags: 3 dimensi, animasi 3d, mapbox, tutorial, webgis Categories: Tutorial, Tutorial 3D, Tutorial WebGIS, WebGIS, WebGIS Indonesia
share TWEET PIN IT SHARE share share
mm Rifki Fauzi

Seorang mahasiswa di Universitas Gadjah Mada Yogyakarta, yang mulai menemukan minatnya di dunia pemetaaan, khususnya WebGIS. Sejauh ini cukup paham dengan Geoserver, MS4W, Arcgis Server, Leaflet Js, Openlayers, Google Map API, PostGIS/PostgreSQL, dan SQL Server.

Related Posts
Leave a reply

Leave a Reply

Your email address will not be published. Required fields are marked *