Geoinformacja w sieciach komputerowych

Ćwiczenie 4 - OpenLayers

Instalacja OpenLayers  Zadanie 10 

OpenLayers - instalacja, przykładowa warstwa

Open Layers to dostępny na otwartej licencji skrypt w języku Javascript umożliwiający umieszczenie w prosty sposób na stronie internetowej dynamicznej mapy. Potrafi wyświetlić dane praktycznie z dowolnego źródła co umożliwia potraktowanie go jako interfejsu dla wszelkiego rodaju serwerów map. Jego zaletą jest ponadto brak konieczności instalacji na serwerze, dzięki czemu możliwe jest korzystanie z dowolnego typy usług hostingowych. Niestety wiąze sie z tym ograniczenie w korzystaniu z lokalnie umieszczonych zasobów - OL nie potrafi odczytać plików w formatach GIS, z wyjątkiem opartych na XML czyli KML i GML

Strona główna projektu znajduje się pod adresem: http://openlayers.org/, z niej też można pobrać ostatnią stabilną wersję. Można też skorzystać z następującego adresu http://openlayers.org/download/OpenLayers-2.7.zip

Po ściągnięciu archiwum należy je umieścić i rozpakować w dostępnym sieciowo katalogu (nazwę samego folderu można zamienić na prostszą - na przykład OL) a następnie na stronie gdzie będzie używany, wskazać odpowiednia scieżkę dostępu podobnie jak to miało miejsce w wypadku arkusza CSS:


<script src="ścieżka_dostępu/OpenLayers.js"></script>

Podobnie jak ścieżkę dostępu sam skrypt wykorzystujący OL wstawiamy w części nagłówkowej strony pomiędzy znacznikami <script>. Poniższy przykład generuje prostą mapkę z dwoma warstwami:


    <script type="text/javascript">
    
        // making this a global variable so that it is accessible for
        // debugging/inspecting in Firebug
        
         var map = null;
        

        function init(){

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

            var ol_wms = new OpenLayers.Layer.WMS(
                "OpenLayers WMS",
                "http://labs.metacarta.com/wms/vmap0",
                {layers: 'basic'}
            );

            var jpl_wms = new OpenLayers.Layer.WMS(
                "NASA Global Mosaic",
                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
                {layers: "landsat7"}
            );

            map.addLayers([ol_wms, jpl_wms]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.zoomToMaxExtent();
        }
    </script>

Mając zadeklarowaną funkcję musimy ją na stronie wywołać poprzez zmodyfikowanie znacznika body w następujący sposób:

   <body onload="init()">

Mapa zostaje wyświetlona w elemencie blokowym o identyfikatorze "map". Zatem należy taki element utworzyć w dowolnym miejscu strony, pamietając i zadeklarowaniu jego rozmiarów (proporcje mapy to 512x256).

ZADANIE 10. Umieść na stronie działające okno mapy. Znajdź i umieść jeszcze jedną warstwę.

Autor: Michał Rzeszewski, Instytut Geokologii i Geoinformacji, UAM Poznań, mail: mrzeszewski@gmail.com
Creative Commons License
Ten utwór jest dostępny na licencji Creative Commons Uznanie autorstwa-Użycie niekomercyjne-Na tych samych warunkach 2.5 Polska.