17
Okt
11

[WebGIS 3] – menampilkan Layer Ganda

<< Artikel Sebelumnya: “Mapfile pada MapServer”

 

Menyambung tutorial sebelumnya mengenai “Mapfile pada Mapserver” pada 07 Februari 2011 lalu, berikut akan dibahas mengenai cara menampilkan peta yang terdiri dari lebih dari satu layer.

Pada kenyataannya, jarang sekali suatu peta hanya terdiri dari satu layer saja. Karena informasi geografis yang sesungguhnya adalah gabungan dari beberapa layer sehingga membentuk suatu informasi peta yang lengkap. Bagian ini akan membahas bagaimana caranya menampilkan beberapa layer dalam satu peta.

 

Skema MapFile Untuk Layer Ganda

MAP
...
  LAYER 1
  ...
    CLASS 1
    ...
      STYLE 1
      ...
      END    # AKHIR DEFINISI STYLE
      ...
      LABEL 1
      ...
      END   # AKHIR DEFINISI LABEL
    ...
    END   # AKHIR DEFINISI CLASS
   ...
  END  # AKHIR DEFINISI OBJEK LAYER
  ...
  ...
  LAYER N
  ...
    CLASS N
    ...
      STYLE N
      ...
      END    # AKHIR DEFINISI STYLE
      ...
      LABEL N
      ...
      END   # AKHIR DEFINISI LABEL
    ...
    END   # AKHIR DEFINISI CLASS
   ...
  END  # AKHIR DEFINISI OBJEK LAYER
...
END   # AKHIR MAP

 

Contoh MapFile

#
# Komentar untuk mapfile
#
MAP		# tanda awal mapfile
   NAME Indonesia		# nama mapfile
   IMAGETYPE JPEG		# bisa juga GIF, PNG
   EXTENT  73.33 -10.28 160.20 5.80	# B1,L1,B2,L2
   STATUS ON
   UNITS DD
   SIZE 600 400			# ukuran image yang dihasilkan
   SHAPEPATH  "../data/asean/"	# bisa juga “<drive>:\ms4w\......\data\asean\”
   IMAGECOLOR 108 166 205 	
   #
   # Mulai pendefinisian layer
   #
   LAYER				# tanda awal definisi layer
    NAME Asean			# nama layer
    DATA Asean-oceania		# nama shapefile “Acean-oceania.shp”
    STATUS ON			# layer dimunculkan
    TYPE POLYGON			# untuk tipe poligon
    CLASS
	NAME "Asean"
    	STYLE
      	  COLOR 255 255 255		# warna latar putih
	  OUTLINECOLOR 108 166 205	# warna batas luar poligon
	END	# akhir style
    END	#akhir class
   END		#akhir definisi layer

   LAYER
     NAME "Propinsi"
     DATA "Propinsi.shp"
     STATUS ON
     TYPE POLYGON
     STATUS ON
     CLASS
        NAME “Propinsi”
        STYLE
          COLOR 119 136 153	#warna abu-abu
          OUTLINECOLOR 0 0 0
        END
     END
   END
END 	# akhir mapfile

Simpanlah mapfile tersebut dengan nama kab_kota.map di direktori C:\ms4w\apps\latih\map\

 

Menampilkan Layer Ganda

Buka kembali file c:\ms4w\apps\latih\htdocs\peta.html dan ubahlah 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>
  </ul>
</body>
</html>

 

Kemudian, buatlah file html baru dengan isinya sebagai berikut:

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

Simpan file tersebut dengan nama contoh_02.html dan simpan di c:\ms4w\apps\latih\htdocs\. Pada browser bukalah alamat http://localhost:1111/latih/peta.html sehingga akan muncul tampilan seperti berikut ini.

 

image

 

Ketika link “Menampilkan Layer Ganda” di klik, akan muncul tampilan peta dengan 2 layer seperti gambar berikut ini.

 

image

 

Pada peta tersebut terlihat ada 2 peta yang ditampilkan, yaitu peta “Asean-oceania.shp” yang berlatar putih dan peta “Propinsi.shp” yang berlatar abu-abu.

Mudah kan?

Jika ingin menambahkan layer lagi, tinggal tambah saja blok LAYER … END pada mapfile sesuai kebutuhan. Selamat mencoba… Winking smile


12 Responses to “[WebGIS 3] – menampilkan Layer Ganda”


  1. Oktober 18, 2011 pukul 10:44 pm

    Seeep… mangstab!
    Jangan lupa posisi menentukan prestasi juga. artinya urutan penulisan (atau pemanggilan di app) mempengaruhi urutan layer.
    Btw, punya data apa aja nih bos?
    Lagi mo bikin buat publik di inderaja.com (yg ga beres2 hehe…). Biar bisa di overlay sama siapa pun dan data apa pun nih. Prototype basemap sih http://maps.inderaja.com/test.html

  2. November 1, 2011 pukul 2:09 am

    wah bagus sekali tutorialnya mas..
    mas ario, mau tanya..
    kalau layernya banyak.. gimana caranya agar di tampilan web layernya bisa dibuat mode on/of seperti pada software GIS pada umumnya.. trima kasih sebelumnya

    • November 2, 2011 pukul 6:24 am

      kalau pake framework sudah default ada fitur tsb

      kebetulan di chapter berikutnya akan dibahas salah satu framework yg saya pakai, yaitu ka-Map!
      atau kalau mau langsung pelajari silahkan cek di http://ka-map.maptools.org/🙂

      • November 8, 2011 pukul 5:24 am

        hhe.. masih belum ngerti juga mas caranya..
        kapan ini ma chapter berikutnya di bahas.. hhee.. ada tugas bikin contoh webgis ni..

      • November 8, 2011 pukul 5:40 am

        waduh… masih agak lama deh chapter yg membahas framework itu… masih perlu dibahas peta raster, vektor, symbol, font dan pembuatan peta tematik😀
        saya juga posting klo lg kosong aja… skrg lagi lumayan padat kegiatan di kantor😀

        mungkin bisa coba2 googling… banyak koq artikel2 yg bagus… 🙂

  3. November 1, 2011 pukul 2:16 am

    o iya mas, sekalian tanya..
    misal backgroundnya dikasih map online kayak googlemap/ openstreetmap bisa gak ya?
    kalau bisa gimana caranya..

    trimakasih banyak mas ario..

  4. 9 rahmad
    Desember 3, 2012 pukul 11:12 am

    salam kenal mas, saya rahmad mau tanya klo menggabungkan informasi peta web gis ke dalam web gmn ya ? kebetulan saya bikin webnya berbasis joomla..terima ksih bnyk🙂

  5. 11 wahyu
    Agustus 23, 2013 pukul 2:59 pm

    pak mo tanyak kalo petanya loding terus gk muncul2x knapa ya ??
    saya pakek tipe koneksinya ogr dan databasenya mysql (spatial data)
    binun pak saia (T_T’)


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: