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(  

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

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

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

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

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer: Get 4 months of Scribd and The New York Times for just $1.87 per week!

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