Versiya 0.4, 27 iyun 2013-ci il.
Məqsəd
Verilmiş nümunənin məqsədi, miqyaslana və brauzerin pəncərəsində hərəkət edə bilən, GoMap xəritəsinin əks olunmasına imkan verən sadə veb-səhifənin yaradılması imkanlarının göstərilməsidir.
Rekvizitlər
Verilmiş dərsin mənimsənilməsi üçün, HTML səhifələrin yaradılmasının baza bilikləri kifayətdır.
Dərsin keçirilməsi üçün HTML redaktoru lazım olacaqdır. Nümunədə,
http://openlayers.org (yeni pəncərədə açılır) saytında təsvir olunmuş OpenLayers kitabxanasından istifadə olunur.
GoMap.Az və Openlayers API –nin sadə istifadəsi
Verilmiş nümunə, GoMap.Az və Openlayers API -ə əsaslanan sadə xəritəni yaratmağa imkan verir. Hazır nümunə burada yerləşir (yeni pəncərədə açılır).
<head> bölməsinə:
<script src="http://openlayers.org/api/2.12/OpenLayers.js"></script>
JavaScript –ini qoşmaq lazımdır.
Həmçinin, <head> bölməsinə var map; qlobal dəyişənini yaratmaq lazımdır; hansı ki, xəritə obyektini saxlayacaqdır. Həmçinin xəritəni inisializasiya edəcək init() funksiyası da bura əlavə edilir.
Init() funksiyasında, ilk növbədə xəritəni yaradaq. Eyni zamanda, nəzərə almaq lazımdır ki, xəritənin əks olunması üçün <body> bölməsində yerləşən <div id="map"> regionu istifadə olunacaqdır. Proyeksiya, koordinatlar (ölçülər) sistemi vahidləri və göstərilmə sahələrinin sərhədləri, aşağıdakı nümunəyə uyğun olaraq qoyula bilər:
map = new OpenLayers.Map({
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m",
restrictedExtent: new OpenLayers.Bounds(4400000, 4600000, 5700000, 5500000)
});
Xəritənin əks olunma proyeksiyasını qoyuruq:
map.displayProjection = new OpenLayers.Projection("EPSG:4326");
GoMap.Az xəritəsinin laylarını yaradırıq. GoMap.Az xəritəsinin layları OSM (OpenStreetMap) laylarına oxşar işləyir. Bu zaman OpenLayers kitabxanasının idarə edilməsi üçün üç - x, y, z parametrləri ötürülür, burada z – miqyasın dərəcəsini göstərir. lng parametri xəritənin yazı dilini verir ( az, en, ru ). f parametri - xəritənin fraqmentləri formatını göstərir.
var gomapLayer = new OpenLayers.Layer.OSM(
"GoMap.Az", "http://maps.gomap.az/info/xyz.do?lng=az&x=${x}&y=${y}&z=${z}&f=jpg", {
'buffer': 0, attribution: "(c) <a href='http://gomap.az/'>GoMap.Az</a>",
tileOptions: { crossOriginKeyword: null },
transitionEffect: 'resize',
zoomOffset: 7,
numZoomLevels: 12,
maxResolution: 1222.99245234375
});
Yaradılmış layı map xəritəsinə əlavə edirik:
map.addLayers([gomapLayer]);
Yekunda, xəritənin mərkəzini və miqyasın dərəcəsini göstəririk, hansı ki, səhifənin ilk açılışı zamanı xəritənin əks olunması rejimini qoymağa imkan verir.
map.setCenter(new OpenLayers.LonLat(5551660.2717726,4921653.5202719), 5);
Səhifənin ilk açılışı zamanı init() funksiyasının işləməsi üçün, onu <body> bölməsinin sonunda çağırırıq:
<script type="text/javascript">
init();
</script >
Göstərilən nümunə, xəritənin 1 layı ilə işləməyə imkan verir. Daha sonra, GoogleMaps layının əlavə olunması və 2 lay ilə iş təsvir olunur.
GoogleMaps layının əlavə olunması
Hazır nümunə burada yerləşir (yeni pəncərədə açılır).
<head> bölməsinə GoogleMaps API JavaScript-ini əlavə etmək lazımdır:
<script src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script>
init() funksiyasına GoMap.Az xəritəsinin layından başqa, Google peyk xəritəsinin yeni layı əlavə olunur:
var googlemapLayer = new OpenLayers.Layer.Google("Google Satellite", {type: google.maps.MapTypeId.SATELLITE, MIN_ZOOM_LEVEL: 7, MAX_ZOOM_LEVEL: 18});
Xəritəyə layların əlavə olunması komandasına yeni, Google peyk layının dəyişənini də əlavə etmək lazımdır:
map.addLayers([gomapLayer, googlemapLayer]);
Xəritədə təbəqələrin dəyişdirilməsi imkanına malik olmaq üçün, təbəqələrin dəyişdirilməsinin istifadəçi interfeysi elementini əlavə edək. Verilmiş element, regionların xəritəsinin sağ sərhədinin yanında, plyus işarəsi ilə işıqlanacaqdır, hansı ki, əks edilən xəritəni seçməyə imkan verəcəkdir.
map.addControl(new OpenLayers.Control.LayerSwitcher());
Xəritəyə markerin əlavə edilməsi
Hazır nümunə burada yerləşir (yeni pəncərədə açılır).
<head> hissəsində qlobal dəyişən yaratmaq lazım gələcək
var sprintersLayer;
var defaultStyleMap = {
externalGraphic: "flag.png",
graphicOpacity: 1.0,
graphicWidth: 195,
graphicHeight: 100,
graphicXOffset: -125,
graphicYOffset: -95,
graphicZIndex: 99
});
sprintersLayer – bu vector layıdir, hansı ki, burada markerlər yerləşir.
defaultStyleMap – özündə markerin şəkili haqqında verilənləri saxlayır, eni, hündürlüyü və şəkilin mövqeyini. init() () funksiyasında vektor layını işə salırıq.
sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", {
styleMap: new OpenLayers.StyleMap(defaultStyleMap)
});
Vektor layını xəritəyə əlavə edirik
map.addLayers([gomapLayer,googlemapLayer,sprintersLayer]);
Sürüşmə effektini artırmaq üçün aşağıdakı proseduru əlavə edirik (bu mobil telefonlar və planşetlərdə effektivdir)
map.addControl(new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}));
İndi isə vektor layına markerə «basma» imkanını əlavə edirik.
click = new OpenLayers.Control.SelectFeature(
[sprintersLayer],{
clickout: true, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey",
multipleKey: "shiftKey"
});
map.addControl(click);
və proseduru yazırıq
sprintersLayer.events.on({
"featureselected": function(e) {
alert('selected');
},
" featureunselected": function(e) {
alert('unselected');
}
});
click.activate();
Markeri yerləşdiririk, və koordinatlarını qeyd edirik.
var lonlat = new OpenLayers.LonLat(49.86694,40.39528).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
Markeri (bayrağı) işə salırıq, koordinatlar veririk və vektor layına əlavə edirik.
var flag = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(Math.floor(lonlat.lon), Math.floor(lonlat.lat)));
flag.x = lonlat.lon;
flag.y = lonlat.lat;
sprintersLayer.addFeatures(flag);
Markerin yerini xəritənin mərkəzi təyin edirik
map.setCenter(lonlat, 9);