14
Mei
12

[WebGIS 4] – Menggabungkan Peta Raster dan Vektor

<< Artikel Sebelumnya: "Menampilkan Layer Ganda"

 

Menyambung tutorial sebelumnya mengenai “Menampilkan Layer Ganda” pada 17 Oktober 2011 lalu ( fuih, sudah lama ya ternyata Smile with tongue out ), berikut akan dibahas mengenai cara menggabungkan peta raster dan vektor satu tampilan di browser.

Ada dua macam peta yang dapat kita gunakan dalam sistem berbasis GIS, yaitu peta vektor dan peta raster.

Peta Vektor, seperti dilihatkan pada contoh latihan sebelumnya, terdiri dari titik, garis, dan area poligon.

Peta Raster adalah peta yang diperoleh dari fotografi suatu areal, foto satelit atau foto permukaan bumi yang diperoleh dari komputer. Gambar di bawah menunjukan contoh peta raster yang diambil wikimapia.org dengan memanfaatkan Google Maps.

Salah satu varian dari peta raster adalah peta hasil scanner atau scan map. Sewaktu kita melakukan scan pada sebuah kertas maka terjadi proses konversi menjadi peta raster digital yang dapat digunakan sebagai sebuah layer pada peta.

 

image

 

Format Data Raster

Data raster memiliki banyak sekali formatnya. Untungnya, MS4W sudah mendukung banyak sekali format data raster. Untuk mengetahui format-format apa saja yang didukung, kita bisa memeriksanya dengan cara sebagai berikut ini:

  1. Melalui command prompt, jalankanlah file c:\ms4w\setenv.bat ( dengan asumsi MS4W di install di drive C:\ )
  2. Kemudian, jalankan c:\ms4w\tools\gdal-ogr\gdalinfo –formats
  3. Setelah itu, akan muncul daftar format data raster yang didukung seperti gambar berikut ini.

 

image

Bisa dilihat kan berapa banyak format data raster yang didukung oleh MS4W? Winking smile

 

Menampilkan Data Raster

Skema MapFile

MAP

     LAYER
          NAME …
          TYPE RASTER
          DATA …
          …
     END # AKHIR DEFINISI OBJEK LAYER

END # AKHIR MAP

Contoh MapFile

MAP
     NAME ALL_AREA
     IMAGETYPE PNG
     STATUS ON
     UNITS DD
     SIZE 600 400
     SHAPEPATH "../data/"
     IMAGECOLOR 192 192 192
    
     EXTENT 92.93 -16.38 142.59 11.10

#
# Mulai mendefinisikan layer
#
     LAYER
          NAME "Citra"
          DATA "raster.tif"
          STATUS ON
          TYPE RASTER
     END
END

Simpanlah file tersebut dengan nama raster.map dan simpanlah di direktori C:\ms4w\apps\latih\map\

Sekarang, ubahlah file peta.html menjadi sebagai berikut ini:

<html>
<head>
   <title> Belajar Mapserver</title>
</head>
<body>
   <h1> Contoh-contoh Belajar Mapserver</h1>
   <h3>Menu</h3>
   <ul>
      <li><a href="contoh_01.html">Menampilkan Peta Sederhana</a></li>
      <li><a href="contoh_02.html">Menampilkan Layer Ganda</a></li>
      <li><a href="contoh_03.html">Menampilkan Layer Raster</a></li>
   </ul>
</body>
</html>

Kemudian, untuk isi file contoh_03.html adalah sebagai berikut:

<img border="1" src="http://localhost:1111/cgi-bin/mapserv.exe?
map=c:\ms4w\apps\latih\map\raster.map&mode=map&layers=all">

image

Boom… akhirnya peta raster bisa muncul di browser. Smile 

Menggabungkan Peta Raster & Vektor

Sebenarnya, untuk menggabungkan peta raster dengan vektor sama saja dengan ketika kita hendak menampilkan peta dengan layer ganda. Hanya saja ada hal yang perlu dicatat bahwa layer peta yang berupa raster harus diletakkan di awal, karena peta raster (biasanya) selalu dijadikan background untuk peta yang akan ditampilan bersama-sama dengan peta vektor.

Skema MapFile

MAP

   LAYER
      NAME …
      TYPE RASTER
      DATA …
      …
   END # AKHIR DEFINISI OBJEK LAYER

   LAYER
   …
      CLASS
      …
      END # AKHIR DEFINISI CLASS
   …
   END # AKHIR DEFINISI OBJEK LAYER

END # AKHIR MAP

Contoh MapFile

MAP
   NAME ALL_AREA
   IMAGETYPE PNG
   STATUS ON
   UNITS DD
   SIZE 600 400
   SHAPEPATH "../data/"
   IMAGECOLOR 192 192 192
   EXTENT 92.93 -16.38 142.59 11.10

   LAYER
      NAME "Citra"
      DATA "raster.tif"
      STATUS ON
      TYPE RASTER
   END

   LAYER
      NAME ‘provinsi’
      TYPE POLYGON
      DATA ‘provinsi.shp’
      STATUS DEFAULT
      LABELITEM "PROVINSI"
      CLASS
         NAME ‘provinsi’
         STYLE
            OUTLINECOLOR 0 0 0
            COLOR 200 200 199
         END
         LABEL
            SIZE medium
            COLOR 0 0 0
         END
      END
   END # AKHIR DARI LAYER

END # AKHIR DARI MAP

Simpanlah file tersebut dengan nama raster_vektor.map di direktori C:\ms4w\apps\latih\map\

Sekarang, perbaharuilah file peta.html menjadi seperti berikut ini:

<html>
<head>
   <title> Belajar Mapserver</title>
</head>
<body>
   <h1> Contoh-contoh Belajar Mapserver</h1>
   <h3>Menu</h3>
   <ul>
      <li><a href="contoh_01.html">Menampilkan Peta Sederhana</a></li>
      <li><a href="contoh_02.html">Menampilkan Layer Ganda</a></li>
      <li><a href="contoh_03.html">Menampilkan Layer Raster</a></li>
      <li><a href="contoh_04.html">Menampilkan Gabungan Raster &amp; Vektor</a></li>
   </ul>
</body>
</html>

Kemudian, untuk isi file contoh_04.html adalah sebagai berikut:

<img border="1" src="http://localhost:1111/cgi-bin/mapserv.exe?
map=c:\ms4w\apps\latih\map\raster_vektor.map&mode=map&layers=all">

 

image

 

Pada tampilan peta di atas, selain menampilkan gabungan peta raster dan vektor, tampil juga teks yang menyatakan nama-nama propinsi. Teks tersebut muncul dikarenakan pada mapfile yang kita buat (raster_vektor.map), didefinisikan baris LABELITEM “PROVINSI” dan blok LABEL…END di dalam blok CLASS…END.

 

image

 

Baris LABELITEM “PROVINSI” pada blok LAYER provinsi menyatakan perintah untuk menampilkan data yang terdapat pada field PROVINSI. Data teks tersebut ditampilkan dengan ukuran medium dan warna hitam.

Untuk mengetahui data-data apa saja yang terdapat pada suatu shapefile (peta), kita buka saja file yang berekstensi .dbf-nya.

 

 

 

 

 

image

 

Untuk melihat isi file .dbf tersebut bisa digunakan Microsoft Excel atau bisa digunakan freeware ringan seperti DBFViewer, DBF Commander, dsb. Anda bisa mencarinya di internet untuk link download-nya.


4 Responses to “[WebGIS 4] – Menggabungkan Peta Raster dan Vektor”


  1. 1 irland
    Mei 14, 2012 pukul 4:07 am

    mantapss mass…ditunggu episode selanjutnya..heheh..

  2. November 13, 2015 pukul 10:23 am

    keren mas,
    mas boleh minta tolong ga,
    saya lagi kesulitan buat bikin fungsi zoom pada mapserver,
    saya mau buat yg sederhananya, tanpa menggunakan framework,
    gmn ya mas?
    mohon bantuannya, kirim email ya ^.^


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s


arioss

Arsip

Blog Stats

  • 68,494 hits

RSS Fokus ITB

  • Sebuah galat telah terjadi; umpan tersebut kemungkinan sedang anjlok. Coba lagi nanti.

%d blogger menyukai ini: