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

TECNativeMap

TECNativeMap disponible en version VCL et Firemonkey ( Windows , Mac OS X , iOs et Android) pour le même prix !

Vous profitez d'un mode hors-ligne, et vous gardez le contrôle sur vos données en évitant Google Maps et autre Bing Maps.

Fig. 58 ECNativeMap on Mac OS X
Fig. 58 ECNativeMap on Mac OS X

TECNativeMap vous permet d'utiliser les cartes d'OpenStreetMap, de MapQuest, ArcGIS World, d'OpenCycleMap, de MapBox, d'OPNV mais aussi vos propres serveurs, ces cartes sont aussi disponibles avec TECMap.

Pour sélectionner un fournisseur de cartes utilisez la propriété TileServer

map.TileServer := tsOsm;

Bing

En renseignant la propriété BingKey avec votre clef Bing vous pourrez utiliser les tuiles de Bing Maps ( tsBingRoad, tsBingAerial, tsBingAerialLabels )

map.BingKey := YOUR_BING_KEY
map.TileServer := tsBingRoad;

Fig. 59 Bing Maps

Here

En renseignant les propriétés HereID et HereCode vous pouvez utiliser les tuiles de Here ( tsHereNormal, tsHereTerrain, tsHereSatellite, tsHybrid, tsHereMobile, tsHereHiRes, tsHereTransit, tsHereTraffic, tsHereFlow, tsHereTruck, tsHereTruckTransparent )

map.HereID := YOUR_HERE_ID
map.HereCode := YOUR_HERE_CODE
map.TileServer := tsHereTraffic;

Fig. 60 Here Traffic

MapBox

Pour utiliser les tuiles de MapBox ( tsMapBoxSatellite, tsMapBoxStreets,tsMapBoxStreetsSatellite,tsMapBoxStreetsBasic ) il vous suffit d'entrer votre token dans MapBoxToken.

Fig. 61 MapBoxStreets

Yandex

tsYandexNormal, tsYandexSatellite et tsYandexHybrid sont aussi utilisables (merci alexey t.) et vous permettent d'utiliser les tuiles de Yandex.

Yandex utilise la projection Mercator elliptique différente de la projection par defaut (Mercator sphérique style google maps), cela est pris en charge par TECNativeMap vous n'avez donc rien à faire.

Vous ne pourrez pas utiliser tsYandexHybrid avec une base de tuiles qui n'utilise pas la même projection !

30

Utilisez votre propre serveur de tuiles

En plus des cartes précédente vous pouvez utiliser n'importe quel autre fournisseur utilisant le même format, l'exemple ci-dessous ne doit pas être employé en production pour des raisons légales.


procedure TForm.FormCreate(Sender: TObject);
begin
Map.LocalCache := ExtractFilePath(application.exename) + 'cache';
Map.MaxZoom := 21;
// provider of custom tiles
Map.TileServerInfo.Name := 'GGL-ROAD';
Map.TileServerInfo.GetTileFilename := GetGoogleTile;
end;


procedure TForm.GetGoogleTile(var TileFilename:string;const x,y,z:integer);
begin
TileFilename := format('http://mt%d.googleapis.com/vt?x=%d&y=%d&z=%d',[random( 4),x,y,z]);
end;

Pour des questions de licences vous ne pouvez pas utiliser directement les tuiles de Google, mais vous le pouvez au travers du composant TECMap .

31

Inscrutation de tuiles

Vous pouvez utiliser autant de serveurs de tuiles que vous le voulez pour les afficher par dessus votre carte de base, l'exemple ci-dessous incruste une carte des nuages.


var overlay:TECOverlayTileLayer;
...
// overlay clouds tiles
overlay := map.AddOverlayTiles(GetWeatherTile);

// remove overlay

map.RemoveOverlayTiles(overlay);

...

procedure TForm.GetWeatherTile(var TileFilename:string;const x,y,z:integer);
begin
TileFilename := format('http://%s.tile.openweathermap.org/map/clouds/%d/%d/%d.png',[Char(Ord( 'a') + random(3)),z,x,y]);
end;


Fig. 62 Incrustation des nuages

Vous pouvez aussi utiliser un stream

procedure TForm.getOverlayTileStream(var TileStream: TMemoryStream;const x, y, z: integer);
begin
// here fill the stream with your tile

end;

...
map.AddOverlayStreamTiles(getOverlayTileStream);

Ou directement utiliser un serveur prédéfini transparent comme tsHereFlow ou tsHereTruckTransparent

// mix Bing Aerial Labels and Here Flow
map.TileServer := tsBingAerialLabels;
map.AddOverlayTileServer(tsHereFlow);

En mode VCL Votre overlay doit utiliser des pngs pour qu'il s'inscruste sur votre carte, sous FMX vous pouvez utiliser la propriété opacity.

