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

16

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

18
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

19
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

20
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
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

17

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

18

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

4
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

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

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

22
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

23

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

24
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

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é

25

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.

19
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

11
// 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

5
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