Piemēri: |
Vektoru zīmēšanaUz kartes iespējams zīmēt vektora līnijas un poligonus. Līnija ir vienkārša punktu savienošana, bet poligoni ir punktu savienošana ar veidojošā laukuma aizpildīšanu
LīnijasLai zīmētu līniju, sākumā tā tiek nodefinēta, un pēc tam šai līnijai tiek pievienoti punkti.
// līnijas definēšana
var stroke = {color: [212, 63, 78, 1], width: 4};
var line_id = map.svg.lines.AddPolyLine(stroke);
// punktu pievienošana līnijai. Līnijas id, X un Y koordinātes
map.svg.lines.AddPoint(line_id, 561308, 6297549);
map.svg.lines.AddPoint(line_id, 528264, 6294648);
map.svg.lines.AddPoint(line_id, 508264, 6190648);
Rediģējamas līnijas izvietošanaLai izveidotu rediģējamu līniju, sākumā tā tiek nodefinēta, un pēc tam šai līnijai tiek pievienoti punkti.
// līnijas definēšana
var stroke = {color: [212, 63, 78, 1], width: 4};
var line_id = map.svg.lines.AddPolyLineMovable(stroke);
// punktu pievienošana līnijai. Līnijas id, X un Y koordinātes
map.svg.lines.AddPoint(line_id, 561308, 6297549);
map.svg.lines.AddPoint(line_id, 528264, 6294648);
map.svg.lines.AddPoint(line_id, 508264, 6190648);
PoligoniLai zīmētu poligonu, sākumā tas tiek nodefinēta, un pēc tam šim poligonam tiek pievienoti punkti.
// poligona definēšana
var stroke = {color: [212, 63, 78, 1], width: 4};
var fill = [70, 70, 250, 0.5]; // pirmie 3 parametri ir krāsa (R, G, B). 4. parametrs ir caurspīdīgums no 0-1
var polygon_id = map.svg.lines.AddPolygon(stroke, fill);
// punktu pievienošana poligonam. Poligona id, X un Y koordinātes
map.svg.lines.AddPoint(polygon_id, 561308, 6297549);
map.svg.lines.AddPoint(polygon_id, 528264, 6294648);
map.svg.lines.AddPoint(polygon_id, 508264, 6190648);
Rediģējamu poligonu veidošanaLai izveidotu rediģējamu poligonu, sākumā tas tiek nodefinēta, un pēc tam šim poligonam tiek pievienoti punkti.
// poligona definēšana
var stroke = {color: [212, 63, 78, 1], width: 4};
var fill = [70, 70, 250, 0.5]; // pirmie 3 parametri ir krāsa (R, G, B). 4. parametrs ir caurspīdīgums no 0-1
var polygon_id = map.svg.lines.AddPolygonMovable(stroke, fill);
// punktu pievienošana poligonam. Poligona id, X un Y koordinātes
map.svg.lines.AddPoint(polygon_id, 561308, 6297549);
map.svg.lines.AddPoint(polygon_id, 528264, 6294648);
map.svg.lines.AddPoint(polygon_id, 508264, 6190648);
Vairāku punktu pievienošanaJa līniju vai poligonu nepieciešams veidot no vairākiem koordinātu punktiem, tad tos iespējams pievienot arī vienlaicīgi.// punktu masīvs sastāv no masīviem formā [x, y] var points = [ [561308, 6297549], [528264, 6294648], [508264, 6190648] ]; // punktu pievienošana līnijai vai poligonam map.svg.lines.AddPoints(line_or_polygon_id, points);
Līnijas punktu iegūšanaIespēja iegūt visus līnijas punktus, zinot līnijas identifikatoru. Punkti ir masīvs ar parametriem x un y.var line_points = map.svg.lines.GetLine(line_id).points; // pirmā punkta koordināšu izvadīšana alert([line_points[0].x, line_points[0].y]);
Kursora uzbīdīšanās uz līnijas vai poligona
// pieraktīšanās uz notikumu
map.svg.lines.AddEventMouseOver(line_or_polygon_id, MouseOver);
map.svg.lines.SetCustomParameter(line_or_polygon_id, "mouse_over_text", "Kursors uz līnijas");
function MouseOver(line_or_polygon_id)
{
var mouse_over_text = map.svg.lines.GetCustomParameter(line_or_polygon_id, "mouse_over_text");
map.tooltip.Show(mouse_over_text);
}
Kursora nobīdīšanās no līnijas vai poligona
// pieraktīšanās uz notikumu
map.svg.lines.AddEventMouseOut(line_or_polygon_id, MouseOut);
function MouseOut(line_or_polygon_id)
{
map.tooltip.Hide();
}
Kursora klikšķināšana uz līnijas
// pieraktīšanās uz notikumu
map.svg.lines.AddEventClick(line_or_polygon_id, MouseClick);
function MouseClick(line_or_polygon_id, args)
{
// argumenta parametros tiek padotas klikšķinātā punkta koordinātes
var x = args.meter_x;
var y = args.meter_y;
var offset_x_pix = 10;
var offset_y_pix = 10;
map.info_box.Show(x, y, "informācijas teksts", offset_x_pix, offset_y_pix);
}
Līnijas izmainīšana
// pieraktīšanās uz notikumu
map.svg.lines.AddEventLineChanged(line_id, function()
{
alert('changed');
});
Līnijas dzēšana
// pieraktīšanās uz notikumu
map.svg.lines.AddEventLineDeleted(line_id, function()
{
alert('deleted');
});
Līnijas izskata maiņaZinot līnijas vai poligona identifikatoru, iespējams gan uzzināt, gan arī mainīt tā izskata parametrus.
// līnijas datu masīva iegūšana. masīva forma: {color:Array[red, green, blue, opacity], width:integer}
var stroke = map.svg.lines.GetStroke(line_id);
// līnijas krāsas katra intervālā 0-255
var red = 15;
var green = 90;
var blue = 240;
map.svg.lines.ChangeStrokeColor(line_id, red, green, blue);
// līnijas platums
var new_width = 20;
map.svg.lines.SetStrokeWidth(line_id, new_width);
// līnijas caurspīdīgums intervālā 0-1
var new_opacity = 0.9;
map.svg.lines.SetStrokeOpacity(line_id, new_opacity);
// poligona gadījumā var iegūt aizpildījuma datu masīvu. masīvs sastāv no 4 elementiem: Array[red, green, blue, opacity]
var fill = map.svg.lines.GetFill(line_id);
// aizpildījuma krāsas katra intervālā 0-255
var red = 50;
var green = 230;
var blue = 30;
map.svg.lines.SetFillColor(line_id, red, green, blue);
// aizpildījuma caurspīdīgums 0-1
var new_opacity = 0.7;
map.svg.lines.SetFillOpacity(line_id, new_opacity);
Objekta dzēšanaGan līnijas, gan poligoni tiek dzēsti ar vienu metodi.map.svg.lines.DeletePolyLine(object_id); |