Access

 MS Access i OpenLayers - funkcja init()

Plik mylInit.js i funkcja init().

Aby nie umieszczać funkcji init() w każdym nowo tworzonym pliku *.html, powinniśmy utworzyć odrębny pliku mylInit.js, w którym znajdzie się funkcja init() oraz inne podstawowe (najczęściej używane) funkcje.

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);
}