59


var overlay:TECOverlayTileLayer;
...
// overlay clouds tiles
overlay := map.AddOverlayTiles(GetWeatherTile);

// set opacity 0..1
overlay.opacity := 0.5;

Utilisez RemoveAllOverlayTiles pour supprimer tous les overlays

Positionnement sur la carte

Vous pouvez déterminer les coordonnées du centre de la carte au travers des propriétés Latitude et Longitude, elles sont de type double et accessible en lecture/écriture

Vous pouvez directement modifier les coordonnées au travers de la procédure setCenter(const dlatitude,dlongitude:double)

// Delphi map component ECMap
var lat,lng:double;
begin
// get center of map
lat := map.Latitude;
lng := map.Longitude;
// move center of map
map.setCenter(lat+0.001,lng);

end;

Position de la souris

Les latitude et longitude du point situé sous le curseur de la souris sont renvoyés par la propriété MouseLatLng

Vous pouvez vous brancher sur l'évènement OnMapMouseMove pour connaitre en temps réel votre position

Réagir au changement de position

Lorsque le centre de la carte est déplacé, que cela soit par code ou directement à la souris, l'évènement OnMapMove(sender: Tobject;const dLatitude,dLongitude:double) est déclenché

Sender représente le composant ECMap qui a été modifié, dLatitude et dLongitude les nouvelles coordonnées, qui sont aussi accessible au travers de Latitude et Longitude

Lorsque la carte commence à bouger l'évènement OnMapDragStart est déclenché, puis OnMapDrag pendant le déplacement et OnMapDragEnd en fin de déplacement.

Vous pouvez aussi réagir lors du déplacement de la souris en vous branchant sur OnMapMouseMove

Zone affichée

Vous pouvez déterminer les coordonnées du point Nord Est (en haut à droite) et du point Sud Ouest (en bas à gauche) de la zone affichée par le composant au travers des propriétés NorthEastLatitude, NorthEastLongitude, SouthWestLatitude et SouthWestLongitude, elles sont de type double et accessible uniquement en lecture.

La procedure BoundingBox(maxLatitude,maxLongitude,minLatitude,minLatitude) limite la zone accessible de votre carte, l'événement OnOutOfBounds est déclenché si vous tentez d'accéder à une zone interdite.

Un appel à BoundinBox sans paramètre lève les limitations.

60

La procédure fitBounds(const dLatlo,dLnglo,dLathi,dLnghi:double) vous permet de d'ajuster la vue aux coordonnées passées.

la procedure boundingCoordinates(const lat, lng, radius: double; var latSW, lngSW,latNE, lngNE: double); retourne les coordonnées d'une zone rectangulaire en fonction du point central et d'une distance en Km.

La fonction ContainsLatLng(var dLatitude,dLongitude:double):boolean vous indique si le point en dLatitude,dLongitude est dans la portion visible de la carte.

Dés que la vue change l'évènement OnChangeMapBounds(sender: TObject) est déclenché.

La function ScreenShot retourne un TBitmap contenant l'image de la carte

Zoom

La propriété Zoom vous permet de contrôler la définition de votre carte, elle est de type integer et est accessible en lecture/écriture

Vous avez accès aussi au propriété MaxZoom et MinZoom qui vous permettent de déterminer les limites du zoom

61

Utilisez la procedure ZoomAround(const LatLngZoom:TLatLng; const NewZoom:Integer) pour zoomer tout en restant centré sur un point précis (comme à la souris)

Le changement de zoom déclenche l'évènement OnChangeMapZoom(sender: TObject)

En positionnant la propriété DragRect sur drZoom vous pouvez sélectionner une zone avec la souris en maintenant le bouton droit enfoncé, lorsque vous relachez le bouton un zoom est effectué sur la région sélectionnée.

ZoomScaleFactor

Cette propriété vous permet d'émuler les zooms intermédiaires

// emulate zoom 16.35

map.zoom := 16;
map.zoomScaleFactor := 35;


Faites Click droit + molette pour changer ZoomScaleFactor à la souris

12

Fig. 63 ZoomScaleFactor

ZoomScaleFactor peut varier de 0 à 999, si le zoom maximum n'est pas atteind 100 correspond à zoom+1 (et inversement)

62

Utilisez la procedure ZoomScaleFactorAround(const LatLngZoom:TLatLng; const NewZoomScaleFactor:Integer) pour zoomer tout en restant centré sur un point précis (comme à la souris)

Adapter les markers au Zoom

Utilisez la propriété ScaleMarkerToZoom pour que la taille des markers changent en fonction du Zoom.

Fig. 64 ScaleMarkerToZoom

map.ScaleMarkerToZoom := true;

Sélection

La propriété Selected vous permet de sélectionner des éléments.

// select items in area
nbr_item_selected := map.Selected.ByArea(NorthEastLat,NorthEastLng,SouthWestLat,SouthWestLng);

// select items <=Max_Distance_KM to CenterPointLat,CenterPointLng
nbr_item_selected := map.Selected.ByKMDistance(CenterPointLat,CenterPointLng,Max_Distance_KM);

// loop to all selected items

var shape:TECShape

for shape in map.Selected do
begin
..
end;

En positionnant DragRect sur drSelect vous pouvez effectuer une sélection avec la souris en maintenant le bouton droit enfoncé puis en le relachant une fois la zone délimitée.

Par défaut les éléments sélectionnés sont dessinés en utilisant la couleur définie pour le survol de la souris, vous pouvez ajouter une marque distinctive en vous branchant sur leur événement OnAfterDraw.

Cet exemple ajoute une étoile rouge en haut à droite des éléments sélectionnés

// when you create item you must connect like this item.OnAfterDraw := doAfterDraw

procedure TForm1.doAfterDraw(const canvas: TECCanvas; var rect: TRect; item: TECShape) ;
var size_start : integer;
begin
if assigned(item) and (item.Selected) then
begin
size_start := (item.Width div 2);
if size_start< 10 then size_start := 10;

canvas.Pen.Color := claBlack;
canvas.PenWidth(1);
canvas.Brush.Color := GetHighlightColorBy(claRed,16);

rect.Left := rect.Left + (rect.Right-rect.Left) - size_start;
rect.Top := rect.Top - (size_start div 2);
rect.Bottom := rect.Top + size_start ;

canvas.DrawStar(rect);
end;
end;

Fig. 65 3 selected items

Rotation de la carte

Disponible seulement dans la version Firemonkey

22
Placez votre composant dans un conteneur (TPanel, TRectangle) qui servira à délimiter la zone visible puis activez la propriété OverSizeForRotation

map.OverSizeForRotation := true;

// To allow or not the rotation gesture use the property EnableTouchRotation

map.EnableTouchRotation := true;

EnableTouchRotation permet d'autoriser ou non la rotation par geste.

63

Fig. 66 Rotation map

Url

La propriété Url retourne/accepte une chaine au format '#zoom/Latitude/Longitude'


// zoom 18 latitude 48.856527 longitude 2.352104
// welcome to Paris !
map.Url := '#18/48.856527/2.352104';

L'assignation d'une valeur à cette propriété déclenche l'événenement OnBeforeUrl(sender : TObject; var Url:string) qui peut vous permettre de modifier l'url, et même d'annuler le changement en retournant une chaine vide.

Vous pouvez passer une tel lien dans une InfoWindow



// welcome to Paris !
map.Shapes.InfoWindows[0].Content := 'Go to <a href="#18/48.856527/2.352104">Paris !</a>';

Fig. 67 Url Link

Si vous passez une url "classique" elle s'ouvrira dans votre navigateur par défaut.

4

Distance

La fonction DistanceFrom(const dLatitudeStart,dLongitudeStart,dLatitudeEnd,dLongitudeEnd:double):double permet de calculer la distance entre 2 points, le résultat est en Kilomètres.

Angle par rapport au Nord

La fonction Bearing(const dLatitudeStart,dLongitudeStart,dLatitudeEnd,dLongitudeEnd:double):integer vous donne l'angle, de 0° à 360°, pour la direction allant du point dLatitudeStart,dLongitudeStart au point dLatitudeEnd,dLongitudeEnd

MiniMap

Fig. 68 MiniMap

Pour afficher une mini carte navigable dans votre carte principale il vous suffit d'ajouter l'unité uecNativeMiniMap à votre fiche ainsi que les lignes suivantes.

// Delphi native map component TECNativeMap

var FMiniMap : TECNativeMiniMap;
...
// create and show minimap on Map
FMiniMap := TECNativeMiniMap.create(Map);

// for hide minimap
FMiniMap.Map := nil;

// for show
FMiniMap.Map := Map;





Vous n'avez pas à libérer votre minimap, elle le sera automatiquement lors de la destruction de la carte à laquelle elle est rattachée.

23

Vous pouvez modifier le coin d'ancrage avec la propriété ancragePosition (apTopLeft, apTopRight, apBottomLeft, apBottomRight )

XMargin et YMargin permettent d'ajuster la position par rapport aux bords

BorderColor et BorderSize modifie la couleur et taille de la bordure entourant la mini carte.

Barre d'échelle

Pour afficher l'échelle il vous faut ajouter l'unité uecNativeScaleMap et les lignes suivantes.

procedure TForm1.FormCreate(Sender: TObject);
begin

FECNativeScaleMap := TECNativeScaleMap.create ;
FECNativeScaleMap.Map := map;

end;

procedure TForm1.FormDestroy(Sender: TObject);
begin

FECNativeScaleMap.free;

end;

Fig. 69 Scale bar

Les propriétés suivantes sont disponible :

AnchorPosition (apTopLeft, apTopRight, apBottomLeft, apBottomRight )

XMargin et YMargin pour ajuster par rapport aux coins

BarSize finesse de la barre (defaut 2)

Color couleur (defaut black)

MaxWidth longueur maximale de la barre en pixels (defaut 80)

MesureSystem système de mesure (msMetric, msImperial) defaut msMetric

Shadow ajoute une ombre (defaut true)

Outil de mesure

Vous pouvez utiliser un outil de mesure en ajoutant l'unité uecNativeMeasureMap et les lignes

procedure TForm1.FormCreate(Sender: TObject);
begin

FECNativeMeasureMap := TECNativeMeasureMap.create ;
FECNativeMeasureMap.Map := map;

FECNativeMeasureMap.StartMeasure(map.latitude,map.longitude);

end;

procedure TForm1.FormDestroy(Sender: TObject);
begin

FECNativeMeasureMap.free;

end;


Fig. 70 Outil de mesure

Les propriétés suivantes sont disponible :

Color couleur de la ligne defaut noir

MeasureSystem unité de mesure (msMetric, msImperial) defaut msMetric

Distance : double la distance dans l'unité choisie
DistanceLabel : string la distance en texte (celle qui s'affiche à l'écran)

ShowDistance permet d'afficher ou non la distance à l'écran ( defaut true )

Hint le texte d'information lorsqu'on laisse la souris sur la ligne

OnChange : TNotifyEvent déclenché lorsque la distance change

Observateur

Un observateur vous permet d'être averti lorsqu'un événement particulier à lieux que cela soit un déplacement de la carte ou d'un élément.

Cela a l'avantage de ne pas bloquer les événements principaux de la carte et des shapes tout en les démultipliant.


TNativeMapObserver = class(TObject)
public

property OnMapFree : TNotifyEvent ;
property OnMapHiResChange : TNotifyEvent ;
property OnMapActiveChange : TNotifyEvent
property OnMapAnimation : TNotifyEvent;
property OnMapResize : TNotifyEvent;
property OnMapRotation : TNotifyEvent;
property OnMapMove : TNotifyEvent;
property OnMapMouseMove : TNotifyEvent;
property OnMapMouseClick : TNotifyEvent;
property OnMapEndMove : TNotifyEvent;
property OnMapzoom : TNotifyEvent;
property OnMapLoad : TNotifyEvent;
property OnMapBounds : TNotifyEvent;
property OnMapChangeBounds : TNotifyEvent;
property OnMapTileServer : TNotifyEvent;
property OnMapAddRoute : TNotifyEvent;
property OnMapErrorRoute : TNotifyEvent;
property OnMapChangeRoute : TNotifyEvent;
property OnMapPaint : TNotifyEvent;
property OnShapesPaint : TNotifyEvent;
property OnMapShapeDescription : TNotifyEvent;
property OnMapShapeProperties : TNotifyEvent;
property OnMapShapeHint : TNotifyEvent;
property OnMapShapeClick : TNotifyEvent;
property OnMapShapeMove : TNotifyEvent;
property OnMapShapeDblClick : TNotifyEvent;
property OnMapShapeMouseOut : TNotifyEvent;
property OnMapShapeMouseOver : TNotifyEvent;
property OnMapShapeDrag : TNotifyEvent;
property OnMapShapeDragEnd : TNotifyEvent;
property OnMapShapePathChange : TNotifyEvent;
property OnMapShapeRightClick : TNotifyEvent;
property OnMapShapesChange : TNotifyEvent;

Vous pouvez enregistrer autant d'observateurs que vous le souhaitez.

FObserver1 := TNativeMapObserver.Create;
FObserver1.OnMapResize := Map_Resize;
FObserver1.OnMapMove := Map_Move;

FObserver2 := TNativeMapObserver.Create;
FObserver2.OnMapBounds := Map_Bounds;
FObserver2.OnMapTileServer := Map_TileServer;
FObserver2.OnMapRotation := Map_Rotate;

// attach observer
map.attach(FObserver1);
map.attach(FObserver2);
...
// detach
map.detach(FObserver1);
map.detach(FObserver2);
...
FObserver1.free;
FObserver2.free;

Les layers utilisent ce système pour réagir au changement de position.

Aller à la page
Composant Delphi / Google Maps / OpenStreetMap / Leaflet  / Mappilary© 2016 ESCOT-SEP Christophe - Réalisé avec Help&Web - RSS - RSS - Google+