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(  

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

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

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

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

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.