15
Mei
12

[WebGIS 5]–Simbol dan Font

<< Artikel Sebelumnya: "Menggabungkan Peta Raster dan Vektor"

Menyambung tutorial sebelumnya mengenai “Menggabungkan Peta Raster dan Vektor” pada 14 Mei 2012 lalu , berikut akan dibahas mengenai cara penggunaan simbol dan font pada mapserver.

 

Simbol

Skema File Simbol

Untuk memanfaatkan simbol, MapServer memerlukan minimal sebuah file kontainer yang akan bertindak sebagai pustaka yang menyediakan daftar simbol yang dapat digunakan. Pada umumnya, file pustaka ini berekstensi *.sym. Berikut ini merupakan skema isi file simbol yang digunakan untuk merepresentasikan unsur-unsur spasial.

#
# BARIS KOMENTAR UNTUK DESKRIPSI SIMBOL
#
SYMBOL      # simbol pertama
     NAME "NamaSimbol1"
     TYPE TipeSimbol
     POINTS
          Daftar Koordinat
     END
     …
END

SYMBOL      # simbol kedua, dst
     NAME "NamaSimbol2"
     TYPE TipeSimbol
     POINTS
          Daftar Koordinat
     END
     …
END

Keterangan:

  • SYMBOL merupakan kata kunci sebagai awal dari pendefinisian sebuah simbol
  • NAME adalah nama dari simbol.
  • TYPE adalah tipe dari simbol, diantaranya: vector, ellipse, pixmap, truetype, simple dan cartoline.
  • POINTS merupakan definisi koordinat yang isinya sesuai dengan tipe dari simbol.

 

Simbol Titik

Simbol tipe titik ini merupakan simbol yang ditampilkan sebagai suatu simbol berdasarkan koordinat yang mewakili unsur suatu peta yang bertipe titik juga (point). Misalnya pada peta yang menyatakan terminal, simbol titik ini akan berguna untuk merepresentasikan terminal tersebut pada peta dengan bentuk yang dapat kita atur sedemikian rupa.

Berikut beberapa contoh simbol bertipe titik:

  • Simbol kotak

SYMBOL
     NAME "Kotak"
     TYPE Vector
     POINTS
          0 0 #P1
          1 0 #P2
          1 1 #P3
          0 1 #P4
          0 0 #AWAL=AKHIR
     END
     FILLED True
END

  • Simbol segitiga

SYMBOL
     NAME "Segitiga"
     TYPE vector
     FILLED true
     POINTS
          0 1 # P1
          .5 0 # P2
          1 1 # P3
          0 1 # Awal=Akhir
     END
END

  • Simbol lingkaran

SYMBOL
     NAME "Bulat"
     TYPE Ellipse
     POINTS
          1 1 #(R1,R2), R1=R2 ==> lingkaran
     END
     FILLED True
END

Untuk alasan kepraktisan, semua contoh definisi simbol tersebut lebih baik disatukan ke dalam sebuah file saja. Dalam contoh kita ini, simpanlah ke dalam file simbol.sym di direktori C:\ms4w\apps\latih\symbol\

Contoh mapfile yang terkait dengan file simbol titik:

MAP
   NAME TERMINAL
   IMAGETYPE PNG
   STATUS ON
   UNITS DD
   SIZE 600 400
   SHAPEPATH "../data/"
   SYMBOLSET "../symbol/simbol.sym"
   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

    LAYER
        NAME ‘terminal’
        TYPE POINT
        DATA ‘terminal.shp’
        STATUS DEFAULT
        CLASS
            NAME ‘terminal’
            STYLE
                SYMBOL "Bulat"      # “name” pada file simbol
                SIZE 5      # ukuran simbol
                OUTLINECOLOR 255 0 0
                COLOR 200 200 199
            END
        END
    END # AKHIR DARI LAYER

END # AKHIR DARI MAP

Simpanlah file tersebut dengan nama terminal.map ke dalam direktori C:\ms4w\apps\latih\map\

Sekarang, perbahariulah 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>
        <li><a href="contoh_04.html">Menampilkan Gabungan Raster &amp; Vektor</a></li>
        <li><a href="contoh_05.html">Menampilkan Simbol Titik</a></li>
    </ul>
</body>
</html>

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

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

 

image

