Εγχειρίδιο Γρήγορης Εκκίνησης OpenLayers¶

Δημιουργώντας τον πρώτο σας Χάρτη¶

Tο OpenLayers API έχει δύο θεματικές ενότητες τις οποίες είναι απαραίτητο να κατανοήσετε για να μπορέσετε να δημιουργήσετε τον πρώτο σας χάρτη:το ‘Map’ (Χάρτης) και το ‘Layer’ (θεματικό επίπεδο). Σε ένα στοιχείο ‘Map’ του OpenLayers αποθηκεύονται πληροφορίες αναφορικά με το προκαθορισμένο σύστημα αναφοράς, τα όρια της περιοχής, τις μονάδες κτλ. Μέσα στο χάρτη, τα δεδομένα προβάλλονται μέσω θεματικών επιπέδων. Ένα θεματικό επίπεδο είναι μια πηγή δεδομένων – πληροφορίων για το πώς το OpenLayers θα πρέπει να ζητήσει τα δεδομένα και να τα προβάλλει.

Δημιουργώντας HTML¶

Σχεδιάζοντας έναν προβολέα χαρτών σε OpenLayers απαιτείται η δημιουργία ενός HTML εγγράφου στο οποίο και θα εμφανίζεται . Το OpenLayers υποστηρίζει την τοποθέτηση ενός χάρτη μέσα σε σχεδόν οποιοδήποτε στοιχείο HTML της σελίδας σας.

Επιπρόσθετα ενός μοναδικού HTML στοιχείου, απαιτείται να περιληφθεί ένα script tag το οποίο θα περικλείει τη βιβλιοθήκη του OpenLayers στη σελίδα.

<html>
<head>
  <title>OpenLayers Example</title>
    <script src="http://localhost/OpenLayers-2.9.1/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
    </body>
</html>

Παράδειγμα 1: Δημιουργώντας την πρώτη σας HTML σελίδα

Δημιουργώντας τον Προβολέα Χαρτών¶

Για να δημιουργήσετε το viewer, θα πρέπει πρώτα να δημιουργήσετε ένα χάρτη. Ο κατασκευαστής OpenLayers.Map απαιτεί μια είσοδο: Η είσοδος αυτή πρέπει να είναι είτε ένα HTML στοιχείο είτε ο κωδικός (ID) του. Αυτό είναι το στοιχείο μέσα στο οποίο θα τοποθετηθεί ο χάρτης.

var map = new OpenLayers.Map('map');

Παράδειγμα 2: Κατασκευαστής Χάρτη

Το επόμενο βήμα στη δημιουργία ενός διαδικτυακού προβολέα χαρτών είναι η προσθήκη ενός Layer στο χάρτη. Το OpenLayers υποστηρίζει διάφορες πηγές δεδομένων, από το WMS μέχρι το Yahoo! Χάρτες στο WorldWind. Σε αυτό το παράδειγμα, χρησιμοποιείται ένα επίπεδο WMS. Το επίπεδο WMS είναι ένα παράδειγμα που το παρέχει η MetaCarta.

var wms = new OpenLayers.Layer.WMS(
  "WMS",
  "http://localhost/cgi-bin/qgis_mapserv.fcgi",
  {
  'map': '/usr/local/share/qgis/QGIS-NaturalEarth-Example.qgs',
  'layers':'HYP_50M_SR_W,10m_lakes,10m_rivers_lake_centerline'} );
map.addLayer(wms);

Παράδειγμα 3: Κατασκευαστής Επιπέδου

Η πρώτη παράμετρος σε αυτό τον κατασκευαστή είναι το όνομα του Layer, το οποίο χρησιμοποιείται για μερικούς σκοπούς προβολής. Η δεύτερη παράμετρος είναι το URL του εξυπηρετητή WMS. Η τρίτη παράμετρος είναι ένα αντικείμενο που περιέχει τις παραμέτρους που θα επισυναφθούν στην αίτηση για WMS.

Τέλος, για να μπορέσετε να προβάλλετε το χάρτη σας, πρέπει να ορίσετε ένα κέντρο και ένα επίπεδο εστίασης. Για να μπορέσετε να εστιάσετε το χάρτη ώστε να ταιριάζει στο παράθυρο, μπορείτε να χρησιμοποιήσετε τη συνάρτηση zoomToMaxExtent, η οποία πρόκειται να εστιάσει κατά το δυνατόν πλησιέστερα, ενώ παράλληλα “ταιριάζει” τα πλήρη όρια στα πλαίσια του παραθύρου.

