WebGIS menggunakan Leaflet JS dan Geoserver. Bagian 1: SQL Server ke Geoserver

Pada beberapa bulan terakhir, saya membangun sebuah webgis dengan LeafletJS sebagai antarmuka dan Geoserver sebagai penyedia data spasial. Alasan utama saya menggunakannya karena keduanya OPEN SOURCE. Meskipun open source, keduanya mampu memberikan fitur yang lengkap, komunitas yang luas.

Mungkin dari kalian ada yang bertanya “kenapa harus pakai geoserver?” “kenapa tidak langsung saja menggunakan plugin untuk memuat shp di leaflet?”. Jawabannya sederhana, karena saya ingin menggunakan database spasial yang berada di MS SQL Server. Geoserver mampu menghubungkan database tersebut menjadi format yang bisa dikonsumsi oleh leaflet. Perlu diketahui pada dasarnya leaflet hanya mampu mengkonsumsi data tile-image dan geojson.

Geoserver sendiri mampu menyediakan data dalam format sesuai standar OGC. WFS menyediakan data dalam bentuk json, gml. WMS dan WMTS menyediakan data dalam bentuk foto.

Di sini, saya akan berbagi cerita bagaimana saya membuatnya yang berfokus pada WFS dan WMTS. Cerita ini akan saya bagi menjadi dua bagian. Bagian pertama tentang mengatur geoserver dan bagian kedua bagaimana menggunakan data geoserver di leaflet.

Sebelum memasang geoserver pastikan telah memasang Java Runtime Environment (JRE) 8 32bit. Jika belum unduh dulu di sini jre832bit. Pastikan untuk memilih yang 32bit jika ingin menjalankan geoserver sebagai windows service.

Silahkan unduh geoserver terlebih dahulu di geoserver.org. Di sini saya menggunakan versi stable karena versi ini jarang ada pembaruan fitur sehingga lebih stabil. Pastikan untuk memilih packages yang windows installer jika kamu belum tahu apa itu jetty dan tomcat.

laman unduh geoserver

Setelah terunduh, install seperti biasa. Untuk detil lengkapnya bisa cek di laman tutorial dari geoserver di sini https://docs.geoserver.org/stable/en/user/installation/win_installer.html

Selama install ingat baik — baik port yang kamu masukan di sini. Port ini akan digunakan untuk mengakses geoserver.

Semua telah terinstall dan sekarang kita perlu mengaktifkan CORS terlebih dahulu. CORS digunakan agar kita bisa mengakses geoserver dari domain yang berbeda.

Buka folder di mana kamu memasang geoserver. Masuk ke dalam folder /webapps/WEB-INF. Lokasi lengkap akan terlihat seperti ini c:\Program FIles (x86)\Geoserver 2.14.0\webapps\geoserver\WEB-INF

Buka web.xml menggunakan text editor apapun. Cari kata CORS yang akan terlihat seperti ini.

Kemudian hilangkan tanda <!-- dan --> untuk mengaktifkan CORS sehingga terlihat seperti ini.

Dengan ini kita bisa mengakses isi geoserver dari domain yang sama.

Unduh plugin sql server untuk geoserver di laman unduh geoserver http://geoserver.org/release/stable/ . Kemudian cari sql server di bagian extensions. Setelah terunduh, ekstrak dan pindahkan file *.jar ke folder c:\Program FIles (x86)\Geoserver 2.14.0\webapps\geoserver\WEB-INF\lib .

Setelah dipindah, geoserver perlu di-restart terlebih dahulu. Buka windows run ( pencet Win + R ) , ketikkan services.msc dan tekan Enter untuk membuka windows services. Cari geoserver di jendela windows services. Kemudian klik restart pada kolom sebelah kiri.

Tunggu hingga geoserver selesai restart, biasanya sekitar 5 menit di notebook saya. Sekarang kita buka browser dan buka geoserver di http://localhost:8080/geoserver. Masukkan password dan username yang secara default admin dan geoserver.

Jika tidak bisa diakses, coba buka wrapper.log di folder c:\Program FIles (x86)\Geoserver 2.14.0\logs untuk mengetahui apa yang menghalangi geoserver untuk berjalan.

Pertama, kita perlu membuat workspace terlebih dahulu untuk mengelompokkan layer yang akan kita buat. Klik Workspaces di sisi sebelah kiri. Klik Add New Workspace. Isi name dan namespace URI. Setelah itu, klik Submit.

Kemudian kita tambahkan koneksi ke database sql server melalui Stores. Klik Stores, kemudian klik Add New Store. Klik Microsoft SQL Server.

Jika tidak menemukan Microsoft SQL Server (tanpa ada tambahan teks lain) , maka unduh sql server jdbc terlebih dahulu di https://www.microsoft.com/en-us/download/details.aspx?id=57175 . Ekstrak dan cari file mssql-jdbc-7.0.0.jre8.jar di dalam folder tersebut. Kemudian pindahkan ke dalam folder c:\Program FIles (x86)\Geoserver 2.14.0\lib dan restart geoserver seperti sebelumnya.

Setelah Microsoft SQL Server berhasil muncul seperti gambar di atas, klik pada Microsoft SQL Server .Masukkan data database sql server yang akan digunakan. Sesuaikan dengan sql server yang kalian gunakan. Kemudian klik tombol save yang berada paling bawah. Di sini saya akan menggunakan database basemapplb.

Jika berhasil, akan muncul daftar tabel yang ada di database tersebut. Klik publish pada table yang berisi data spasial.

Sekarang kita beranjak di halaman edit layer. Pada halaman ini hanya perlu mengatur Bounding Boxes. Klik pada compute from data kemudian compute from native bounds. Bounding boxes perlu diatur untuk menentukan zoom level default. Terakhir, klik save yang berada di bagian terbawah halaman.

Jika suatu saat ada perubahan pada tabel atribut maka pastikan klik reload feature type agar data atributnya termuat.

Jika ingin melakukan filter terhadap data tertentu bisa menggunakan cql filter. Sebagai contoh untuk menampilkan data yang memiliki atribut daerah-nya Solo, Jogja, Klaten

DAERAH IN (‘SOLO’, ‘JOGJA’, ‘KLATEN’)

Jika datanya berhasil disimpan maka akan muncul di bagian layers.

Berikut adalah cara menmabahkan data sql server ke geoserver. Sekarang yang perlu dilakukan adalah menambahkan semua data yang akan digunakan.

Jika ada kesulitan bisa bertanya di bagian komentar. I’ll try my best to help.

Sekian untuk bagian ini.

Bagian 2 : https://medium.com/@sahitono/webgis-menggunakan-leaflet-js-dan-geoserver-bagian-2-wfs-wmts-geoservers-c6a743947f17

GNSS, GIS, land surveying enthusiast.

Love podcasts or audiobooks? Learn on the go with our new app.