Pada gambar di atas, simbol titik digunakan untuk merepresentasikan data terminal yang ada di seluruh Indonesia (yang tercatat di file terminal.shp).

 

Simbol Garis

Simbol tipe garis ini merupakan simbol yang ditampilkan sebagai perwakilan unsur suatu peta yang bertipe garis (LINE). Misalnya pada peta yang menyatakan jalan, simbol garis ini akan berguna untuk merepresentasikan jalan tersebut pada peta dengan warna dan ketebalan yang dapat kita atur sedemikian rupa.

Berikut beberapa contoh simbol bertipe garis:

  • Simbol garis normal

SYMBOL
   NAME "GarisNormal"
   TYPE Ellipse
   POINTS
      1 1 #(R1,R2), R1=R2 ==> lingkaran
   END
   FILLED True
END

  • Simbol garis yang dibentuk dari cartoline

SYMBOL
   NAME "Garis"
   TYPE Cartoline
   LINECAP butt
   LINEJOIN miter
   LINEJOINMAXSIZE 1
END

Contoh mapfile yang terkait dengan file simbol garis:

MAP
    NAME JALAN
    IMAGETYPE PNG
    STATUS ON
    UNITS DD
    SIZE 600 400
    SHAPEPATH "../data/"
    SYMBOLSET "../symbol/simbol.sym"
    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

    LAYER
        NAME ‘JALAN’
        TYPE LINE
        DATA ‘vcr.shp’
        STATUS ON
        CLASS
            STYLE
                SYMBOL "GarisNormal"
                SIZE 1
                OUTLINECOLOR 255 0 255
            END
        END
    END # AKHIR DARI LAYER

END # AKHIR DARI MAP

Simpanlah file tersebut dengan nama jalan.map di direktori c:\ms4w\apps\latih\map\

Sekarang, perbaharuilah 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>
      <li><a href="contoh_04.html">Menampilkan Gabungan Raster &amp; Vektor</a></li>
      <li><a href="contoh_05.html">Menampilkan Simbol Titik</a></li>
      <li><a href="contoh_06.html">Menampilkan Simbol Garis</a></li>
   </ul>
</body>
</html>

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

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

 

image

Pada gambar di atas, simbol garis digunakan untuk merepresentasikan jalan di seluruh Indonesia (yang tercatat pada file vcr.shp).

 

Simbol Poligon

Simbol tipe poligon ini merupakan simbol yang ditampilkan sebagai perwakilan unsur suatu peta yang bertipe poligon (POLYGON). Misalnya pada peta propinsi, simbol poligon ini akan berguna untuk merepresentasikan propinsi tersebut pada peta dengan warna dan pola yang dapat kita atur sedemikian rupa.

Sebenarnya pengguna dapat menggunakan simbol bertipe titik dan garis yang sudah dibuat sebelumnya untuk diaplikasikan pada peta bertipe poligon.

Sebagai contoh, mari kita coba mapfile berikut ini.

MAP
   NAME PROPINSI
   IMAGETYPE PNG
   STATUS ON
   UNITS DD
   SIZE 600 400
   SHAPEPATH "../data/"
   SYMBOLSET "../symbol/simbol.sym"
   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
            SYMBOL "Bulat"
            SIZE 5
            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 prop_poligon.map di direktori \ms4w\apps\latih\map\

Kemudian perbaharuilah 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>
      <li><a href="contoh_04.html">Menampilkan Gabungan Raster &amp; Vektor</a></li>
      <li><a href="contoh_05.html">Menampilkan Simbol Titik</a></li>
      <li><a href="contoh_06.html">Menampilkan Simbol Garis</a></li>
      <li><a href="contoh_07.html">Menampilkan Simbol Poligon</a></li>
   </ul>
</body>
</html>

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

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

 

image

 

Simbol Gambar

Selain tipe bentukan seperti titik, garis atau poligon, kita juga dapat menggunakan gambar sebagai simbol untuk peta kita. Sehingga, dengan memanfaatkan gambar, peta yang dihasilkan akan lebih informatif untuk pengguna.

Untuk membuat definisinya di file simbol.sym, terlebih dahulu kita siapkan file gambar yang akan dijadikan simbol. Sebagai contoh, silahkan Anda download gambar berikut ini:

  • Nama file: ball.gray.gif –>  ball.gray 
  • Nama file: bis_biru.png –> bis_biru
  • Nama File: bis_merah.png –> bis_merah

Simpanlah semua file gambar tersebut di direktori c:\ms4w\apps\latih\symbol\

Sekarang kita definisikan simbol baru di file simbol.sym sebagai berikut:

SYMBOL
   NAME "Anotasi"
   TYPE Pixmap      # file image
   IMAGE "../symbol/ball.gray.gif"
END

SYMBOL
   NAME "BisMerah"
   TYPE Pixmap      # file image
   IMAGE "../symbol/bis_merah.png"
END

SYMBOL
   NAME "BisBiru"
   TYPE Pixmap      # file image
   IMAGE "../symbol/bis_biru.png"
END

Untuk mencobanya, mari kita buat mapfile berikut ini:

MAP
   NAME TERMINAL
   IMAGETYPE PNG
   STATUS ON
   UNITS DD
   SIZE 600 400
   SHAPEPATH "../data/"
   SYMBOLSET "../symbol/simbol.sym"
   IMAGECOLOR 192 192 192
   EXTENT 106.25 -7.87 108.92 -5.85

   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

   LAYER
      NAME ‘terminal’
      TYPE POINT
      DATA ‘terminal.shp’
      STATUS DEFAULT
      CLASS
         NAME ‘terminal’
         STYLE
            SYMBOL ‘BisMerah’
         END
         LABEL
            SIZE medium
            COLOR 0 0 0
         END
      END
   END # AKHIR DARI LAYER

END # AKHIR DARI MAP

Simpanlah file tersebut dengan nama terminal_gambar.map di direktori c:\ms4w\apps\latih\map\

Kemudian perbaharuilah 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>
      <li><a href="contoh_04.html">Menampilkan Gabungan Raster &amp; Vektor</a></li>
      <li><a href="contoh_05.html">Menampilkan Simbol Titik</a></li>
      <li><a href="contoh_06.html">Menampilkan Simbol Garis</a></li>
      <li><a href="contoh_07.html">Menampilkan Simbol Poligon</a></li>
      <li><a href="contoh_08.html">Menampilkan Simbol Gambar</a></li>
   </ul>
</body>
</html>

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

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

 

image

Pada gambar di atas terlihat bahwa simbol gambar “BisMerah” digunakan untuk mewakili posisi terminal. Silahkan Anda bereksperimen dengan simbol gambar lainnya. Smile

 

Font

Tampilan label merupakan bagian yang sangat penting dalam suatu peta. Karena keberadaan label ini akan menjadi bagian dari keseluruhan deskripsi atau informasi lengkap milik unsur spasialnya.

Mendefinisikan Jenis Font

Untuk dapat menggunakan huruf-huruf tertentu pada peta, perlu dilakukan langkah-langkah berikut ini:

  • Kumpulkan file-file font (*.ttf) yang akan dipakai nantinya ke dalam suatu direktori, dalam artikel ini copy saja ke direktori c:\ms4w\apps\latih\fonts\
  • Di dalam direktori yang sama, buatlah sebuah file teks yang bernama font.dat yang isinya kurang lebih seperti gambar berikut ini (sesuaikan dengan nama filenya):

 

image

 

Karakter Sebagai Simbol

Selain sebagai label, font juga bisa dijadikan sebagai simbol. Berikut contoh definisinya.

SYMBOL
   NAME "H"
   TYPE TRUETYPE
   FONT "arial"
   CHARACTER "H"
   ANTIALIAS TRUE
   GAP 10
END

Penggunaannya sama saja dengan penggunaan simbol seperti yang sudah dibahas sebelumnya. Kita dapat memasukan definisi simbol huruf “H” tersebut ke dalam file simbol.sym yang sudah ada. Untuk lebih jelasnya silahkan coba buat mapfile baru sebagai berikut:

MAP
   NAME PROPINSI
   IMAGETYPE PNG
   STATUS ON
   UNITS DD
   SIZE 600 400
   SHAPEPATH "../data/"
   SYMBOLSET "../symbol/simbol.sym"
   FONTSET "../fonts/font.dat"
   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
            SYMBOL "H"
            SIZE 5
            COLOR 255 0 0
         END
         LABEL
            SIZE medium
            COLOR 0 0 0
         END
      END
