Access

 MS Access i OpenLayers - znaczniki (markery) na mapie.

Znaczniki (markery) na mapie.

Zaprezentowany na poprzedniej stronie przykład Graficzne punkty na śladzie GPX pokazał, jak umieścić na mapie (śladzie GPX) własne graficzne punkty, przy wykorzystaniu właściwości punktu externalGraphic, określającej ścieżkę do pliku graficznego, który ma zostać wyświetlony jako znacznik (marker). Właściwości punktu graphicHeight, graphicWidth pozwalają na zmianę wielkości graficznego punktu, a graphicXOffset, graphicYOffset umożliwiają przesunięcie punktu wzdłuż osi XY o określoną ilość pikseli, tak by znacznik wskazywał dokładnie punkt na mapie.

Tworzenie znaczników (markerów) na śladzie GPX.

Praktycznie, w bardzo podobny sposób jak graficzne punkty, możemy utworzyć znaczniki (markery). W tym celu, za pomocą funkcji createMarkersLayer(...) musimy utworzyć warstwę OpenLayers.Layer.Markers(layerName), a następnie za pomocą funkcji createMarkers(...) tworzymy na tej warstwie znaczniki (markery) z indywidualnie dopasowanymi atrybutami, przekazywanymi w argumentach funkcji.
Argument markerFile to ścieżka (adres URL) do pliku graficznego, który ma zostać wyświetlony jako znacznik (marker). Argumenty markercHeight, markerWidth określają rozmiar tworzonego znacznika (markera), a offsetX, offsetY definiują przesunięcie punktu środkowego znacznika (markera) wzdłuż osi XY.


// deklaracja warstwy wektorowej zawierającej znaczniki (markery)
var layerMarkers;

// utwórz warstwę wektorową na przyjęcie znaczników (markerów)
function createMarkersLayer(id, layerName, displayInLayerSwitcher, setVisibility){
	layerMarkers = new OpenLayers.Layer.Markers(layerName);
	// przypisz identyfikator warstwy
	layerMarkers.id = id;
	// pokaż warstwę w oknie przełącznika warstw
	layerMarkers.displayInLayerSwitcher = displayInLayerSwitcher;
	// pokaż warstwę na mapie
	layerMarkers.setVisibility(setVisibility);
}

// funkcja tworząca  w warstwie wektorowej 'layerMarkers' pojedyncze znaczniki (markery)
// o atrybutach określonych w argumentach funkcji
function createMarkers(id, lon, lat, markerFile, markerWidth, markerHeight, offsetX, offsetY) {
	// konwertuj współrzędne geograficzne z układu odniesienia EPSG:4326 na EPSG:900913,
	var lonLat = new OpenLayers.LonLat(lon, lat).transform(epsg4326, epsg900913);
	// utwórz reprezentuję pary szerokość / wysokość
	var size = new OpenLayers.Size(markerWidth, markerHeight);
	// oblicz przesunięcie markera
	var offset = new OpenLayers.Pixel(offsetX, offsetY);
	// utwórz grafikę w oparciu o adres URL, o rozmiarze (size)
	// i przesunięciu punktu środkowego (offset))
	var icon = new OpenLayers.Icon(markerFile, size, offset);

	// utwórz klasę feature na podstawie danych geograficznych i graficznych
	var feature = new OpenLayers.Feature(layerMarkers, lonLat, {'icon': icon});

	// utwórz obiekt znacznika
	var marker = feature.createMarker();
	marker.id = id;
	// dodaj znacznik (marker) do warstwy 'layerMarkers'
	layerMarkers.addMarker(marker);
}

Przykładowe wywołanie funkcji tworzącej znaczniki (markery)


