Funkcja init()
Funkcja init() tworzy odwołania do klas przekształcających współrzędne pomiędzy systemami odniesienia, wyświetla zdefiniowaną mapę OSM lub UMP w bloku <div id = 'basicMap'>, pozwala na zdefiniowanie opcji instancji mapy oraz utworzenie kontrolek nawigacyjnych, informacyjnych i sterujących instancji mapy takich jak:
- zminimalizowane okno przełącznika warstw
- elementy nawigacyjne w lewym górnym rogu, takie jak: strzałki lewa, prawa, dół, góra, powiększenie oraz pionowy suwak zmiany powiększenia
- kontrolka przewijanie i powiększanie mapy za pomocą klawiatury
- zminimalizowane okno mini-mapy, która umożliwia szybką nawigację;
- liniowy wskaźnik bieżącego powiększenia mapy; w lewym dolnym rogu mapy
- bezpośredni odnośnik do mapy startowej
- aktualne współrzędne geograficzne punktu pod kursorem myszy
// zmienne publiczne OpenLayers var map = null; // odwołania do klas przekształcających współrzędne pomiędzy systemami odniesienia var epsg4326 = new OpenLayers.Projection("EPSG:4326"); var epsg900913 = new OpenLayers.Projection("EPSG:900913"); // Funkcja init() wyświetla zdefiniowaną mapę OSM lub UMP w bloku <div id = 'basicMap'>, function init() { // ustaw przykładowe opcje instancji mapy var options = { units:'m', minResolution: 'auto', maxResolution: 'auto', // utwórz kontrolki nawigacyjne, informacyjne i sterujące instancji mapy controls: [ // zminimalizowane okno przełącznika warstw; // niebieski przycisk (+) w prawym górnym rogu layerSwitcher = new OpenLayers.Control.LayerSwitcher({'ascending':true}), // umożliwia nawigacje po mapie za pomocą myszy new OpenLayers.Control.Navigation(), // elementy nawigacyjne w lewym górnym rogu, // strzałki lewa, prawa, dół, góra, powiększenie '+/-' //new OpenLayers.Control.PanZoom(), // elementy nawigacyjne w lewym górnym rogu j.w. plus pionowy suwak zmiany powiększenia, new OpenLayers.Control.PanZoomBar(), // umożliwia przewijanie i powiększanie mapy za pomocą klawiatury new OpenLayers.Control.KeyboardDefaults(), // zminimalizowane okno mini-mapy, która umożliwia szybką nawigację; // niebieski przycisk (+) w dolnym prawym rogu new OpenLayers.Control.OverviewMap(), // Dodatkowe 2 przyciski pod PanZoomBar // Nieaktualne w wersji 2.4, usunięte w wersji 3.0. //new OpenLayers.Control.MouseToolbar(), // liniowy wskaźnik bieżącego powiększenia mapy; w lewym dolnym rogu mapy, new OpenLayers.Control.ScaleLine({geodesic: true}), // bezpośredni odnośnik do mapy startowej: link w prawym dolnym rogu new OpenLayers.Control.Permalink('permalink'), // aktualne współrzędne geograficzne punktu pod kursorem myszy; new OpenLayers.Control.MousePosition({displayProjection: epsg4326}), // dolny prawy róg - prawa autorskie OSM, (nie działa w ver. 2.11) new OpenLayers.Control.Attribution() ] }; // utwórz nowy obiekt typu Map w kontenerze HTML (tutaj <div id="basicMap">) map = new OpenLayers.Map("basicMap", options); // utwórz nową warstwę 'layerOSM' odwołującą się darmowej mapy OpenStreetMap var layerOSM = new OpenLayers.Layer.OSM("Mapa OSM"); // dodaj utworzoną warstwę do obiektu map map.addLayer(layerOSM); // w podobny sposób możemy utworzyć nową warstwę odwołującą się darmowej mapy UMP-pcPL var layerUMP = new OpenLayers.Layer.OSM("Mapa UMP", "http://1.tiles.ump.waw.pl/ump_tiles/${z}/${x}/${y}.png") // dodaj utworzoną warstwę do obiektu map map.addLayer(layerUMP); }
Funkcja powiększająca i centrująca wyświetlaną mapę - fCenterMap(...)
Wyświetlana map powinna pokazywać wybrany przez nas obszar w odpowiednim powiększeniu. W tym celu utworzymy funkcją centrująca wyświetlaną mapę fCenterMap(...) względem wybranego przez nas punktu środkowego centerLon, centerLat w układzie odniesienia EPSG:900913 i powiększeniu zoomLevel.
// Funkcja centrująca wyświetlaną mapę: // • centerLon, centerLat - współrzędne środka mapy w układzie odniesienia EPSG:900913, // format używany m.in. przez OpenStreetMap, Google Maps, Bing Maps, Yahoo!Maps. // • zoomLevel - początkowe powiększenie mapy function fCenterMap(centerLon, centerLat, zoomLevel){ // konwertuj współrzędne środka mapy z układu odniesienia EPSG:4326 na EPSG:900913, // wycentruj mapę w/m współrzędnych środka, powiększ do skali zoomLevel var point = new OpenLayers.LonLat(centerLon, centerLat); map.setCenter(point.transform(epsg4326,epsg900913), zoomLevel); }
Funkcja rysująca na mapie ślad (track) GPX - fDrawTrack(...)
Na stronie Ślad w formacie *.gpx na mapie przedstawiłem podstawowe dane dotyczące rysowania śladu GPX na mapie. Funkcja rysująca ślad jest krótka, a ponieważ będzie dość często używana, więc umieszczę ją w pliku mylInit.js pod nazwą fDrawTrack(...)
/* Funkcja rysująca na mapie ślad (track) GPX o atrybutach przekazanych w argumentach =================================================================================== • id - identyfikator warstwy • nameLayer - nazwa warstwy • fileGpx - ścieżka do pliku *.gpx • strokeColor - kolor pędzla • strokeWidth - szerokość pędzla • strokeOpacity - przezroczystość pędzla w zakresie 0÷1 (1 -nieprzezroczysty) • strokeDashstyle - styl linii (solid, dot, dash, dash, dashdot, longdash, longdashdot, • displayInLayerSwitcher - czy wyświetlać nazwę warstwy w oknie przełącznika warstw • setVisibility - czy narysowany ślad ma być widoczny na mapie */ function fDrawTrack(id, nameLayer, fileGpx, strokeColor, strokeWidth, strokeOpacity, strokeDashstyle, displayInLayerSwitcher, setVisibility){ // utwórz nową warstwę wektorową o nazwie 'nameLayer' // w celu przetworzenia pliku 'fileGpx' var layerGpx = new OpenLayers.Layer.Vector(nameLayer, { // utwórz prostą podklasę strategii strategies: [new OpenLayers.Strategy.Fixed()], // utwórz nową instancję protokołu HTTP protocol: new OpenLayers.Protocol.HTTP({ url: 'gpx/trackMarysin.gpx', // utwórz parser GPX, by przetworzyć plik *.gpx format: new OpenLayers.Format.GPX() }), style: { // użyj pędzla stroke:true, // kolor linii 'strokeColor': strokeColor, // szerokość pędzla w pikselach 'strokeWidth': strokeWidth, // stopień krycia pędzla (nieprzezroczystość) strokeOpacity: strokeOpacity, // styl linii (ciągła) 'strokeDashstyle': strokeDashstyle, } }); // przypisz identyfikator warstwy layerGpx.id = id; // pokaż warstwę w oknie przełącznika warstw layerGpx.displayInLayerSwitcher = displayInLayerSwitcher; // pokaż warstwę na mapie layerGpx.setVisibility(setVisibility); // dodaj utworzoną warstwę do obiektu map map.addLayer(layerGpx); }