Elipsy

Funkcja służy do dodawania elips na mapie.

Przyjmowane parametry

ellipses - Tablica obiektów elips.
callBack - funkcja wywoływana po pobraniu wyników. Jeśli nie zostanie zdefiniowana, to wywołana zostanie funkcja callBacks.addEllipses z obiektu konfiguracyjnego API.

Tryby dodawania obiektów

Single - przeznaczony do dodawania/usuwania małej ilości obiektów. Charakteryzuje się tym, że we flashu obiekty nie są spłaszczane. Dzięki temu nie ma potrzeby rysowania od nowa wszystkich obiektów po dodaniu lub usunięciu jednego z nich. Jednak przez brak spłaszczenia nie jest to rozwiązanie wydajne przy dużej ilości obiektów.
Bulk - przeznaczony do dodawania/usuwania dużej ilości obiektów. Charakteryzuje się tym, że we flashu obiekty są spłaszczane, co powoduje zwiększenie wydajności przy dużej liczbie obiektów. Dodanie lub usunięcie pojedynczego obiektu skutkuje jednak tym, że wszystkie widoczne obiekty muszą być przerysowane od nowa.

Niezbędne atrybuty

Trzy punkty - uzupełniamy zmienną "points" punktem środka elipsy (pierwszy wymiar tablicy; na obrazku poniżej punkt oznaczony jest literą A), punktem z przecięcia prostej wyznaczonej przez ogniska z elipsą (drugi wymiar tablicy; na obrazku poniżej punkt oznaczony jest literą B) i punktem przecięcia symetralnej osi wielkiej z elipsą (trzeci i ostatni wymiar tablicy; na obrazku poniżej punkt oznaczony jest literą C). Każdy punkt musi mieć podaną długość geograficzną (lon) i szerokość geograficzną (lat).
Punkt (środek) i dwa promienie - uzupełniamy zmienną "point" punktem środka elipsy a "radius1" i "radius2" uzupełniamy długością promieni w kilometrach. Każdy punkt musi mieć podaną długość geograficzną (lon) i szerokość geograficzną (lat).

Przykład wywołania dodania elipsy:


//elipsa stworzona z punku środka i promieni
var ellipse = {
	"id" : 1, // unikalne id
	"categoryId" : 1, // id warstwy na której leżeć ma obiekt
	"point" : point, // punkty składowe
	"radius1" : 100, // promień w kilometrach
	"radius2" : 200, // promień w kilometrach
	"points" : points, // punkty składowe
	"rotation" : 0, // obrót w stopnaich
	"lineColor" : "0x000000", // kolor lini
	"lineOpacity" : 1, // przeźroczystość lini
	"lineSize" : 1, // grubość lini (w pikselach)
	"fillColor" : "0x00ff00", // kolor wypełnienia
	"fillOpacity" : 0.7, // przeźroczystość wypełnienia
	"layer" : "<div style=\"width:226px;height:76px;background: #ffffff
				url('http://docelu.pl/i/docelu.gif')
				no-repeat\" />", // layerek
	"mode" : "bulk", // tryb dodawania obiektów
	"zoomFrom" : 1, // minimalne powiększenie, od którego widać obiekt
	"zoomTo" : 15, // maksymalne powiększenie, do którego widać obiekt
	"externalOver" : "mouseOver", // funkcja uruchamiana na zdarzenie onmouseover
	"externalOut" : "mouseOut" // funkcja uruchamiana na zdarzenie onmouseout
};
DoCelu.addEllipses([ellipse]);

//elipsa stworzona z trzech punktów
var point1 = {
	"lon" : 21.005859,
	"lat" : 52.254709
};
var point2 = {
	"lon" : 19.929199,
	"lat" : 50.092393
};
var point3 = {
	"lon" : 19.6875,
	"lat" : 52.549636
};
var points = [];
points[0] = point1;
points[1] = point2;
points[2] = point3;
var ellipse2 = {
	"id" : 2, // unikalne id
	"categoryId" : 1, // id warstwy na której leżeć ma obiekt
	"points" : points, // punkty składowe
	"rotation" : 0, // obrót w stopnaich
	"lineColor" : "0x000000", // kolor lini
	"lineOpacity" : 1, // przeźroczystość lini
	"lineSize" : 1, // grubość lini (w pikselach)
	"fillColor" : "0x00ff00", // kolor wypełnienia
	"fillOpacity" : 0.7, // przeźroczystość wypełnienia
	"layer" : "<div style=\"width:226px;height:76px;background: #ffffff
				url('http://docelu.pl/i/docelu.gif')
				no-repeat\" />", // layerek
	"mode" : "bulk", // tryb dodawania obiektów
	"zoomFrom" : 1, // minimalne powiększenie, od którego widać obiekt
	"zoomTo" : 15, // maksymalne powiększenie, do którego widać obiekt
	"externalOver" : "mouseOver", // funkcja uruchamiana na zdarzenie onmouseover
	"externalOut" : "mouseOut" // funkcja uruchamiana na zdarzenie onmouseout
};
DoCelu.addEllipses([ellipse2]);

Można przechwycić wynik operacji rysowania elipsy. Zdefiniujemy zatem jednoparametrową funkcję addEllipsesCallback z parametrem:

returnStatus - obiekt zawierający status odpowiedzi

Jeśli funkcja zwróci wartość false, to wynik nie zostanie wyświetlony na mapie.
Przykład definicji funkcji:


function addEllipsesCallback(ret) {
	var $ellipsesEventsDiv = jQuery('#ellipsesEvents');
	var html = '<h3>Elipsa dodana.</h3>';
	$ellipsesEventsDiv.html(html);
	return;
}

Informację, która funkcja ma zostać wywołana należy podać w obiekcie konfiguracyjnym mapy. W obiekcie tym definiujemy również opóźnienie w wyświetleniu chmurki dla kształtu:


var config = {
  "features" : {
    "detailsShowDelay" : 500
  },
  "callBacks" : {
    "addEllipses" : addEllipsesCallback
  }
};

Obiekt ten można przekazać na etapie ładowania mapy (funkcja loadMap) lub wywołując funkcję loadConfig. W przykładzie zrobimy to na etapie ładowania mapy.


DoCelu.loadMap(document.getElementById('map'), config);

Dodawanie elipsy

Ten dokument nie wyjaśnia wszystkich wątpliwości? Szczegółowa dokumentacja techniczna API DoCelu.pl

Sprawdź toczące się dyskusje na Forum API DoCelu.pl

Opinie (0)

Masz pomysł? Uwagi? Napisz do nas!

Nick

Twoja opinia

Pozostało znaków: 4000

[Pokaż regulamin]

REGULAMIN

Ten materiał nie ma jeszcze żadnej opinii. Twoja może być pierwsza!

Nawigacja w telefonie GSM:

Źródło danych:

Mapy:

Integracja i technologia: