../../_images/logo_openlayers.png ../../_images/OSGeo_project.png

OpenLayers gyorstalpaló

Ez a gyorstalpaló a munka elkezdéséhez szükséges alapvető lépéseket tartalmazza az OpenLayers-el: alaptérkép létrehozása, raszter és vektor réteg hozzáadása és az elemek stílusának beállítása

Az OpenLayers egyszerűvé teszi dinamikus térképek hozzáadását bármelyik honlaphoz. Térkép csempéket, vektor adatokat és szimbólumokat tud megjeleníteni tetszőleges forrásból. Az OpenLayers-t mindenféle térinformatikai adat használatára fejlesztették. Teljesen szabad, nyílt forráskódú JavaScript, melyet a 2-záradék BSD licenc (úgyis ismert mint FreeBSD) alatt bocsájtanak ki.

Alapfunkciók

Mielőtt elkezdenénk a munkát az OpenLayers-el segít, ha megértjük az alapkoncepcióját:

Térkép

A térkép az OpenLayers egy alapkomponense. Egy térkép megjelenítéséhez egy view, egy vagy több réteg és egy cél konténer szükséges.

View (nézet)

A view határozza meg, hogyan jelenítjük meg a térképet. Arra használjuk, hogy beállítsuk a felbontást, a középpont helyét, stb. Ez olyan mint egy kamera melyen keresztül a térkép tartalmát nézzük.

Rétegek

Rétegek egymás alá/fölé helyezve adhatók a térképhez. A réteg vagy raszter réteg (képek) vagy vektor réteg (pontok/vonalak/felületek) lehet.

Forrás

Minden rétegnek van egy forrása, mely tudja hogyan kell a réteg tartalmát betölteni. Vektor rétegek esetén a forrás a *format osztályt használva olvassa be az adatokat (például GeoJSON vagy KML) és mint a térképi elemek (features) halmazát szolgáltatja a réteget.

Features (térképelemek)

A térképi elemek a világban megjelenő dolgokat reprezentálnak és különböző geometria*ként (mint pont, vonal vagy felület) jeleníthetjük meg őket, egy adott *stílus használatával, mely a kinézetüket határozza meg (vonalvastagság, kitöltési szín, stb.).

Egy alaptérkép létrehozása

Hozzon létre egy fájl például a /home/user/ könyvtárban basic-map.html névvel és másolja be a következő tartalma a fájlba.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Basic map</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <!-- OpenLayers CSS -->
        <link rel="stylesheet" href="http://localhost/openlayers/dist/ol.css" type="text/css">

        <!-- Custom styles -->
        <style>
          #map {
            width: 100%;
            height: 500px;
          }
        </style>
    </head>
    <body>
        <h1>Basic map</h1>

        <div id="map"></div>

        <!-- OpenLayers JS-->
        <script src="http://localhost/openlayers/dist/ol.js" type="text/javascript"></script>

        <!-- App code -->
        <script>
          var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            view: new ol.View({
              center: ol.proj.fromLonLat([2.1833, 41.3833]),
              zoom: 6
            })
          });
        </script>

    </body>
</html>

Most próbálja megnyitni a basic-map.html fájlt a böngésző programból a File->Open File használatával. A következőt kellene látnia:

../../_images/openlayers-basic-map.png

