2 prz

809 views
701 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
809
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2 prz

  1. 1.  Dnes práce na localhost Postačí notepad, netbeans … Nažhavit stroje
  2. 2.  Frontend Client side Zobrazení rastrových a vektorových dat Interakce s mapou
  3. 3.  JS knihovna BSD License Nejpoužívanější knihovna Aktuální verze 2.12 „Call for Funding“ na verzi 3
  4. 4.  Musí se vybrat 8 mil. Kč Kdo přispěje 500 tis. kč tak může určovat směr vývoje
  5. 5.  Konec keců Nastartováno? Netbeans?
  6. 6. http://ligeo.mostar.cz/tut/2/2zip.zipOdkaz na stáhnutí dnešních ukázek
  7. 7.  Konec keců
  8. 8. openlayers.orghttp://openlayers.org/dev/examples/http://dev.openlayers.org/docs/files/OpenLayers-js.html
  9. 9.  Vždystejné OpenLayers.js (mobile, compress, debug) Theme Img
  10. 10.  http://ligeo.mostar.cz/tut/2/_1/ Reálná ukázka na webu
  11. 11.  Nejjednodušší možná mapa Index.html Map.js vymazat
  12. 12. <head> <link rel="stylesheet" href="js/theme/default/style.css" type="text/css"> <script src="js/OpenLayers.js"></script> <script src="map.js"></script> </head> Připojení JS a CSS knihoven
  13. 13. <body onload="init()"> <h1>Map</h1> <!--comment--> <div id="map" style="width:500px;height:400px"> </div> </body>
  14. 14. function init(){}
  15. 15. function init(){//comment/*comment*/}
  16. 16. Inicializace nového objektu mapaMapa se vykresluje do „div“ s ID=mapMapa je povináZde příklad bez dalšího nastavenímap = new OpenLayers.Map( map);
  17. 17. Inicializace objektu vrstva (Layer)V doc jsou všechny uvedeny druhy vrstev, které je možno vložitU WMS je povinné – název, url, layersorto = new OpenLayers.Layer.WMS("Ortofotomapa ČÚZK", "http://geoportal.cuzk.cz/WMS_ORTOFOTO_PUB/service.svc/get?", { layers:"GR_ORTFOTORGB" });
  18. 18. Vrstva byla inicializované, ale není přidána v mapě map.addLayer(orto);Mapa musí mít nastaveno pozici načtení. Více způsobů. NapříkladzoomToExtend(extend);… map.setCenter( new OpenLayers.LonLat(18.164,49.834),15);
  19. 19.  Chrome Firefox console console.log(map) alert()
  20. 20. Od roku 2000Základní typy dotazů (dle OGC)GetCapabilitiesGetMapGetFeatureInfo
  21. 21. http://geoportal.cuzk.cz/WMS_ORTOFOTO_PUB/service.svc/get?request=getcapabilities&service=wms
  22. 22. http://geoportal.cuzk.cz/WMS_ORTOFOTO_PUB/service.svc/get?LAYERS=GR_ORTFOTORGB&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&FORMAT=image%2Fjpeg&SRS=EPSG%3A4326&BBOX=18.12744140625,49.7900390625,18.1494140625,49.81201171875&WIDTH=256&HEIGHT=256Záleží na mapovém serveru, co má a může vše obsahovat.
  23. 23. LAYERS=GR_ORTFOTORGB&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&FORMAT=image%2Fjpeg&SRS=EPSG%3A4326&BBOX=18.12744140625,49.7900390625,18.1494140625,49.81201171875&WIDTH=256&HEIGHT=256
  24. 24. Musí podporovat vrstvaPodobný princip jako GetMapJe možné požádat o formát odpovědiUkážeme si na Geoserveru.
  25. 25.  Rozšíření _1 Větší mapové pole Vložení ovládacích prvků Nová vrstva
  26. 26. <div id="map" style="width:100%;height:400px">
  27. 27. options = { maxExtent:new OpenLayers.Bounds(10,48,19,50), controls:[ new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.MousePosition(), new OpenLayers.Control.KeyboardDefaults(), new OpenLayers.Control.Navigation() ], allOverlays:true } map = new OpenLayers.Map( map,options);
  28. 28. katastr = new OpenLayers.Layer.WMS( "Katastr ČÚZK", "http://services.cuzk.cz/wms/wms.asp?", {layers:"dalsi_p_mapy,hranice_parcel,obrazy_parcel,parcelni_cisla,omp,RST_KMD,RST_KN",transparent:true } );
  29. 29. map.addLayers([orto,katastr]);- Pořadí vrstev – katastr se přidá poslední ->bude nahoře
  30. 30.  EPSG:4326 EPSG:900913 CZ:http://geoportal.cuzk.cz/(S(r5mejorhey5znj45ipc5ep2k))/Default.aspx?mode=TextMeta&side=sit.trans&text=souradsystemy
  31. 31.  Práce s google maps Jiný souřadnicový systém Nativní EPSG je 4326
  32. 32. Google maps API<script src="http://maps.google.com/maps/api/js?v=3.7&sensor=false"></script>
  33. 33. transform(source,dest) – metoda protransformaci souřadnic z source do destsouřadnicového systému
  34. 34. wgs= new OpenLayers.Projection("EPSG:4326");google = new OpenLayers.Projection("EPSG:900913");bounds = new OpenLayers.Bounds(10,48,19,50);gBounds = bounds.transform(wgs,google); zoomPoint = new OpenLayers.LonLat(18.164,49.834); gZoomPoint = zoomPoint.transform(wgs,google);
  35. 35. Přidat do options:projection: google,maxExtent:gBounds
  36. 36. gsat = new OpenLayers.Layer.Google( "Google Satellite", { type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 20 } );
  37. 37. -odstranění 45 st. snímkůgsat.mapObject.setTilt(0);- Nastavéní zoom point, jiná úroveň zoomumap.setCenter( gZoomPoint,15);
  38. 38.  Konec keců
  39. 39.  Pokračovat v OpenLayers ◦ Dotazování na katastr ◦ GetFeatureInfo ◦ WFS ◦ Vektorové vrstvy Geoserver ◦ Představení ◦ Napojení na PostGis ◦ Vlastní WMS

×