function fDrawMarkers(){
	// współrzędne punktu
	var lon; var lat;
	// wielkość pliku graficznego i zarazem podkatalog plików graficznych
	var size=48;
	// ścieżka do plików graficznych "Centered")
	var path='markers/IconsLand/PNG/Centered/'+size.toString()+'x'+size.toString()+'/';

	// utwórz warstwę na przyjęcie znaczników (markerów)
	createMarkersLayer("markers", "Znaczniki i ślad", true, true)

	// tworzenie poszczególnych punktów graficznych w warstwie wektorowej 'layerMarkers'
	lat="51.288912026211619";lon="22.496877992525697"
	createMarkers('mk_01',lon,lat,path+'MapMarker_Ball__Azure.png',size,size,-size/2,-size);
	lat="51.289822971448302";lon="22.501583006232977"
	createMarkers('mk_02',lon,lat,path+'MapMarker_Ball_Left_Chartreuse.png',size,size,-size/2,-size);
	lat="51.289219977334142";lon="22.503895992413163"
	createMarkers('mk_03',lon,lat,path+'MapMarker_Ball_Right_Pink.png',size,size,-size/2,-size);
	lat="51.288394024595618"; lon="22.505702963098884"
	createMarkers('mk_04',lon,lat,path+'MapMarker_Board_Pink.png',size,size,-size/2,-size);
	lat="51.290338039398193"; lon="22.506549032405019"
	createMarkers('mk_05',lon,lat,path+'MapMarker_Bubble_Chartreuse.png',size,size,-size/2,-size);
	lat="51.2920300103724"; lon="22.505863979458809"
	createMarkers('mk_06',lon,lat,path+'MapMarker_DrawingPin_Left_Azure.png',size,size,-size/2,-size);
	lat="51.293702032417059"; lon="22.505411021411419"
	createMarkers('mk_07',lon,lat,path+'MapMarker_DrawingPin_Right_Pink.png',size,size,-size/2,-size);
	lat="51.295340023934841"; lon="22.504996033385396"
	createMarkers('mk_08',lon,lat,path+'MapMarker_Flag2_Left_Chartreuse.png',size,size,-size/2,-size);
	lat="51.297403983771801"; lon="22.504101013764739"
	createMarkers('mk_09',lon,lat,path+'MapMarker_Flag5_Pink.png',size,size,-size/2,-size);
	lat="51.299123028293252"; lon="22.503597009927034"
	createMarkers('mk_10',lon,lat,path+'MapMarker_Marker_Inside_Chartreuse.png',size,size,-size/2,-size);
	lat="51.300733024254441"; lon="22.503075990825891"
	createMarkers('mk_11',lon,lat,path+'MapMarker_Marker_Outside_Pink.png',size,size,-size/2,-size);
	lat="51.302910977974534"; lon="22.502304017543793"
	createMarkers('mk_12',lon,lat,path+'MapMarker_PushPin1__Azure.png',size,size,-size/2,-size);
	lat="51.305026989430189"; lon="22.501572025939822"
	createMarkers('mk_13',lon,lat,path+'MapMarker_PushPin2__Pink.png',size,size,-size/2,-size);
	lat="51.306459037587047"; lon="22.501102974638343"
	createMarkers('mk_14',lon,lat,path+'MapMarker_PushPin2_Left_Chartreuse.png',size,size,-size/2,-size);
	lat="51.307248026132584"; lon="22.498928960412741"
	createMarkers('mk_15',lon,lat,path+'MapMarker_PushPin2_Right_Azure.png',size,size,-size/2,-size);
	lat="51.307167978957295"; lon="22.495145034044981"
	createMarkers('mk_16',lon,lat,path+'MapMarker_Flag2_Right_Pink.png',size,size,-size/2,-size);
	lat="51.307268980890512"; lon="22.491870978847146"
	createMarkers('mk_17',lon,lat,path+'MapMarker_Flag4_Left_Azure.png',size,size,-size/2,-size);
	lat="51.305890996009111"; lon="22.490770015865564"
	createMarkers('mk_18',lon,lat,path+'MapMarker_Flag4_Right_Chartreuse.png',size,size,-size/2,-size);

	// ścieżka do plików graficznych "NotCentered")
	path='markers/IconsLand/PNG/NotCentered/'+size.toString()+'x'+size.toString()+'/';

	lat="51.303506009280682"; lon="22.491532014682889"
	createMarkers('mk_19',lon,lat,path+'MapMarker_ChequeredFlag_Left_Azure.png',size,size,-size,-size);
	lat="51.301445988938212"; lon="22.49222201295197"
	createMarkers('mk_20',lon,lat,path+'MapMarker_ChequeredFlag_Right_Pink.png',size,size,0,-size);
	lat="51.29940097220242"; lon="22.492963979020715"
	createMarkers('mk_21',lon,lat,path+'MapMarker_Flag1_Left_Chartreuse.png',size,size,-size/2,-size);
	lat="51.297383029013872"; lon="22.493559010326862"
	createMarkers('mk_22',lon,lat,path+'MapMarker_Flag1_Right_Pink.png',size,size,-size/4,-size);
	lat="51.295751994475722"; lon="22.494112970307469"
	createMarkers('mk_23',lon,lat,path+'MapMarker_Flag3_Left_Chartreuse.png',size,size,-size,-size);
	lat="51.294504012912512"; lon="22.494491999968886"
	createMarkers('mk_24',lon,lat,path+'MapMarker_Flag3_Right_Azure.png',size,size,0,-size);
	lat="51.28710899502039"; lon="22.500583967193961"
	createMarkers('mk_25',lon,lat,path+'MapMarker_PushPin1_Left_Chartreuse.png',size,size,-size/2,-size);
	lat="51.28674304112792"; lon="22.498324038460851"
	createMarkers('mk_26',lon,lat,path+'MapMarker_PushPin1_Right_Pink.png',size,size,-size/4,-size);

	// dodaj warstwę 'layerMarkers' do instancji mapy
	map.addLayer(layerMarkers);
}

Wygląd znaczników (markerów)

Wygląd znaczników(markerów) nie różni się niczym od wyglądu punktów rysowanych przy wykorzystaniu właściwości punktu externalGraphic, ponieważ w obu przypadka wykorzystywany jest ten sam plik graficzny.

Znaczniki graficzny 48px
1. Znaczniki (markery) na śladzie GPX
Znak Informacja dodatkowa Pliki znaczników graficznych pobrano ze strony
www.icons-land.com

Ale to czego brakuje zarówno punktom, jak i znacznikom (markerom) na mapie, to brak interakcji. Punkty i znaczniki są „martwe”. A powinny po kliknięciu (bądź najechaniu wskaźnikiem myszy) wyświetlić w okienku Popup dane dotyczące punktu na który wskazuje znacznik. Okienko takie nazywane jest „dymkiem”, rzadziej „chmurką”.