OpenLayers

OpenLayers logo

OpenLayers je knihovna v jazyce JavaScript, pomocí které lze vytvářet webové mapové aplikace. Jedná se o velice komplexní knihovnu schopnou zobrazovat velké množství formátů dat a služeb - ať už proprietárních, tak těch postavených na standardech a technických normách.

V současné době se pracuje na zcela nové verzi knihovny OpenLayers 3, která se od současné stabilní verze značně liší. Tento příklad vychází stále ještě ze současné stabilní verze OpenLayers 2.13.

Poznámka

Uvedený příklad si můžete zobrazit v prohlížeči a vidět tak celý jeho zdrojový kód.

Inicializace

Nejdříve musíme připravit webovou stránku, aby obsahovala element s identifikátorem map, do kterého chceme zobrazit mapu. Dále se potřebujeme odkázat na knihovnu OpenLayers.

Poznámka

Protože zobrazujeme vektorová data, je potřeba použít malý program instalovaný na serveru, tzv. „proxy“, který požadavky směřující na vzdálený server přesměruje ze serveru lokálního. Více viz Cross-site scripting.

OpenLayers (na rozdíl od Leaflet) umožňují kompletní práci se souřadnicovými systémy na straně klienta (webového prohlížeče). V praxi to znamená, že např. vstupní data mohou být v souřadnicovém systému S-JTSK EPSG:5514, ale jsou zobrazena na podkladové mapě v souř. systému „web mercator“ EPSG:3857. To je možné díky knihovně Proj4js. Tato knihovna se ale v poslední době značně mění. V její starší verzi kompatibilní s OpenLayers 2 není bohužel korektně implementováno Křovákovo zobrazení. Proto se v tomto příkladu odkazujeme na verzi Proj4js na národním geoportálu INSPIRE.

        <script type="text/javascript" src="ol2/lib/OpenLayers.js"></script>
<body onload="init()">
	<div id="map" style="width: 600px; height: 400px"></div>
</body>

Po načtení stránky (onload parametry v elementu body) se spustí funkce init().

Mapa

V dalším kroku vytvoříme funkci init(), ve které vytvoříme mapový objekt a vložíme do připraveného elementu map:

        var init = function() {
                //OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

                // vytvoříme objekt mapy
		var map = new OpenLayers.Map('map')

Vrstvy

Dále přidáme do mapy dlaždicovanou vrstvu ze zdroje OpenStreetMap. OpenLayers pro nás mají vrstvu speciálně připravenou, stačí ji jen použít. Tato vrstva je v OpenLayers brána jako základní, od ní jsou odvozeny některé charakteristiky celé mapy.

                // nastavíme střed a přiblížení
                map.setCenter(
                    new OpenLayers.LonLat(14.429517, 50.162900).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 13);

Mapě byl nastaven pohled se středem na zeměpisných souřadnicích 50.16, 14.43 a úroveň přiblížení 13.

Poznámka

V příkladu je vidět, že souřadnice jsou transformovány ze souřadnicového systému WGS-84 (EPSG:4326) do souřadnicového systému mapy - což je tzv. Spherical Mercator (EPSG:3857), který se využívá např. ve službě Google Maps.

Dále přidáme letecký snímek námi vypublikované služby WMS s leteckým snímkem.

                // přidáme námi vypublikovanou vrstvu WMS s leteckým snímkem
                var ortofoto = new OpenLayers.Layer.WMS("Ortofoto", "/services/vugtkwms",
                    {
                        layers: 'ortofoto_local',
                        format: 'image/jpeg'
                    },
                    {
                        projection: new OpenLayers.Projection("EPSG:3857"),
                        attribution: "Letecký snímek VUGTK"
                    });
                map.addLayer(ortofoto);

Vrstva WFS

A nakonec WFS vrstvu s vektorovými daty budov z námi předem nakonfigurované služby WFS.

                // přidáme námi vypublikovanou vrstvu WFS s vektorovými daty
                var wfs = new OpenLayers.Layer.Vector("Budovy", {
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    projection: new OpenLayers.Projection("EPSG:3857"),
                    protocol: new OpenLayers.Protocol.WFS({
                    version: "1.1.0",
                    srsName: "EPSG:3857",
                    url: "/services/vugtkwfs",
                    featureNS :  "http://www.tinyows.org/",
                    featureType: "mystavebniobjekty",
                    geometryName: "originalnihranice",
                    schema: "/services/vugtkwfs?service=wfs&request=DescribeFeatureType&version=1.1.0&typename=tows:mystavebniobjekty"
                    })
                });

Poznámky

[1]Příklady OpenLayers http://openlayers.org/dev/examples/
[2]Dokumentace OpenLayers http://docs.openlayers.org/
[3]API dokumentace http://dev.openlayers.org/releases/OpenLayers-2.13.1/doc/apidocs/files/OpenLayers-js.html