P. 1
Tutorial Dasar Menggunakan Open Layer dalam Bahasa Indonesia

Tutorial Dasar Menggunakan Open Layer dalam Bahasa Indonesia

|Views: 943|Likes:
Published by hanjuang2004
Tutorial dasar menggunakan Open Layer dalam Bahasa Indonesia.
Tutorial dasar menggunakan Open Layer dalam Bahasa Indonesia.

More info:

Published by: hanjuang2004 on May 12, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

06/17/2014

pdf

text

original

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

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

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

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->