Cara Membuat Webgis dengan QGIS - LeafletJS - Openlayers OL3 - Plugin QGIS2Web

Tutorial Membuat WebGIS Sederhana dengan QGIS2Web (Leaflet dan Openlayer/OL3)

August 27, 2017 611 8

QGIS2Web adalah salah satu plugin gratis di software QuantumGIS (QGIS) dengan fungsi untuk membuat peta web (webgis). QGIS2Web bisa dikatakan sebagai plugin pengganti bagi QGIS2leaf (Baca: Cara Membuat WebGIS Sederhana dengan Plugin QGIS2Leaf di QuantumGIS) yang kini sudah tidak dikembangkan lagi. Hal ini karena pengembang QGIS2web salah satunya juga merupakan pengembang dari qgis2leaf, yakni Tom Chadwin. Dibandingkan dengan QGIS2leaf, plugin QGIS2web memiliki beberapa kelebihan. Salah satu yang paling menonjol adalah digunakannya OpenLayers (OL3) selain LeafletJS. Adapun OpenLayers sebagaimana LeafletJS merupakan library javascript open-source yang cukup banyak digunakan untuk membangun webgis.

Plugin QGIS2web dapat diinstall manual dengan mengcopypaste folder ke direktori plugin QGIS di komputer/laptop, maupun otomatis dengan tool “manage and install plugins” di QGIS.

Install Manual (OS Windows dengan QGIS versi 2.18.14, OS atau versi QGIS lain bisa menyesuaikan atau lakukan instalasi secara otomatis)
  1. Silakan buka laman QGIS Python Plugins Repository di plugins.qgis.org kemudian search “qgis2web”
  2. Anda bisa unduh versi berapapun, tapi saya sarankan untuk menggunakan saja versi yang paling baru (2.33.1 rilis 30 Januari 2018), sebagaimana yang akan kita gunakan pada tutorial kali ini.
  3. Ekstrak file .zip hasil unduhan dan copy folder “qgis2web” (ada didalam folder “qgis2web-2.33.1”).
  4. Buka file manager di komputer/laptop Anda, masuk ke direktori C:\Users\<nama komputer/laptop Anda>\.qgis2\python\plugins, kemudian paste folder “qgis2web”.
  5. Silakan buka software QGIS Anda dan aktifkan plugin qgis2web melalui menu Plugins >> Install and Manage Plugins… Pilih tab “All” atau “Installed” dan cari qgis2web, kemudian centang.
  6. QGIS2web siap digunakan.
READ  Modul Tutorial OSM - Pelatihan OpenstreetMap
Install Otomatis
  1. Buka software QGIS Anda, masuk menu “Install and Manage Plugins” (Plugins >> Install and Manage Plugins…).
  2. Pilih tab “All” atau “Not installed” dan cari qgis2web, kemudian install plugin. Setelah terinstall, pastikan qgis2web sudah tercentang.
  3. QGIS2web siap digunakan.

Setelah perangkat lunak QGIS beserta plugin QGIS2webnya siap, maka yang kita perlukan selanjutnya untuk membuat webgis adalah data spasial digital (shp atau raster file) yang akan dipublikasikan. Silakan gunakan data yang Anda miliki, atau bisa juga menggunakan data sampel yang digunakan dalam tutorial ini. Data sampel berupa obyek garis (struktur geologi) dan area (peta geologi), serta data raster citra penginderaan jauh (citra ASTER) bisa diunduh melalui link ini: DOWNLOAD DATA. (Password: spasialkan.com)

  1. Input semua data ke dalam QGIS kemudian lakukan simbolisasi. Jika menggunakan data sampel, maka bisa langsung buka project spasialkan_data.qgs, atau input data raster dan shapefile satu persatu dengan style symbol file *.qml.
  2. Buka plugin QGIS2Web dan lakukan beberapa pengaturan tampilan webgis.Tutorial Membuat Webgis dengan QGIS - Leaflet JS - Openlayers OL3 - QGIS2Web
  3. Beberapa pengaturan yang dapat dilakukan adalah terkait layers yang ingin dimunculkan dalam webgis, popup data atribut (khusus data vektor/shapefile), basemap yang digunakan, library webgis yang dipakai (openlayers atau leaflet js), pengaktifan tools analisis webgis (seperti legenda, geolokasi, pencarian, pengukuran jarak, hingga minimal dan maksimal zoom).
  4. Untuk melihat perbedaan visualisasi dari penggunaan library openlayers dan leaflet js dapat dipilih melalui checkbox di bagian kiri-bawah halaman QGIS2Web kemudian klik ‘Update preview’.
    Lihat Gambar
    Cara Membuat Webgis dengan QGIS - Openlayers - OL3 - Plugin QGIS2Web
  5. Jika pengaturan tampilan webgis sudah selesai, webgis bisa segera dieksport dengan terlebih dahulu menentukan lokasi penyimpanannya (bisa ke dalam folder di komputer/laptop maupun ke FTP site).
  6. (Optional untuk keperluan SEO WebGIS ketika di publikasikan online) Untuk menambahkan favicon, deskripsi, dan keyword pada webgis silakan buka file index.html yang ada pada folder hasil export.
  7. Tambahkan beberapa baris kode berikut ini diantara tag <head> </head>, kemudian edit bagian yang tertulis merah sesuai kebutuhan.
<meta name=”description” content=”Tulis deskripsi WebGIS disini” />
<meta name=”keywords” content=” Tulis keyword WebGIS disini” />
<link rel=”icon” href=”URL LOGO” type=”image/x-icon”/>
<link rel=”shortcut icon” href=”URL LOGO” type=”image/x-icon”/>

Sekian tutorial membuat webgis dengan Plugin QGIS2Web di QGIS, jangan lupa simak tutorial lainnya. Hasil pembuatan webgis dengan qgis2web ini dapat di lihat di laman berikut ini:

READ  Relief Permukaan Bumi 3D Anaglyph Menggunakan TNTgis (TNTmips Free)

Simak cara membuat webgis berbasis openlayers (OL3) dan Leaflet JS dalam bentuk video tutorial berikut ini:

UPDATE TUTORIAL BASEMAPS
    • Peta dasar (basemaps) pada webgis dapat diatur lebih dari satu dengan cara men-select beberapa jenis basemaps yang telah tersedia. Sebagai contoh, misalnya basemaps yang diaktifkan adalah OSM, OSM B&W, Stamen Toner, OSM DE, dan OSM HOT seperti terlihat pada gambar berikut ini. Cara Membuat Webgis dengan QGIS - LeafletJS - Plugin QGIS2Web - Basemaps
    • Selain melalui GUI dari QGIS2Web, basemaps juga dapat ditambahkan melalui script hasil export dari QGIS2Web.
    • Pada penggunaan library OpenLayers, basemaps dapat ditambahkan dengan mengedit script pada file layers.js‘ yang berada dalam folder ‘layers’ (data webgis hasil export QGIS2Web). Dengan cara ini, bisa pula ditambahkan basemaps selain yang disediakan oleh QGIS2Web (selama tahu url sourcenya). Berikut adalah contohnya:
READ  Tutorial WebGIS Visualisasi 3 Dimensi dengan MapBox

See the Pen qgis2web-layers.js-basemapsOL by Spasialkan.com | Peta Digital & WebGIS (@spasialkan).

    • Pada penggunaan library Leaflet JS, basemaps dapat ditambahkan dengan mengedit script pada file index.html‘ (data webgis hasil export QGIS2Web). Sama dengan OpenLayers, dengan cara ini, bisa pula ditambahkan basemaps selain yang disediakan oleh QGIS2Web (selama tahu url sourcenya). Berikut adalah contohnya:

See the Pen qgis2web-index.html-basemapsLeafletJS by Spasialkan.com | Peta Digital & WebGIS (@spasialkan).

Tutorial Membuat WebGIS Sederhana dengan QGIS2Web (Leaflet dan Openlayer/OL3)
4.9 (98.33%) 12 votes

Tags: leafletjs, openlayer, qgis, tutorial, webgis Categories: GIS, Sistem Informasi Geografi (SIG), Tutorial, Tutorial WebGIS, WebGIS
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. -

    setelah install qgis2web trus buat webgis gmn ? trima kasih mohon infonya

    1. mm

      -

      Sudah saya lengkapi Mas tutorial webgis dengan qgis2web-nya…

  2. -

    Mas rifky makasih tutorialnya.
    Kantor saya pingin buat webgis seperti di web portal esdm http://geoportal.esdm.go.id/peng_umum/
    itu kira2 pakai aplikasi apa aja ya?
    Apa bisa kalau pakai qgis?

    1. mm

      -

      Itu pakai Web AppBuilder ArcGIS buatnya (dan ArcGIS Server untuk nyimpan datanya).

      Platform mahal boleh dibilang itu,

      Kalau boleh tahu kerja dimana ya, Mbak?

  3. -

    Malam pak Rifki
    pak mau bertanya, untuk memunculkan pilihan basemaps (OSM, OSM B&W, OSM DE, OSM HOT dll.) pada saat setting export webgis bagaimana ya pak ?
    Terimakasih

    1. mm

      -

      Bisa langsung di select lebih dari satu basemaps sebelum webgis di export, Pak. Nanti pada layerslist webgis akan otomatis muncul pilihan basemaps yang sudah diselect sebelumnya.

      Detailnya juga sudah saya tambahkan (Update) ke tulisan di atas, Pak.
      Terima kasih,

      1. -

        Selamat sore pak Rifki

        pak mohon bantuannya, bagaimana cara agar layer bisa di hide/unhide pasca di export ?
        apakah ada plugin khususnya ?, saya menggunakan QGIS 3.0

        1. mm

          -

          Sebelum export, aktifkan fitur “layer list”nya Mas, bisa pilih tampilan ‘expanded’ atau ‘collapsed’.
          Layerlist

Leave a reply

Leave a Reply

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