Megjegyzés:

  • A kód követi a legjobb gyakorlatot, a JavaScript kód betöltése a html fájl végén.

  • Egy OpenLayers térképet egy HTML DOM elemhez kapcsolunk, ezért létrehoztunk egy <div> elemet, a map azonosítóval (id).

  • A térképeket az olMap osztály reprezentálja. A DOM elemet, melyben a térképet megjelentjük a target tulajdonság beállításával adjuk meg.

  • OpenLayers a térképrajzolást két különböző mechanizmus felhasználásával teszi lehetővé: a Canvas és a WebGL. Az alapértelmezett megjelenítő a canvas.

  • A térkép a rétegekben tárolt adatokat mutatja, így egy csempékből álló réteget hoztunk létre, melyet az ol.layer.Tile osztály reprezentál, ez a tartalmat az OpenStreetMap projektből tölti be az ol.source.OSM` forrás osztály felhasználásával.

  • Végül a kamera kezdeti pozícióját az ol.View osztály használatával állítjuk be, a kezdeti nagyítást és a középpontot.

Raszter rétegek hozzáadása

A leggyakrabban használt raszter rétegek a csempe rétegek, melyeket például az OpenStreetMap, Stamen, Bing, stb. szolgáltat. A csempe rétegeket az ol.layer.Tile reprezentálja és egy olyan forrást kell használniuk, mely tudja hogyan tölthetők be a csempék egy adott szolgáltatótól, mint például az ol.source.OSM vagy ol.source.Stamen:

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var stamen = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'watercolor'
  })
});

Kétféle módon adhatunk rétegeket a térképhez:

  • Az ol.Map létrehozatalánál a layers tulajdonság használatával:

    var map = new ol.Map({
  ...
  layers: [osm, stamen]
  ...
});

  • Manuális hozzáadás a map.addLayer() metódussal:

    map.addLayer(osm);
map.addLayer(stamen);

Vektor rétegek hozzáadása

A vektor rétegeket az ol.layer.Vector osztály reprezentálja és a vektor formátum olvasására alkalmas forrást kell használnia mint például ol.source.GeoJSON, ol.source.KML vagy ol.source.TopoJSON.

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    url: 'url_to_geojson_file'
  })
});

// Add Vector layer to map
map.addLayer(vectorLayer);
../../_images/openlayers-vector.png

Megjegyzés, az előző kódban az url_to_file meg kell változtatnunk, hogy egy megfelelő GeoJSON fájlra mutasson, melyet a szerverünkön helyeztünk el. Vegye figyelembe, hogy a JavaScript biztonsági előírások megakadályozzák az adatok külső URL-ről, egy másik szerverről vagy portról betöltését (más néven: ugyanaz a forrás szabály).

Térképi elemeket manuálisan is létrehozhatunk. Ebben az esetben a térképi elemet reprezentáló geometriát kell létrehoznunk:

// Geometries
var point = new ol.geom.Point(
    ol.proj.transform([3,50], 'EPSG:4326', 'EPSG:3857')
);
var circle = new ol.geom.Circle(
    ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
    1000000
);

// Features
var pointFeature = new ol.Feature(point);
var circleFeature = new ol.Feature(circle);

// Source
var vectorSource = new ol.source.Vector({
    projection: 'EPSG:4326'
});
vectorSource.addFeatures([pointFeature, circleFeature]);

// Vector layer
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

// Add Vector layer to map
map.addLayer(vectorLayer);

Stílus alkalmazása az elemekre

Egy vektor réteg térképi elemeinek stílusát beállíthatjuk. A stílust a kitöltés, a vonalvastagság, szöveg és kép határozza meg, melyek mind opcionálisak. Továbbá a stílust alkalmazhatjuk a teljes rétegre, mely meghatározza az összes tartalmazott térképi elem stílusát, vagy egyes térképi elemekre.

A stílust az ol.style.Style  osztály reprezentálja, melynek fill, stroke, text és image beállítható tulajdonságai vannak. A következő példa a világ országait zöld kitöltéssel és zöld határvonalakkal mutatja be.

../../_images/openlayers-styling.png 
var limitsLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/world_limits.json',
    format: new ol.format.TopoJSON(),
    projection: 'EPSG:3857'
  }),
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(55, 155, 55, 0.3)'
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(55, 155, 55, 0.8)',
      width: 1
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: 'rgba(55, 155, 55, 0.5)',
      })
    })
  })
});

A kódban egy TopoJSON fájlt töltöttünk be és a style tulajdonságon keresztül színeztük. A fill és stroke tulajdonságokat a vonalakhoz és felületekhez kívántra állítottuk és egy image-t (ebben az esetben egy kör) használtunk a pont térképi elemekhez.

Munka az eseményekkel

A legtöbb komponens, mint például a térkép, réteg vagy vezérlők eseményeket hoznak létre, hogy a változásról értesítést küldjenek. Például értesülhetünk minden alkalommal arról, ha a térképen az egér elmozdul, vagy amikor egy térképi elemet adtak egy vektor réteghez, stb.

Eseményekre könnyen regisztrálhatunk egy objektummal az on() metódussal és visszavonhatjuk a regisztrációt az un() metódussal.

A következő kód a térkép példányhoz regisztrál egy eseményt és értesítést kap minden esetben, amikor az egérmutató elmozdul. A callback függvényben megkapjuk az egérmutató koordinátáit és a böngésző konzolba kiírjuk két különböző vetületben.

map.on('pointermove', function(event) {
  var coord3857 = event.coordinate;
  var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');

  console.log(coord3857, coord4326);
});

Mi a következő?

Néha a példák és a forráskódjuk megtekintése a leggyorsabb módja annak, hogy kitaláljuk, hogyan működik az OpenLayers További OpenLayers információkat itt talál: