Composant Delphi / Google Maps / OpenStreetMap / Leaflet  / Mappilary / Native Maps 100% Delphi 0% WebBrowser 0% Javascript

Shapes

Vous êtes ici :TECNativeMap

Pour utiliser les formes vous devez rajouter l'unité uecNativeShape

Tous les éléments positionnés sur la carte sont accessibles au travers de la propriété Shapes de type TECShapes ou des autres groupes via Group['name'], ils descendent tous de la classe TECShape

Vous pouvez stockers dans vos éléments (marker, poi, line ou polygone) les données textuelles que souhaitez au travers de la propriété PropertyValue ses valeurs pourront être associées à un style

var M:TECShapeMarker;
...
M := Map.addMarker(map.latitude,map.Longitude);
M.PropertyValue['my_tag']:='value_tag';
// you can also use
M['my_tag']:='value_tag';
// groups can also have them
map.shapes['tag']:='value';
map['group']['tag']:='value';

Lorsque vous ajoutez plusieurs éléments à la suite encadrez-les par le couple BeginUpdate / EndUpdate

1

Styles

Au lieu de décorer manuellement chaque élément vous pouvez définir des régles pour leur appliquer un style

Groupes ( TECShapes )

Un groupe gère un ensemble d'éléments, en fait la propriété Shapes est le groupe par défaut, vous accédez à un groupe par la propriété Group['name']

Vous pouvez aussi y accéder par un index au travers de la propriété Groups

1
property CSV: TecCSV
Gestionnaire de chargement des fichiers csv
procedure Clear
vide le groupe
procedure BeginUpdate
Ne pas répercuter immédiatement les ajouts d'éléments dans le groupe, assure une meilleur performance
procedure EndUpdate
Répercuter les ajouts au groupe

var my_group:TECShapes;
// for optimisation
my_group := map.Group['group1'];
my_group.BeginUpdate;

my_group.Markers.add(lat1,lng1);
my_group.Markers.add(lat2,lng2);
...
my_group.EndUpdate;

procedure fitBounds
Affiche la carte de manière a ce que tous les éléments du groupe soient visible dans le meilleur zoom

Les propriétés Pois, markers, lines et Polygones disposent aussi d'une procedure fitBounds

2
procedure SaveToFile(const Filename: string)
Enregistre le groupe dans un fichier, le format est déterminé par l'extension .gpx, .kml ou format texte propre à TECNativeMap
function LoadFromFile(const Filename: string): boolean
Charge le groupe avec le contenu d'un fichier, le format est déterminé par l'extension .osm, .olt .gpx, .kml, .csv ou format texte propre à TECNativeMap

L'événement OnLoad est déclenché lorsque le contenu est totalement disponible

3
function LoadFromOSMStream(const Stream: TStream): boolean;

Charge le groupe avec un stream contenant des données au format OSM XML ou olt

function LoadFromOSMString(const data: string): boolean;

Charge le groupe avec une chaine contenant des données au format OSM XML ou olt

property Hint : string

Chaine qui s'affiche comme info-bulle pour les éléments dont le Hint est vide

// you can inject the element's properties using the syntax
map['groupx'].Hint := 'value of [prop1] - value of [prop2]';
property HintColor : TColor
Défini une couleur de fond spécifique pour les info-bulles (hint) du groupe
property Clusterable : boolean

Active les support des Clusters, cela permet de regrouper des markers ou des pois proches pour une meilleure visibilité

Fig. 1 Clustering

property ClusterManager : TECClusterManager
property Pois: TECShapePOIList
Liste des éléments de type TECShapePOI
property Markers: TECShapeMarkerList
Liste des éléments de type TECShapeMarker
property Lines: TECShapeLineList
Liste des éléments de type TECShapeLine
property Polygones: TECShapePolygoneList
Liste des éléments de type TECShapePolygone
property InfoWindows: TECShapeInfoWindowList
Liste des éléments de type TECShapeInfoWindow

Les listes d'éléments disposent d'un itérateur comme les groupes

2

var my_group:TECShapes;
// for optimisation
my_group := map.Group['group1'];
my_group.BeginUpdate;

my_group.Markers.add(lat1,lng1);
my_group.Markers.add(lat2,lng2);
...
my_group.EndUpdate;

Vous avez aussi des raccourcis pour créer vos éléments

3

function addMarker(const Lat, Lng: double) : TECShapeMarker;

function AddPOI(const Lat, Lng: double) : TECShapePOI;

function AddLine: TECShapeLine;

function AddEncodedLine(const EncodedLine: string; const precision: byte = 5): TECShapeLine;

function AddLine(const dLatLngs: array of double): TECShapeLine;

function AddLine(const dLine: TECShapeLine) : TECShapeLine;

function AddPolygone : TECShapePolygone;

function AddPolygone(const dLine: TECShapeLine): TECShapePolygone;

function AddEncodedPolygone(const EncodedLine: string; const precision: byte = 5): TECShapePolygone;

var M:TECShapeMarker;
...
M := Map.addMarker(map.latitude,map.Longitude);
M.PropertyValue['my_tag']:='value_tag';
// you can also use
M['my_tag']:='value_tag';
// groups can also have them
map.shapes['tag']:='value';
map['group']['tag']:='value';

function AddPolygone(const dLatLngs: array of double): TECShapePolygone;

property MaxZoom: byte

Niveau maximal de zoom pour lequel les éléments sont affichés, au-dessus le groupe ne s'affiche pas
property MinZoom: byte
Niveau minimal de zoom pour lequel les éléments sont affichés, en dessous le groupe ne s'affiche pas
property Opacity : byte;
Défini une opacité (opacity et FillOpacity) pour tous les éléments du groupe.
L'opacité varie de 0 à 100, une valeur >100 indique que l'opacité du groupe n'est pas prise en compte et que seule celle des éléménts est utilisée.

Dans le cas d'une valeur > 100, l'opacité originelle des éléments n'est pas restaurée

1
property Zindex : longint
Les groupes s'affichent dans l'ordre croissant de leur ZIndex
function TopZindex : longint;
Retourne le ZIndex le plus élevé de l'ensemble des éléments du groupe

TECNativeMap.TopGroupZindex retourne le ZIndex le plus élevé de tous les groupes

4
property Clickable : boolean
Indique si l'ensemble des éléments sont clickables

Les éléments ont eux aussi une propriété clickable

5
property Serialize : boolean
Indique si le groupe doit être sauvegardé lorsque l'on enregistre l'ensemble de la carte

Ne s'applique pas si l'on sauvegarde directement le groupe

6

var my_group:TECShapes;
// for optimisation
my_group := map.Group['group1'];
my_group.BeginUpdate;

my_group.Markers.add(lat1,lng1);
my_group.Markers.add(lat2,lng2);
...
my_group.EndUpdate;

property Visible: boolean
Affiche/Cache le groupe
property Show: boolean
Affiche/Cache le groupe mais contrairement à visible les éléments restent accessible à la souris

Les listes d'éléments (Markers, Pois, Lines, Polygones) ont aussi une propriété Show que vous pouvez activer/désactiver individuellement.

7

Fig. 2 TECShapes.Show

property ShowHint: boolean
Autorise l'affichage de la propriété Hint des éléments sous la forme d'une bulle lors du survol de la souris
property Selected : boolean
Sélectionne / Déselectionne l'ensemble des éléments du groupe
Retourne true si au moins un des éléments du groupe est sélectionné.

Les listes d'éléments ont aussi une propriété Selected

8
var M:TECShapeMarker;
...
M := Map.addMarker(map.latitude,map.Longitude);
M.PropertyValue['my_tag']:='value_tag';
// you can also use
M['my_tag']:='value_tag';
// groups can also have them
map.shapes['tag']:='value';
map['group']['tag']:='value';

property Name: string

nom du groupe en lecture seule
property ToTxt: string;
Import/Export au format natif
property ToGpx: string;
Import/Export au format Gpx
property ToKml: string;
Import/Export au format Kml

Markers et Pois HeatMap

Les listes de Markers et de Pois ont une propriétés HeatMap pour gèrer une carte thermique.

// Optimization: no map refresh during additions
map.BeginUpdate;
// new group
G := map['GroupTest'];
G.markers.heatmap.MaxZoom := 15;
(*
Above MaxZoom markers are displayed,
below MaxZoom the HeatMap is displayed.

When HeatMap is displayed, elements continue to react
to the mouse (Hint, Click...) even if they are not visible.
*
)

// You can modify the palette
// G.markers.heatmap.Palette.Clear;
// G.markers.heatmap.Palette.addColor(Red,Green,Blue,Value)

// Radius of HeatMap points
G.markers.heatmap.Radius := 10;

dy := (map.NorthEastLatitude - map.SouthWestLatitude) / 2;
dx := (map.NorthEastLongitude - map.SouthWestlongitude) / 2;

// add 10000 markers
for y := 0 to 9999 do
begin
Lat := map.latitude - dy + (random(round(dy*2 * 1000)) / 1000);
Lng := map.longitude - dx + (random(round(dx*2 * 1000)) / 1000);
M := G.Markers.AddMarker(Lat,Lng);
// the 'weight' of each element is defined and used to create the HeatMap
weight := random(1000);
M['weight'] := inttostr(weight);
M.Hint := 'marker '+inttostr(y)+' : weight '+inttostr(weight);
end;
(*
HeatMap generation,
the 'Weight' property of the elements is used to calculate the HeatMap
If you leave empty they will all weigh 1
*
)
G.markers.heatmap.update('weight');
G.markers.heatmap.visible := true;
// Optimization: map refresh restored
map.EndUpdate;

Fig. 3 Demo Markers HeatMap

CSV

Le gestionnaire de fichiers CSV est accessible au travers de la propriété CSV des groupes

function LoadFromFile(const filename: string):boolean;
Charge les données du fichier CSV dans le groupe et retourne true si c'est ok.
function LoadFromStream(const stream: TStream):boolean;
Charge les données du stream CSV dans le groupe et retourne true si c'est ok.
function ASyncLoadFromFile(const filename: string):boolean;
Charge les données du fichier CSV dans le groupe de manière asynchrone (dans un thread) et retourne true si c'est ok.
function ASyncLoadFromStream(const stream: TStream):boolean;
Charge les données du stream CSV dans le groupe de manière asynchrone (dans un thread) et retourne true si c'est ok.

Lorsque les données sont chargées l'événement OnLoad de la carte est déclenché

9

procedure SaveToFile(const filename: string;const ShapeList:TECShapeList);

Enregistre la liste d'éléments (markers ou Pois) dans un fichier csv

Utilisez la liste Fields pour sélectionner les PropertyValue a enregistrer.
Fields contient les champs du dernier fichier CSV chargé donc au besoin videz la avant de la remplir avec votre sélection.
Pas besoin d'y rajouter les champs pour la Latitude et Longitude, FieldNameLatitude et FieldNameLongitude seront utilisées
var M:TECShapeMarker;
...
M := Map.addMarker(map.latitude,map.Longitude);
M.PropertyValue['my_tag']:='value_tag';
// you can also use
M['my_tag']:='value_tag';
// groups can also have them
map.shapes['tag']:='value';
map['group']['tag']:='value';

property FieldNameWKT: string;

Permet d'importer ou exporter des fichiers CSV contenant la géométries des éléments au format WKT, indispensable pour les lignes et les polygones.
//save group in csv format
// save the geometry of elements in WKT format, essential for lines and polygons.
// for this you must fill in the field FieldNameWKT

map.shapes.csv.FieldNameWKT := 'WKT';
map['group'].csv.FieldNameWKT := 'WKT';

map.shapes.savetofile('filename.csv');
map['group'].savetofile('filename.csv');

property FieldNameLatitude: string;

Nom du champ qui contient la latitude, par défaut "latitude"
property FieldNameLongitude: string;
Nom du champ qui contient la longitude, par défaut "longitude"

Si la position géographique est regroupée dans un seul champ, indiquez le dans FieldNameLatitude, laissez FieldNameLongitude vide, utilisez DelimiterLatLng pour définir le séparateur entre la latitude et la longitude.

4
map.Shapes.CSV.FieldNameLatitude := 'centroide';
map.Shapes.CSV.FieldNameLongitude := '';
map.Shapes.CSV.DelimiterLatLng := ',';

property idxLatitude: integer

si la première ligne du fichier csv ne contient pas l'intitulé des champs, vous devrez indiquer l'index du champ latitude

property idxLongitude: integer

si la première ligne du fichier csv ne contient pas l'intitulé des champs, vous devrez indiquer l'index du champ longitude
// if the first line of the csv file does not indicate the names of the fields,
// you can indicate directly the index of the fields containing the latitude and longitude
// You must also empty FieldNameLatitude and FieldNameLongitude

map.Shapes.CSV.FieldNameLatitude := '';
map.Shapes.CSV.FieldNameLongitude := '';
map.Shapes.CSV.idxLatitude := 10;
map.Shapes.CSV.idxLongitude := 11;

property Delimiter : char

Délimitateur des champs, par défaut ","
property OnFilterCSV : TOnFilterCSV
Permet de refuser une ligne du fichier CSV en fonction de critères particuliers
// filter csv data
map.shapes.CSV.OnFilterCSV := doOnFilterCSV;
...
// valid csv data , default true
procedure TForm.doOnFilterCSV(const Data: TStringList;var validCSV:boolean);
begin
if (data.Count>2) and (pos('POLYGON',data[7])< 1) then
validCSV := (data[2]<>'relation');
end;

property OnCreateCSVPoint: TOnCreateCSVPoint

Par défaut les éléments sont importés sous la forme de Markers de style siFlat
En vous branchant sur cet événement vous pourrez définir vous même le type d'élément Marker ou Poi et ses diverses caractéristiques.
// take over the creation of the points
map.shapes.CSV.OnCreateCSVPoint := doOnCreateCSVPoint;
...

// Manual creation of each point
// Data contains the CSV values for the point
procedure TForm.doOnCreateCSVPoint(const Group: TECShapes; var CSVPoint: TECShape; const Lat, Lng: double; const Data:TStringList) ;
var M:TECShapeMarker;
begin

// create new marker
M := Group.addMarker(lat,lng);;
CSVPoint := M ;

// marker design
M.Width := 12;
M.StyleIcon := siFlat;

// we calculate its color according to its index number
M.Color := GetHashColor(inttostr(M.IndexOf));

end;

property OnCreateWKTObject : TOnCreateWKTObject

En vous branchant sur cet événément vous pourrez modifier les propriétés des éléments importés au format WKT
// react after creation wkt object
map.shapes.CSV.OnCreateWKTObject := doOnCreateWKTObject;
map['group'].CSV.OnCreateWKTObject := doOnCreateWKTObject;

// fired after creation wkt object
procedure TForm.doOnCreateWKTObject(const Group: TECShapes;
const WKTObject: TECShape; const Lat, Lng: double; const Data: TStringList);
begin
// we calculate its color according to its index number

if WKTObject is TECShapePolygone then
TECShapePolygone(WKTObject).FillColor := GetHashColor(inttostr(WKTObject.IndexOf))
else
WKTObject.Color := GetHashColor(inttostr(WKTObject.IndexOf));
end;

La géométrie doit être exprimée en degrès décimal, si besoin vous pouvez vous brancher sur OnConvertLatLng pour définir une procédure de conversion

1
// The expected coordinates are in decimal degrees
// you can connect to OnConvertLatLng to convert

// sample
procedure ConvertLatLng(var lat,lng:double);
begin
Lat := Lat / 1000000;
Lng := Lng / 1000000;
end;

procedure TForm.FormCreate(Sender: TObject);
begin
map.shapes.CSV.OnConvertLatLng := ConvertLatLng;
end;

Les autres champs du fichier CSV sont importés dans les éléments au travers de leur propriété PropertyValue[field_name] := field_value
Si le fichier CSV ne nomme pas ses champs, ils seront dénommés en concatant le nom du fichier sans l'extension + l'index du champ

Fig. 4 DemoCSV

Labels

Les listes de Polygones, de Markers et de Pois permettent d'associer des labels à leurs éléments, vous y accédez au travers de la propriétés Labels

property Align: TLabelShapeAlign
Choix de la position du label : laTop (défaut) ou laBottom, laright, laLeft, laCenter
property BorderSize: integer
property BorderColor: TColor

property ColorType: TLabelShapeColorType
Fixation de la couleur, par défaut lcShape la couleur de l'item sera utilisé, ou lcColor la couleur sera fixé par la propriété Color
property Color: TColor

property FontColor: TColor

property FontBold: boolean
property FontItalic: boolean

property FontSize: integer

property FontFamily: string

property LabelType: TLabelShapeType
Choix du champ dont le texte servira de label : ltHint, ltDescription (défaut) ,ltPosition (affichage latitude et longitude), ltProperty ou ltMask
property PositionPrecision:byte

nombre de décimales utilisées pour l'affichage des latitude et longitude, par défaut 3

map.shapes.labels.PositionPrecision := 2;
property LabelProperty: string
Définition de la propriété utilisée si LabelType=ltProperty
property LabelMask: string
Définition du masque de texte utilisé si LabelType=ltMask

Vous pouvez afficher plusieurs propriétés en les plaçant entre []

map.shapes.markers.Labels.LabelType := ltMask;
// [location] and [size] are replaced by the content of these properties
map.shapes.markers.Labels.LabelMask := '[location]'+#13#10+'[size]';
property MaxWidth : integer
Largeur maximale pour les labels mono-ligne, au-delà le texte est coupé et est remplacé par "..."
Mettre 0 (valeur par défaut) pour que tout le texte s'affiche
property Margin: integer
Marge entre l'élément et son label (défaut 8 pixels)
property MaxShow: integer
Nombre maximal de labels affichés (défaut 1000)
property Style: TLabelShapeStyle
Style du fond : lsRectangle (défaut), lsRoundRect ou lsTransparent
property Visible: boolean

property ShowOnlyIf : TLabelShowOnly (default lsoAll)

Filtrer l'affichage des labels

Possibilités : lsoAll,lsoSelected,lsoPressed,lsoHover,lsoFocused

var M:TECShapeMarker;
...
M := Map.addMarker(map.latitude,map.Longitude);
M.PropertyValue['my_tag']:='value_tag';
// you can also use
M['my_tag']:='value_tag';
// groups can also have them
map.shapes['tag']:='value';
map['group']['tag']:='value';

sur mobile lsoHover est identique à lsoPressed

10
property Rotation: boolean
Si True si la carte subit une rotation les labels restent à l'horizontale mais n'ont plus de fond.
property Transparent: boolean
Si True les labels ont la même opacité que leur élément associé
property Scale: boolean
Si True les labels utilisent celui de leur élément associé
var M:TECShapeMarker;
...
M := Map.addMarker(map.latitude,map.Longitude);
M.PropertyValue['my_tag']:='value_tag';
// you can also use
M['my_tag']:='value_tag';
// groups can also have them
map.shapes['tag']:='value';
map['group']['tag']:='value';

Fig. 5 Affichages des labels

Ajouter des Shapes

Vous pouvez utiliser les raccourcis suivant pour ajouter vos éléments

function TNativeMapControl.AddPOI(const Lat, Lng: double; const GroupName: string = ''): TECShapePOI;


function TNativeMapControl.AddMarker(const Lat, Lng: double; const GroupName: string = ''): TECShapeMarker;


function TNativeMapControl.AddLine(const Lat, Lng: double; const GroupName: string = ''): TECShapeLine;


var M:TECShapeMarker;
...
M := Map.addMarker(map.latitude,map.Longitude);
M.PropertyValue['my_tag']:='value_tag';
// you can also use
M['my_tag']:='value_tag';
// groups can also have them
map.shapes['tag']:='value';
map['group']['tag']:='value';

function TNativeMapControl.AddLine(const dLatLngs: array of double; const GroupName: string = ''): TECShapeLine;


var M:TECShapeMarker;
...
M := Map.addMarker(map.latitude,map.Longitude);
M.PropertyValue['my_tag']:='value_tag';
// you can also use
M['my_tag']:='value_tag';
// groups can also have them
map.shapes['tag']:='value';
map['group']['tag']:='value';

function TNativeMapControl.AddPolygone(const Lat, Lng: double; const GroupName: string = ''): TECShapePolygone;


function TNativeMapControl.AddPolygone(const dLatLngs: array of double; const GroupName: string = ''): TECShapePolygone;


function TNativeMapControl.AddInfoWindow(const Lat, Lng: double; const GroupName: string = ''): TECShapeInfoWindow;

Vous ne devez pas détruire manuellement les éléments ainsi créé si besoin utilisez remove, ils sont maintenu dans les listes de leur groupe respectif

2

TECClusterManager

Les propriétés suivantes vous permettent de modifier l'affichage des clusters

property Color : TColor
property Style : TClusterStyle (csEllipse, csStar, csRect, csTriangle, csHexagon, csDiamond)

Fig. 6 Cluster style

property TextColor : TColor
property BorderColor : TColor
property BorderSize : integer
property FontSize : integer
property Opacity : byte
property WidthHeight : integer
property FillClusterList : boolean
Conserve la liste des éléments contenu dans le cluster, par défaut false
Vous pourrez y avoir accès dans l'événement OnMouseOverCluster ( Cluster.shapes )
property MaxPixelDistance : integer

Les éléments qui sont à moins de MaxPixelDistance d'un cluster y sont regroupés, 60 pixels par défaut

property DrawWhenMoving : boolean

Permet d'afficher les clusters pendant que l'on déplace la carte, par défaut true

property MaxZoom : byte

Si le zoom est superieur à MaxZoom on ne regroupe pas les éléments, defaut 18

property OnAddShapeToCluster : TOnAddShapeToCluster (sender : TECCluster; const Shape:TECShape;var cancel:boolean)

Déclenché lors de l'ajout d'un élément dans un cluster, vous pouvez refuser en basculant cancel à true, défaut false

property OnColorSizeCluster : TOnColorSizeCluster (const Cluster : TECCluster;
var Color:TColor;var BorderColor:TColor;var TextColor:TColor,
var WidthHeight,FontSize:integer;var CStyle:TClusterStyle)

Déclenché avant l'affichage pour vous permettre d'ajuster les propriétés

property OnDrawCluster : TOnDrawCluster (const Canvas : TECCanvas; var rect : TRect; Cluster : TECCluster)

Si vous vous branchez sur cet évenement vous prenez en charge intégralement le dessin du cluster

property OnMouseOverCluster : TOnNotifyEventCluster (const Cluster : TECCluster)

Déclenché par l'entrée de la souris sur le cluster

property OnMouseOutCluster : TOnNotifyEventCluster (const Cluster : TECCluster)

Déclenché par la sortie de la souris du cluster

:$cluster-bug

property Cursor: TECShape ;

Curseur de dessin, par défaut un TECShapePOI en forme de croix

property Line: TECShapeLine;

La ligne qui représente votre dessin, vous pouvez ajuster ses propriétés soit directement soit par un style.

// style for draw line
map.Styles.addRule('#TECNativeFreeHand.Line {color : green;penStyle:Dash;weight:2}') ;

Fig. 7 Style FreeHand Line

property PolygoneSelection: TECShapePolygone ;

Accessible dans l'événenement OnSelection, il représente l'aire de votre sélection

property SelectionList: TECShapesList;

Accessible dans l'événement OnSelection, cette liste contient les éléments sélectionnés

property OnPermission : TOnFreeHandPermission
Controler l'autorisation de FreeHand
map.FreeHand.Selection := True;
map.FreeHand.OnPermission := doOnFreeHandPermission;
...
// selection with freeHand is only allowed if CTRL or SHIFT is pressed
procedure TForm1.doOnFreeHandPermission(sender : TObject;var valid:boolean);
begin
valid := (((GetKeyState(VK_CONTROL) and $8000) = $8000) or
((GetKeyState(VK_SHIFT) and $8000) = $8000)
);
end;

property SelectionFilter: TOnShapeFilter

Permet de définir un filtre pour la sélection

map.FreeHand.SelectionFilter := FilterCafe;
...
// select only cafe
procedure FilterCafe(const Shape: TECShape; var cancel: boolean);
begin
cancel := shape.PropertyValue['kind']<>'cafe' ;
end;

function AddLine(const GroupName:string=''):TECShapeLine;

Ajouter définitivement votre tracé en tant que Line à votre carte

function AddPolygone(const GroupName:string=''):TECShapePolygone;

Ajouter définitivement votre tracé en tant que Polygone à votre carte

SelectArea

Cette propriété permet de sélectionner une zone rectangulaire ou circulaire.

Fig. 8 Demo SelectArea

property AreaType: TECAreaType ;

Type de sélection : atRectangle ou atCircle

property Area: double

Surface en Km² de la sélection

property Width: double

Largeur en Km de la sélection

property Height: double

Hauteur en Km de la sélection

property Color : TColor

Couleur de la sélection

procedure setPosition(const Lat,Lng:double)

Positionner le centre de la sélection

procedure Boundary(const dNELat, dNELng, dSWLat, dSWLng: double)

Définir le rectangle englobant la zone de sélection

procedure fitBounds

Zoomer sur la sélection

property Center : TLatLng

Centre de la sélection

property NELat: double

Latitude du coin haut droit de la zone de sélection

property NELng: double

Longitude du coin haut droit de la zone de sélection

property SWLat: double

Latitude du coin bas gauche de la zone de sélection

property SWLng: double

Latitude du coin bas gauche de la zone de sélection

property Visible: boolean

Afficher la zone de sélection

property ShowMetrics : boolean

Afficher ou pas les informations Width, Height et Area au centre de la zone de sélection

property OnChange: TNotifyEvent

Événement déclenché après un déplacement et à la fin d'un rédimensionnement de la zone de sélection

property OnClick: TNotifyEvent

Événement déclenché après un click dans la zone de sélection

property OnDblClick: TNotifyEvent

Événement déclenché après un double click dans la zone de sélection

property OnLongPress: TNotifyEvent

Événement déclenché après une pression longue dans la zone de sélectionÉvénement déclenché après un click dans la zone de sélection

property OnRightClick: TNotifyEvent

Événement déclenché après un click droit dans la zone de sélection

property OnUpdateMetric : TOnUpdateMetric

Événement déclenché avant l'affichage des métriques pour pouvoir les modifier
procedure TFSelectArea.FormCreate(Sender: TObject);
begin
map.SelectArea.OnChange := doOnChange;
map.SelectArea.OnUpdateMetric:= doUpdateMetric;
map.SelectArea.Visible := true;
end;

procedure TFSelectArea.doUpdateMetric(const sender: TECSelectArea; var Value: string);
begin
// display only area
value := 'Area : '+doubletostrdigit(map.SelectArea.Area, 3)+' Km²';
end;

procedure TFSelectArea.doOnChange(sender : TObject);
begin
case map.SelectArea.AreaType of
atRectangle: begin
info.Caption := 'NorthEst : '+ doubletostrdigit(map.SelectArea.NELat,3)+','+
doubletostrdigit(map.SelectArea.NELng,3)+' SouthWest : '+
doubletostrdigit(map.SelectArea.SWLat,3)+','+
doubletostrdigit(map.SelectArea.SWLng,3)+
' W : '+doubletostrdigit(map.SelectArea.Width, 2)+' Km '+
'H : '+doubletostrdigit(map.SelectArea.Height, 2)+' Km '+
'Area : '+doubletostrdigit(map.SelectArea.Area, 3)+' Km²';
end;
atCircle: begin
info.Caption := 'Lat : '+ doubletostrdigit(map.SelectArea.Center.lat,3)+','+
doubletostrdigit(map.SelectArea.Center.lng,3)+' Radius : '+
doubletostrdigit(map.SelectArea.Width / 2,2)+' Km Area : '+doubletostrdigit(map.SelectArea.Area, 3)+' Km²';
end;
end;
end;

Grids

Cette propriété gère des grilles que vous pouvez supperposer sur votre carte, les grilles peuvent être rectangulaire ou délimitée par un polygone.


Fig. 9 Demo Grids

function Add(const col, row: integer;const GridName: string = '') : TECGrid;

function Add(const Poly: TECShapePolygone;const CellSizeMeter: integer = 500; const GridName: string = ''): TECGrid;

var grid:TECGrid;
// add a 5x3 grid
grid := Map.Grids.Add(5,3,'grid 5x3');
// create a grid on a polygon with cells of 1Km by 1Km
grid := Map.Grids.Add(Map['groupx'].Polygones[1],1000);
procedure Clear;
Effacer l'ensemble des grilles
function Count: integer;
Retourne le nombre de grilles
function getList(const aList:TStrings):integer;
Remplir aList avec les noms des grilles
property FocusedGrid: TECGrid
Donne le focus à une grille en particulier

property Grid[index: integer]: TECGrid default;

property Grid[index: string]: TECGrid default;

// get a grid by index
grid := Map.Grids[1];
// get a grid by his name
grid := Map.Grids['grid 2'];
// grid = nil if not exists
property EditableGrid: TECGrid
Retourne la grille qui est en mode édition, nil s'il n'y en a pas
property toTxt: string
Exporte / importe les grilles au format texte
property OnFocusedGrid: TNotifyEvent
Déclenché lorsqu'une grille a le focus
property OnCellClick: TOnCellEvent
property OnCellDblClick: TOnCellEvent
property OnCellRightClick: TOnCellEvent
property OnCellLongPress: TOnCellEvent
Déclenchés lors des interactions avec une cellule
property OnChange : TNotifyEvent
Déclenché lors de l'ajout ou de la suppression d'une grille
property OnEditChange : TOnEditChange
Déclenché lorsque la grille est déplacée ou modifiée en mode editable
property OnHeaderClick: TOnHeaderClick
Déclenché par un click sur un label référençant les colonnes et les lignes
map.grids.OnFocusedGrid := doFocusedGrid;
map.grids.OnCellRightClick := doGridRightClick;
map.grids.OnHeaderClick := donOnHeaderClick ;
map.grids.OnCellClick := doCellClick;
map.grids.OnCelldblClick := doCellDblClick;
map.grids.OnCellLongPress := doCellLongPress;
map.Grids.OnEditChange := doOnEditChange;
map.Grids.OnChange := doChangeGrids;
...
procedure TForm8.doFocusedGrid(Sender: TObject);
begin
// here sender = map.grids.FocusedGrid
if assigned(map.grids.FocusedGrid) then
begin
col.Value := map.grids.FocusedGrid.col;
row.Value := map.grids.FocusedGrid.row;
end;
end;

procedure TForm8.doOnEditChange(const Grid:TECGrid);
begin
info.Caption := (
'NorthEst : '+ doubletostrdigit(Grid.NELat,3)+' , '+doubletostrdigit(Grid.NELng,3)+
' SouthWest : '+doubletostrdigit(Grid.SWLat,3)+' , '+doubletostrdigit(Grid.SWLng,3)+
' - Col : '+inttostr(Grid.col)+' Row : '+inttostr(Grid.row));
end;

// click on labels
procedure TForm8.donOnHeaderClick(const Grid:TECGrid;const Text:string;const index: integer; const Position : TECHeaderLabelPosition) ;
var PosText:string;
begin

case Position of
hlpTop : PosText := 'Top';
hlpBottom: PosText := 'Bottom';
hlpLeft : PosText := 'Left' ;
hlpRight : PosText := 'Right';
end;

info.Caption := (Text + ' - Index : '+inttostr(index)+' Pos : '+PosText);
end;

procedure TForm8.doCellClick(const Grid:TECGrid; const Item: TECShapePolygone);
begin
info.Caption := ('Click '+Item.Description+ ' - Col:'+ Item['cell-col']+' Row:'+Item['cell-row']);
end;

procedure TForm8.doCellDblClick(const Grid:TECGrid; const Item: TECShapePolygone);
begin
info.Caption := ('DblClick '+Item.Description+ ' - Col:'+ Item['cell-col']+' Row:'+Item['cell-row']);
end;


procedure TForm8.doCellLongPress(const Grid:TECGrid; const Item: TECShapePolygone);
begin
info.Caption := ('Press '+Item.Description+ ' - Col:'+ Item['cell-col']+' Row:'+Item['cell-row']);
Grid.editable := true;
end;

procedure TForm8.doGridRightClick(const Grid:TECGrid; const Item: TECShapePolygone);
begin
info.Caption := ('RightClick '+Item.Description+ ' - Col:'+ Item['cell-col']+' Row:'+Item['cell-row']);
end;

property OnHeaderColLabel: TOnHeaderLabel

property OnHeaderRowLabel: TOnHeaderLabel

Permet de prendre en charge les intitulés des labels, par défaut les colonnes sont une suite alphabétiques (A,B,..,AA,AB..) et les lignes une suite numérique
// swap labels col & row
map.Grids.OnHeaderColLabel := doOnHeaderColLabel;
map.Grids.OnHeaderRowLable := doOnHeaderRowLabel;
...
procedure TForm.doOnHeaderColLabel(const index:integer;var value:string) ;
begin
value := inttostr(index);
end;
//
procedure TForm.doOnHeaderRowLabel(const index:integer;var value:string) ;
begin
value := NumberToAlphabet(index); // unit uecMapUtil
end;


TECGrid

Cette classe gère une grille

procedure setPosition(const Lat, Lng: double);
Si la grille est en mode Editable et qu'elle n'est pas défini à partir d'un polygone, alors elle va être centrée sur le point indiqué
procedure Boundary(const dNELat, dNELng, dSWLat, dSWLng: double);
Défini une grille rectangulaire dont le coint haut-droit est de coordonnées dNELat, dNELng et le coin bas-gauche dSWLat, dSWLng
procedure setSize(const icol, irow: integer);
Redéfini le nombre de colonnes et de lignes
procedure PolygonToGrid(const P: TECShapePolygone;
const aCellSizeMeter: integer);
Définir la grille pour qu'elle remplisse le polygone avec des cellules dont la hauteur et la largeur sont spécifiées en mètres.
procedure fitBounds;
Zoomer sur la grille
function getCellAt(const lat,lng:double):TECShapePolygone;
Retourne la cellule contenant le point Lat,Lng

Nil est retourné s'il n'y a pas de cellule

2
property Name: string
Nom de la grille
property GridType: TECGridType
Retourne gtTable pour une grille rectangulaire, gtPolygon si la cellule est défini à partir d'un polygone
property CellSizeMeter: integer
Indique ou défini la taille des cellules en mètres
property CellColor: TColor
Couleur des cellules
property HoverColor: TColor
Couleur lors du survol d'une cellule
property CellWeight: byte
Epaisseur des cellules
property col: integer
Nombre de colonnes
property row: integer
Nombre de lignes
property Cells[ColIndex, RowIndex: integer]: TECShapePolygone default;
Retourne le polygone de la cellule ou nil
property Editable: boolean
Permet de basculer une grille de type gtTable en mode édition

property NELat: double
property NELng: double
property SWLat: double
property SWLng: double
Coordonnées des coins haut-droit et bas-gauche
property ShowHeaderLabel: boolean
Afficher ou non les labels
property ZIndex: integer
ZIndex de la grille

property toTxt: string
Importe et exporte une grille au format texte
Aller à la page
Réalisé avec la version gratuite pour les particuliers d'Help&Web