END # AKHIR DARI LAYER

END # AKHIR DARI MAP

Simpanlah file tersebut dengan nama prop_font.map ke dalam direktori c:\ms4w\apps\latih\map\

Sekarang, perbaharuilah 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>
      <li><a href="contoh_04.html">Menampilkan Gabungan Raster &amp; Vektor</a></li>
      <li><a href="contoh_05.html">Menampilkan Simbol Titik</a></li>
      <li><a href="contoh_06.html">Menampilkan Simbol Garis</a></li>
      <li><a href="contoh_07.html">Menampilkan Simbol Poligon</a></li>
      <li><a href="contoh_08.html">Menampilkan Simbol Gambar</a></li>
      <li><a href="contoh_09.html">Menampilkan Simbol Font</a></li>
   </ul>
</body>
</html>

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

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

 

image

 

Font Sebagai Label

Untuk penggunaan font sebagai label sebenernya tidak jauh berbeda dengan penggunaan label pada bahasan-bahasan sebelumnya (yang melibatkan keyword LABEL). Hanya saja, kita dapat mendefinisikan jenis font yang akan digunakan.

Sebagai contoh, buatlah mapfile sebagai berikut:

MAP
   NAME KABKOTA_LABEL
   IMAGETYPE PNG
   STATUS ON
   UNITS DD
   SIZE 600 400
   SHAPEPATH "../data/"
   FONTSET "../fonts/font.dat"
   SYMBOLSET "../symbol/simbol.sym"
   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 ‘kabupaten’
      TYPE POLYGON
      DATA ‘kabupaten.shp’
      STATUS ON
      LABELITEM "KABUPATEN"
      CLASS
         NAME ‘kabupaten’
         STYLE
            OUTLINECOLOR 0 0 0
            COLOR 209 136 85
         END
         LABEL
            FONT calibri
            TYPE truetype
            SIZE 10
            COLOR 0 0 0
         END
      END
   END # end of layer

END

Simpanlah file tersebut dengan nama kabkota_label.map ke dalam direktori c:\ms4w\apps\latih\map\

Sekarang, perbaharuilah 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>
      <li><a href="contoh_04.html">Menampilkan Gabungan Raster &amp; Vektor</a></li>
      <li><a href="contoh_05.html">Menampilkan Simbol Titik</a></li>
      <li><a href="contoh_06.html">Menampilkan Simbol Garis</a></li>
      <li><a href="contoh_07.html">Menampilkan Simbol Poligon</a></li>
      <li><a href="contoh_08.html">Menampilkan Simbol Gambar</a></li>
      <li><a href="contoh_09.html">Menampilkan Simbol Font</a></li>
      <li><a href="contoh_10.html">Menampilkan Font Sebagai Label</a></li>
   </ul>
</body>
</html>

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

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

 

image

Label nama kabupaten/kota dengan menggunakan font jenis Calibri.


11 Responses to “[WebGIS 5]–Simbol dan Font”


  1. 1 kurniawan
    Juli 5, 2012 pukul 11:19 pm

    kalo seperti kenapa ya “loadSymbol(): Unknown identifier. Parsing error near (GAP):(line 83) ” , ini terjadi pada symbol yang menggunakan font

  2. Februari 12, 2014 pukul 1:35 pm

    mas maaf mau tanya nih, saya gagal memunculkan simbol dan muncul tulisan seperti ini msLoadSymbolSet(): Unknown identifier. First token must be SYMBOLSET, this doesn’t look like a symbol file. itu bagaimana cara mengatasinya ya mas?

    terimakasih sebelumnya

  3. Februari 13, 2014 pukul 2:35 pm

    wah terimakasih mas sangat membantu, saya pakai V 3.0.6…

    semoga sukses mas..🙂

  4. Februari 13, 2014 pukul 2:50 pm

    ditunggu tulisan-tulisan lanjutannya mas buat belajar, hehe

  5. April 30, 2014 pukul 9:28 am

    Error di simbol garis, messagenya seperti ini :
    “getSymbol(): Symbol definition error. Parsing error near (Cartoline):(line 13) ”

    Itu knapa ya mas? saya pakai V 3.0.6
    Terima kasih atas sharing tutorialnya.


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: