GIS integrované využití 6 sem podtitul nebo stručně obsah. OpenLayers

HTML
DOWNLOAD

Rozměr: px

Začít zobrazení ze stránky:

Download "GIS integrované využití 6 sem podtitul nebo stručně obsah. OpenLayers"

Eva Hrušková
před 6 lety
Počet zobrazení:

1 OpenLayers

2 strana 2 Co je to OpenLayers? l Open-Source projekt l JavaScriptová Knihovna l Jednoduché řešení pro vložení dynamické interaktivní mapy do webové stránky

3 strana 3 HTML Stránka <html> <head> <title>titulek stránky</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> </body> </html> Obsah stránky

4 strana 4 HTML Stránka

5 strana 5 Co je to OpenLayers? Důležité součásti: /OpenLayers-2.10 OpenLayers.js /img /theme/default/style.css

6 strana 6 Import souborů Knihovna: <script src="openlayers-2.10/openlayers.js"></script> Styly: <link rel="stylesheet" type="text/css" href="/theme/ default/style.css"/>

7 strana 7 Vložení elementu do stránky <div id="map"> </div> <div style="width:400px; height:400px" id="map"> </div> <div style="width:100%; height:100%" id="map > </div>

8 strana 8 Vytvoření mapy Google <script type="text/javascript"> var map; window.onload = function() { map = new OpenLayers.Map("map ) } </script>

9 strana 9 Prázdná mapa

strana 10 Definování obsahu mapy přidání vrstvy Google <script src="http://maps.google.

10 strana 10 Definování obsahu mapy přidání vrstvy Google <script src=" file=api&v=2&key=klic"> </script>

11 strana 11 Definování obsahu mapy přidání vrstvy Google var gmap = new OpenLayers.Layer.Google( "Google Streets", // the default {numzoomlevels: 20} ); map.addlayer(gmap); map.zoomtomaxextent();

12 strana 12 Prázdná mapa

13 strana 13 Definování obsahu mapy další odklady var gphy = new OpenLayers.Layer.Google( "Google Physical", {type: G_PHYSICAL_MAP} ); var gmap = new OpenLayers.Layer.Google( "Google Streets", // the default {numzoomlevels: 20} ); var ghyb = new OpenLayers.Layer.Google( "Google Hybrid", {type: G_HYBRID_MAP, numzoomlevels: 20} ); var gsat = new OpenLayers.Layer.Google( "Google Satellite", {type: G_SATELLITE_MAP, numzoomlevels: 22} );

14 strana 14 Definování obsahu mapy Přidání vrstev do mapy: map.addlayers([ghyb, gphy, gmap, gsat]); Přepínač vrstev: map.addcontrol(new OpenLayers.Control.LayerSwitcher());

15 strana 15 Definování obsahu mapy ovládací prvky map = new OpenLayers.Map("map", { units: "m", controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher ({"ascending":false}), ); ] } new OpenLayers.Control.Permalink(), new OpenLayers.Control.ScaleLine(), new OpenLayers.Control.Permalink("permalink"), new OpenLayers.Control.MousePosition(), new OpenLayers.Control.OverviewMap()

16 strana 16 Prázdná mapa

17 strana 17 Přidání vlastních bodů var markers = new OpenLayers.Layer.Markers( "Markers" ); map.addlayer(markers); markers.addmarker(new OpenLayers.Marker(new OpenLayers.LonLat( , )));

18 strana 18 Prázdná mapa

19 strana 19 Přidání vlastních bodů s vlastním obrázkem var size = new OpenLayers.Size(50,50); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h/2); var icon = new OpenLayers.Icon( URL odkaz", size, offset); markers.addmarker(new OpenLayers.Marker(new OpenLayers.LonLat( , ), icon.clone()));

20 strana 20 Prázdná mapa

strana 21 Přidání WMS vrstvy ŠLP Křtiny http://mapserver-slp.mendelu.cz/cgi-bin/mapserv?

21 strana 21 Přidání WMS vrstvy ŠLP Křtiny local/slp/krtinywms.map slp_dmt = new OpenLayers.Layer.WMS( "ŠLP - DMT", " {layers: "dmt"}); map.addlayer(slp_dmt);

22 strana 22 Prázdná mapa

23 strana 23 Celoobrazovkový režim <div style="width:100%; height:100%" id="map"> </div>

24 GIS integrované využití 6 Celoobrazovkový režim strana 24

25 OpenLayers ukázky projektů

26 strana 26 WMSBinder

27 strana 27 MapShake

28 strana 28 MapShake

29 strana 29 ikatastr -

30 strana 30 Užitečné odkazy

31 strana 31 Děkuji za Vaši pozornost! Kontakt: Ústav geoinformačních technologií Lesnická a dřevařská fakulta Mendelova univerzita v Brně Zemědělská 3 / Brno , klimanek@mendelu.cz ugt.mendelu.cz

Podobné dokumenty

PŘEHLED A MOŽNOSTI VYUŽITÍ WEBOVÝCH MAPOVÝCH SLUŽEB

ÚTVAR ROZVOJE HLAVNÍHO MĚSTA PRAHY PŘEHLED A MOŽNOSTI VYUŽITÍ WEBOVÝCH MAPOVÝCH SLUŽEB Ústav rozvoje hlavního města Prahy publikuje prostřednictvím ArcGIS Serveru mnohé webové mapové služby (v souřadnicovém