3 Dimensi MapBox Membuat Webgis Yogyakarta Indonesia Spasialkan

Tutorial WebGIS Visualisasi 3 Dimensi dengan MapBox

August 11, 2017 269 4

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  Ebook: Penjaminan Kualitas Data Spasial OpenStreetMap (OSM)

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  Tutorial Visualisasi 3 Dimensi Anaglyph dengan 3DEM

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  Cara Membuat WebGIS dengan Plugin QGIS2Leaf (LeafletJS) di QuantumGIS

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
Comments
  1. -

    Terima kasih atas artikel mengenai MapBox. Saya sudah coba tapi ketika memasukan peta dari osm dengan extension zip kemudian ketika upload file zipnya di tileset ada error kalau file extension shp tidak boleh dobel. Dan kedua kenapa untuk upload file zip di tileset lamanya bukan main.. Apa pertanyaan saya ini ada solusinya atau memang seperti itu

    Terima kasih

    1. mm

      -

      Itu dalam *.zip-nya ada berapa shapefile? (soalnya kalo lebih dari satu emang nggak bisa).
      Trus, kalau sudah bener hanya satu shapefile pastikan juga nggak ada paket shapefile yang dobel (.shp, .shx, .dbf, .prj).

      Terkait lama uploadnya, setahu Saya tergantung ukuran shapefile dan koneksi internet.

      Selebihnya mungkin bisa dicek di mapbox.com/help/uploads

  2. -

    Terima kasih jawabanya. Klo boleh saya bertanya lagi. Saya alami kesuilitan ketika mengimplementasi ke dalam Web.. Saya mempunyai 4 layer. Sudah saya coba2 utak atik script java termasuk melihat contoh dari program mas Rifki tetapi tetap belum bisa. Yang mau saya tanyakan apa bedanya isi style : … dengan url : … di script java.(kenapa beda). Saya lihat2 di mapbox tdk ada spesifik url saya. Yang ada url publish. Mohon bantuannya mas Rifki dan Terima kasih sebelumnya

    1. mm

      -

      style itu isinya “Style URL” dari tab Styles, sedangkan URL itu isinya “Map ID” source-layer dari tab Tilesets

Leave a reply

Leave a Reply

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