Pengenalan  Open  Layer  

  1. OpenLayer  Dasar  

OpenLayer  adalah  sebuah  library  yang  mendukung    cara  cepat  untuk  membuat   aplikasi  pemetaan  dan  menampilkanmnya  pada  sebuah  jendela  web  (browser).   Library  ini  membantu  pengembang  dalam  mengintegrasikan  data  dari  berbagai   sumber  melalui  sebuah  API,  dan  menghasilkan  aplikasi  pemetaan  yang  yang   responsif.   Modul  ini  memperkenalkan  konsep  dasar  OpenLayer  untuk  membuat  dan   menampilkan  peta.   1.1. Membuat  Sebuah  Peta   Dalam  OpenLayer,  sebuah  peta  didefinisikan  sebagai  koleksi/kumpulan  beberapa   layer  dan  berbagai  kontrol  yang  berhubungan  dengan  interaksi  pengguna  dengan   aplikasi.  Sebuah  peta,  terbagi  dalam  3  komponen  dasar,  yakni:  markup,  style   declarations,  dan  initialization  code.   1.1.1. Bekerja  dengan  OpenLayer   Perhatikan  contoh  kode  di  bawah  ini:  
<!DOCTYPE  html>   <html>          <head>                  <title>My  Map</title>                  <link  rel="stylesheet"  href="openlayers/theme/default/style.css"   type="text/css">                  <style>                          #map-­‐id  {                                  width:  512px;                                  height:  256px;                          }                  </style>                  <script  src="openlayers/lib/OpenLayers.js"></script>          </head>          <body>                  <h1>My  Map</h1>                  <div  id="map-­‐id"></div>                  <script>                          var  map  =  new  OpenLayers.Map("map-­‐id");                          var  imagery  =  new  OpenLayers.Layer.WMS(  

                                 "http://maps.   2. Bagian  dari  Peta   Tampilan  dalam  jendela  web  browser.  dan   initialization  code.                          map.1.                                  {layers:  "bluemarble"}                          ).  Selanjutnya.html       2.  yakni:  markup.html”. Buka  file  tersebut  menggunakan  web  browser:   http://localhost:8080/[folder_kerja_anda]/map.  style  declarations.1.       .                                "Global  Imagery".  sebuah  peta  dihasilkan   melalui  integrasi  3  komponen  dasar.1.                          map.  simpan  dalam  folder  kerja.addLayer(imagery).     Seperti  yang  telah  disajikan  sebelumnya  pada  bagian  2. Kopi  kode  html  di  atas.opengeo.  dan  berinama    “map.org/geowebcache/service/wms".zoomToMaxExtent().                  </script>          </body>   </html>     1.  kita  akan  membahas  lebih  detil  ketiga  komponen   tersebut.

css"  type="text/css">   <style>               #map-­‐id  {     width:  512px. Map  Markup   Markup  untuk  peta  pada  contoh  sebelumnya  terdapat  pada  baris  kode  berikut:   <div  id="map-­‐id"></div>     Elemen  <div>  pada  kode  di  atas  akan  berperan  sebagai  kontainer  atau  tempat   untuk  menampilkan  peta.  kita  menggunakan  elemen  <div>  .  peta  yang  akan  disajikan  melalui  kontainer  yang   diberi  atribut  “map-­‐id”.2.       .  Pada  contoh   kode  sebelumnya. Pada  contoh  di  atas.1.  Pada  contoh  di  atas.  stylesheet  tersebut  dipanggil  dalam  baris  kode   sebagai  berikut:     <link rel="stylesheet"  href="openlayers/theme/default/style.   2.1.             }     </style>     Berdasarkan  kode  style  di  atas.  umumnya  style  disimpan   dalam  sebuah  file  “css”  yang  kemudian  dipanggil  secara  eksplisit  dalam  halaman   html.2. Map  Style   OpenLayer  hadir  dengan  sebuah  stylesheet  baku  yang  berkaitan  dengan  bagaimana   sebuah  map  dan  elemen  di  dalamnya  harus  disajikan/ditampilkan.  belum  ditetapkan  ukuran  dari  peta  yang  harus   dsajikan  dalam  browser.   Deklarasi  style  ini.                     height:  256px.  merupakan  bagian  dari  elemen  <head>    dari  sebuah   dokumen/halaman  html.  secara  explisit.  sebagai  berikut:   <link  rel="stylesheet"  href="openlayers/theme/default/style.  sebagai   penanda  dan  memudahkan  dalam  merujuknya.  memiliki  ukuran  lebar  512  piksel  dan  tinggi  256  piksel.  karenanya  kita  harus  menetapkan  ukuran  peta  dengan   membuat  style  baru  yang  berisi  definisi  dari  ukuran  peta  dan  dituliskan  di  dalam   elemen  style.css"   type="text/css">   Dalam  stylesheet  baku  tersebut.1.    Dalam  desain  aplikasi  web.   namun  dapat  pula  menggunakan  elemen  html  lainnya.  kontainer  tersebut  diberikan  sebuah  atribut  id.

    map.                imagery  =  new  OpenLayers.2. <script>               var  map  =  new  OpenLayers.   Baris-­‐baris  kode  berikutnya  berisi  perintah-­‐perintah  untuk  menampilkan  peta.  Untuk  menampilkan  peta.             map.                         {layers:  "bluemarble"}             ).org/geowebcache/service/wms".  Oleh  karena  itu.   var  map  =  new  OpenLayers.   sebagaimana  dapat  dilihat  dalam  contoh  sebelumnya.  peta  yang  dihasikan  akan  dikembalikan/ditempatkan  pada  atribut   dengan  nama  “map-­‐id”.opengeo.Map("map-­‐id").3.  kode-­‐kode  tersebut  diletakan  di  dalam  elemen   <script>.Layer.     .  Pada  contoh  di  atas.     Hal  penting  yang  harus  dipahami.WMS(                         "Global  Imagery".Layer.       "http://maps.Map("map-­‐id").                         http://maps.1.   </script>     Kode  inisialisasi  ini  memerlukan  library  OpenLayer.addLayer(imagery).  adalah  menyertakan  beberapa  baris   kode  inisialisasi.  library   OpenLayer  harus  dipanggil  terlebih  dahulu  dan  diletakan  dalam  elemen  <head>.addLayer(imagery). Map  Initialization   Langkah  selanjutnya  dalam  membuat  peta.               {layers:  "bluemarble"}     ).js"></script>   Mari  kita  lihat  lebih  detil  kode  inisialisasi  tersebut.  Dalam   contoh  ini.     map.zoomToMaxExtent().opengeo.  Pada  baris  pertama  tertulis.  Baris  kode  berikutnya  adalah  untuk  mengatur   nilai  pembesaran  (zoom).  minimal  satu  layer   harus  ditetapkan  dalam  kode  di  atas.WMS(               "Global  Imagery".  tertulis:  <script   src="openlayers/lib/OpenLayers.     Kode  ini  merupakan  perintah  untuk  membuat  sebuah  objek  peta  baru  dengan  nama   variable  “map”  dan  mengarahkan  letak/tempat  objek  peta  yang  dihasilkan.org/geowebcache/service/wms".  bahwa  tampilan  peta  akan  merupakan  koleksi   atau  kumpulan  dari  beberapa  layer.   sebagai  berikut:   var  imagery  =  new  OpenLayers.

html   4.osgeo.1. Developers  list  http://lists. Contoh-­‐contoh  penggunaan  OpenLayer:    http://openlayers.openlayers.org/dev/examples/   2.org/mailman/listinfo/openlayers-­‐users   4.org/apidocs/files/OpenLayers-­‐ js.     Beberapa  sumber  yang  bermanfa’at  untuk  eksplorasi  OpenLayer:   1. Sumber  dan  Referensi  OpenLayer   OpenLayer  kaya  adalah  library  yang  kaya  akan  fungsi-­‐fungsi  untuk  aplikasi   pemetaan  berbasis  web.org/   3. Bergabung  dalam  komunitas  OpenLayer:     4. Dokumen  Referensi  API:  http://dev.zoomToMaxExtent().org/mailman/listinfo/openlayers-­‐dev     .2. Users  list  http://lists.  yang  memungkinkan  developer   lainnya  melakukan  eksplorasi  jauh  dan  bahkan  memulai  membuatnya  dari  awal.   yang  secara  default  dalam  koordinat  geografis. Dokumentasi  OpenLayer:  http://docs.osgeo.2.map.  Developer  telah  menyusun  dan  memberikan  contoh-­‐contoh     dari  setiap  fungsi-­‐fungsi  yang  ada  dalam  OpenLayer.     2.     Perintah  di  atas  mendefinisikan  pembesaran  pada  nilai  “maximum  extent”  dari  peta.openlayers.

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master Your Semester with a Special Offer from Scribd & The New York Times

Cancel anytime.