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(  

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

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

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

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

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.