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

Shapes

Vous êtes ici :TECNativeMap

Sommaire

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

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

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

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

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. 44 Clustering

property ClusterManager : TECClusterManager

Gestion des clusters

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

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

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;

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

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

property Clickable : boolean

Indique si l'ensemble des éléments sont clickables

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

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

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

Fig. 45 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

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

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é

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

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.

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

// 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. 46 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

proper022\grids.onheader.pas)>>

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

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

Shapes

Sommaire

Styles

Groupes ( TECShapes )

CSV

Labels

TECGrid

Voir aussi

Mots clefs