OpenLayers

OpenLayers – otwarto‑źródłowa biblioteka JavaScript służąca do wyświetlania, manipulacji i analizy danych geoprzestrzennych w przeglądarkach internetowych. Projekt jest jednym z najpopularniejszych rozwiązań w dziedzinie GIS (Systemy Informacji Geograficznej) opartych na technologiach webowych.

Historia

Projekt został uruchomiony w 2006 roku przez firmę MetaCarta. Pierwsza wersja (0.1) pojawiła się publicznie w 2007 roku, a od tego czasu biblioteka przeszła liczne przeglądania, w tym przejście na licencję MIT w 2012 roku. Od wersji 3.0 (wydanej w 2015) OpenLayers przyjął nowoczesną architekturę opartą na modułach ES6.

Podstawowe cechy

• Obsługa licznych źródeł danych: WMS, WMTS, WFS, GeoJSON, KML, a także warstw wektorowych w formacie TopoJSON.
• Integracja z serwisami mapowymi typu OpenStreetMap, Google Maps, Bing Maps oraz z własnymi kafelkami.
• Wsparcie dla renderingu 2D i 3D (przy użyciu WebGL).
• Dynamiczna kontrola warstw, stylów i interakcji użytkownika (np. przesuwanie, przybliżanie, pomiar odległości).
• Rozbudowany system zdarzeń i możliwość rozbudowy poprzez wtyczki.
• Wbudowane narzędzia do projekcji współrzędnych i transformacji (obsługa EPSG:4326 oraz EPSG:3857).

Architektura

OpenLayers składa się z kilku warstw abstrakcji:

1. Źródła danych (Sources) – klasy odpowiedzialne za pobieranie danych z serwisów (np. ol/source/OSM, ol/source/Vector).
2. Warstwy (Layers) – obiekty prezentujące dane na mapie (np. ol/layer/Tile, ol/layer/Vector).
3. Widok (View) – definiuje centrum, poziom przybliżenia i projekcję mapy.
4. Kontrole (Controls) – gotowe elementy interfejsu (np. pasek skalowania, przyciski zoomu).
5. Interakcje (Interactions) – obsługa zdarzeń użytkownika (np. rysowanie, edycja).

Podstawowy przykład

Poniżej przedstawiono minimalny kod HTML, w którym użyto biblioteki OpenLayers do wyświetlenia mapy bazującej na OpenStreetMap:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mapa OpenLayers</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css">
  <style>
    #map { width: 100%; height: 400px; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script type="module">
    import 'https://cdn.jsdelivr.net/npm/ol@latest/ol.css';
    import Map from 'https://cdn.jsdelivr.net/npm/ol@latest/Map.js';
    import View from 'https://cdn.jsdelivr.net/npm/ol@latest/View.js';
    import TileLayer from 'https://cdn.jsdelivr.net/npm/ol@latest/layer/Tile.js';
    import OSM from 'https://cdn.jsdelivr.net/npm/ol@latest/source/OSM.js';

    const map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:3857'
      })
    });
  </script>
</body>
</html>

Zastosowania

OpenLayers jest wykorzystywany w wielu projektach, m.in. w:

• portalach danych otwartych,
• systemach monitoringu środowiska,
• aplikacjach miejskich (Smart City),
• systemach zarządzania zasobami (np. Asset Management).

Licencja i rozwój

Biblioteka jest udostępniona na licencji MIT, co pozwala na swobodne użycie w projektach komercyjnych i niekomercyjnych. Rozwój prowadzony jest przez społeczność programistów oraz organizacje współpracujące, a kod źródłowy znajduje się w repozytorium GitHub (link wewnętrzny do artykułu o GitHub).

Zobacz także

• Leaflet – lekka biblioteka mapowa JavaScript
• Mapbox GL JS – biblioteka do renderingu 3D map
• QGIS – desktopowy system GIS
• GeoServer – serwer udostępniający dane geoprzestrzenne