Τοποθετώντας τα όλα μαζί¶

Το ακόλουθο τμήμα κώδικα τοποθετεί όλα τα τμήματα μαζί για να δημιουργήσει έναν προβολέα χαρτών OpenLayers.

<html>
<head>
  <title>OpenLayers Example</title>
    <script src="http://localhost/OpenLayers-2.9.1/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(
          "WMS",
          "http://localhost/cgi-bin/qgis_mapserv.fcgi",
          {
          'map': '/usr/local/share/qgis/QGIS-NaturalEarth-Example.qgs',
          'layers':'HYP_50M_SR_W,10m_lakes,10m_rivers_lake_centerline'} );
        map.addLayer(wms);
        map.zoomToMaxExtent();
      </script>

</body>
</html>

Παράδειγμα 4: Πλήρης HTML και Javascript για έναν απλό περιηγητή WMS

Προσθέτοντας ένα επίπεδο WMS¶

Τα επίπεδα WMS έχουν τη δυνατότητα να επικαλύπτονται από άλλα επίπεδα WMS που βρίσκονται στην ίδια προβολή. Υπάρχουν διάφοροι τρόποι για να επισημανθεί ένα επίπεδο: ως επίθεμα (overlay), αντί ως βάση (base). Με το WMS, ο καλύτερος τρόπος να γίνει αυτό, είναι θέτοντας στην παράμετρο transparent’ (διαφάνεια) την τιμή ‘true’. Το παράδειγμα εδώ χρησιμοποιεί ένα WMS που αναπαριστά τα σύνορα των κρατών,για να επιδείξει την επιθεση ενός διαφανούς WMS.

var twms = new OpenLayers.Layer.WMS( "World Map",
    "http://world.freemap.in/cgi-bin/mapserv?",
    { map: '/www/freemap.in/world/map/factbooktrans.map',
      transparent: 'true', layers: 'factbook'}
    );
map.addLayer(twms);

Παράδειγμα 5: Πώς να προσθέσετε ένα διαφανές επίθεμα WMS στο χάρτη σας.

Η χρήση της παραμέτρου transparent: ‘true’ θέτει αυτόματα δύο ακόμα παραμέτρους:

Παράμετρος format. Η παράμετρος format του WMS layer είναι ρυθμισμένη σε image/png εάν ο περιηγητής υποστηρίζει διαφανείς PNG εικόνες. (Αυτοί είναι όλοι οι περιηγητές εκτός του Internet Explorer 6.) Στον Internet Explorer 6, αυτό αντίστοιχα θα είναι ρυθμισμένο σε image/gif.

Η επιλογή isBaseLayer. Η επιλογή isBaseLayer ελέγχει εάν το θεματικό επίπεδο μπορεί να προβληθεί την ίδια στιγμή παράλληλα με άλλα. Αυτή η επιλογή έχει προκαθορισμένα την τιμή false για το θεματικό επίπεδο WMS, αλλά θέτοντας την επιλογή transparent σε true αλλάζει αυτόματα και αυτή σε true.

Προσθέτοντας διανυσματικές επισημάνσεις στο Χάρτη¶

Για να προσθέσετε μια μοναδική επισήμανση σε ένα μήκος και πλάτος του χάρτη, μπορείτε να χρησιμοποιήσετε ένα Vector Layer(διανυσματικό θεματικό επίπεδο) για να προθέσετε ένα επίθεμα.

var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
var feature = new OpenLayers.Feature.Vector(
 new OpenLayers.Geometry.Point(-71, 42),
 {some:'data'},
 {externalGraphic: 'img/marker.png', graphicHeight: 21, graphicWidth: 16});
vectorLayer.addFeatures(feature);
map.addLayer(vectorLayer);

Αυτό είναι μια απλή επίδειξη – περισσότερες πληροφορίες είναι διαθέσιμες για επιθέματα, πως μπορείτε να αλληλεπιδράσετε με αυτά και πώς να τα ελέγξετε και να τα μορφοποιήσετε, στην τεκμηρίωση του OpenLayers στο openlayers.org.