Scribd Logo
Unggah

Selamat datang di Scribd!

  • Tutorial Dasar Menggunakan Open Layer Dalam Bahasa Indonesia PDF

    Diunggah oleh

    Efen Seko
    66 tayangan5 halaman

    Judul Asli

    140917624-Tutorial-Dasar-Menggunakan-Open-Layer-dalam-Bahasa-Indonesia.pdf

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    66 tayangan5 halaman

    Tutorial Dasar Menggunakan Open Layer Dalam Bahasa Indonesia PDF

    Diunggah oleh

    Efen Seko

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    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(
    "Global Imagery", "http://maps.opengeo.org/geowebcache/service/wms",
    {layers: "bluemarble"} ); map.addLayer(imagery);
    map.zoomToMaxExtent(); </script> </body> </html>

    1. Kopi kode html di atas, simpan dalam folder kerja, dan berinama “map.html”.
    2. Buka file tersebut menggunakan web browser:
    http://localhost:8080/[folder_kerja_anda]/map.html
    Tampilan dalam jendela
    web browser.

    2.1. Bagian dari Peta


    Seperti yang telah disajikan sebelumnya pada bagian 2.1.1, sebuah peta dihasilkan
    melalui integrasi 3 komponen dasar, yakni: markup, style declarations, dan initialization
    code. Selanjutnya, kita akan membahas lebih detil ketiga komponen tersebut.
    2.1.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. Pada contoh di atas, kita menggunakan elemen <div> , namun dapat
    pula menggunakan elemen html lainnya.
    Pada contoh di atas, kontainer tersebut diberikan sebuah atribut id, sebagai penanda dan
    memudahkan dalam merujuknya.
    2.1.2. Map Style
    OpenLayer hadir dengan sebuah stylesheet baku yang berkaitan dengan bagaimana sebuah
    map dan elemen di dalamnya harus disajikan/ditampilkan. Pada contoh kode sebelumnya,
    secara explisit, stylesheet tersebut dipanggil dalam baris kode sebagai berikut:
    <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">

    Dalam stylesheet baku tersebut, belum ditetapkan ukuran dari peta yang harus dsajikan
    dalam browser, karenanya kita harus menetapkan ukuran peta dengan membuat style baru
    yang berisi definisi dari ukuran peta dan dituliskan di dalam elemen style, sebagai
    berikut:
    <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css"> <style> #map-­‐id { width:
    512px; height: 256px; } </style>

    Berdasarkan kode style di atas, peta yang akan disajikan melalui kontainer yang diberi
    atribut “map-­‐id”, memiliki ukuran lebar 512 piksel dan tinggi 256 piksel.
    Deklarasi style ini, merupakan bagian dari elemen <head> dari sebuah
    dokumen/halaman html. Dalam desain aplikasi web, umumnya style disimpan dalam
    sebuah file “css” yang kemudian dipanggil secara eksplisit dalam halaman html.
    2.1.3. Map Initialization
    Langkah selanjutnya dalam membuat peta, adalah menyertakan beberapa baris kode
    inisialisasi. Pada contoh di atas, kode-­‐kode tersebut diletakan di dalam elemen <script>.
    <script> var map = new OpenLayers.Map("map-­‐id"); imagery = new OpenLayers.Layer.WMS(
    "Global Imagery", http://maps.opengeo.org/geowebcache/service/wms", {layers: "bluemarble"}
    ); map.addLayer(imagery); map.zoomToMaxExtent(); </script>

    Kode inisialisasi ini memerlukan library OpenLayer. Oleh karena itu, library OpenLayer
    harus dipanggil terlebih dahulu dan diletakan dalam elemen <head>, sebagaimana dapat
    dilihat dalam contoh sebelumnya, tertulis: <script
    src="openlayers/lib/OpenLayers.js"></script>
    Mari kita lihat lebih detil kode inisialisasi tersebut. Pada baris pertama tertulis,
    var map = new OpenLayers.Map("map-­‐id");

    Kode ini merupakan perintah untuk membuat sebuah objek peta baru dengan nama
    variable “map” dan mengarahkan letak/tempat objek peta yang dihasilkan. Dalam contoh
    ini, peta yang dihasikan akan dikembalikan/ditempatkan pada atribut dengan nama
    “map-­‐id”.
    Baris-­‐baris kode berikutnya berisi perintah-­‐perintah untuk menampilkan peta, sebagai
    berikut:
    var imagery = new OpenLayers.Layer.WMS( "Global Imagery",
    "http://maps.opengeo.org/geowebcache/service/wms", {layers: "bluemarble"} );
    map.addLayer(imagery);

    Hal penting yang harus dipahami, bahwa tampilan peta akan merupakan koleksi atau
    kumpulan dari beberapa layer. Untuk menampilkan peta, minimal satu layer harus
    ditetapkan dalam kode di atas. Baris kode berikutnya adalah untuk mengatur nilai
    pembesaran (zoom).
    map.zoomToMaxExtent();

    Perintah di atas mendefinisikan pembesaran pada nilai “maximum extent” dari peta, yang
    secara default dalam koordinat geografis.

    2.2. Sumber dan Referensi OpenLayer


    OpenLayer kaya adalah library yang kaya akan fungsi-­‐fungsi untuk aplikasi pemetaan
    berbasis web. 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.
    Beberapa sumber yang bermanfa’at untuk eksplorasi OpenLayer:
    1. Contoh-­‐contoh penggunaan OpenLayer: http://openlayers.org/dev/examples/
    2. Dokumentasi OpenLayer: http://docs.openlayers.org/
    3. Dokumen Referensi API: http://dev.openlayers.org/apidocs/files/OpenLayers-­‐
    js.html
    4. Bergabung dalam komunitas OpenLayer:
    4.1. Users list http://lists.osgeo.org/mailman/listinfo/openlayers-­‐users
    4.2. Developers list http://lists.osgeo.org/mailman/listinfo/openlayers-­‐dev

    Anda mungkin juga menyukai