Selasa, 24 Mei 2016

MEMBUAT PETA BERBASIS WEB MENGGUNAKAN OPENLAYERS



MENGENAL OPENLAYERS, MEMBUAT PETA OPEN SOURCE BERBASIS WEB

OpenLayers adalah library Javascript murni yang digunakan untuk menampilkan data peta di berbagai web browser, yang sifatnya gratis dan Open Source. Artinya OpenLayers mampu menampilkan sumber peta dari GoogleMap, BingMap, YahooMap dan Server Peta Gratis yang berbasis WMS (World Map Server). OpenLayers tidak membutuhkan dependecies atau ketergantungan dengan Server, artinya jika suatu saat nanti ada Sumber Peta yang berbayar ditutup misalnya Bing Map atau Google Map, maka kita tidak perlu khawatir, OpenLayers mampu diubah agar mengambil sumber peta dari Map Server (Provider Peta) yang lain.
Beberapa keuntungan yang kita dapatkan sebagai Programmer atau Developer Web ketika memakai OpenLayers bersifat Open Source dan Free ini, antara lain :

1.    Membuat web dengan menampilkan Layer Peta dari berbagai Layanan Pemetaan seperti WMS (Web Map Service), GoogleMap, BingMap, YahooMap, dan OpenStreeMap secara bersamaan, dalam satu tampilan.
2.    Membuat web pemetaan tanpa perlu membayar lisensi sehingga biaya pembuatan web dapat ditekan seefisien mungkin dengan hasil seoptimal mungkin.
3.    Tanpa kekhawatiran Layanan Web Peta milik Perusahaan Software Komersial seperti GoogleMap, BingMap dan YahooMap yang tidak 100% Gratis bisa sewaktu-waktu menjadi berbayar penuh atau dimatikan layanannya oleh Perusahaan Software yang bersangkutan, karena dengan OpenLayers kita selalu bisa memakai OpenStreetMap dan WMS yang memiliki Layanan Free (Gratis).
4.    Mempunyai Aplikasi Peta yang memiliki fasilitas lengkap seperti mendukung Javascript, Base Map, Multi Layer, Navigasi (Zoom In, Zoom Out, Pan), Marker, Info Window, Popup, Draw Object Point, Polyline, Polygon dan masih banyak lagi.
Untuk menjalankan OpenLayers bisa kita download dahulu Package-nya di Web Official-nya disini.
Kemudian untuk mencobanya kita buat script HTML Javascript dengan nama base.html, letakkan di  openlayers/base.html, ketikkan kode program sebagai berikut :
<html>
<head>
  <title>WMS - OpenLayers</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
      <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map');
        var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
        map.addLayers([wms]);

        // Add layer switcher control
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.zoomToMaxExtent();
      </script>

</body>
</html>

File tersebut bisa dijalankan dengan Web Server, misal XAMPP, letakkan di folder xampp/htdocs/openlayers, atau dengan cukup meletakkan di direktori openlayers/ dan membuka langsung dengan klik dua kali sehingga tampil di WebBrowser.

Hasilnya :



Artikel Terkait Lainnya KOREKSI GEOMETRI DENGAN QUANTUM GIS

Tidak ada komentar:

Posting Komentar