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

TECCesiumMap

Vous êtes ici :Autres composants
Cesium est une bibliothèque Javascript pour gérer des globes 3D et des cartes 2D, plus d'informations sur le site www.cesiumjs.org

TECCesiumMap est un composant qui vous permet d'utiliser Cesium dans vos développements Delphi, il n'est pour l'instant disponible que pour la VCL (Windows)

Internet Explorer 11 est le minimum requis pour utiliser Cesium, TECCesiumMap ne fonctionne pas sous XP !

40

Fig. 167 TECCesiumMap

Ce composant est intégré dans la suite TECMap

110

Installation

Par défaut TECCesiumMap utilise les serveurs de cesiumjs.org, mais pour la mise en production de vos développements je vous conseille fortement d'installer cesium sur votre propre serveur Web.

Téléchargez la dernière archive de Cesium puis dezippez la simplement sur votre serveur.

TECesiumMap dispose de la propriété WebServer qu'il vous suffit de renseigner avec le répertoire racine de votre installation.

Utilisez CreateRuntimeCesiumMap pour une creation dynamique

39
// function CreateRuntimeCesiumMap(AOwner: TComponent=nil;AParent:TWinControl=nil):TECCesiumMap;

cesium := CreateRuntimeCesiumMap(self,panel1);

Vous devez obtenir une clef pour utiliser l'api de Cesium, branchez-vous sur l'événement OnInitialize pour connecter votre Token.
Vous devez aussi placer le fichier cesium-app.html sur votre serveur.

35
map.OnInitialize := doInitialize;
...

procedure TForm.doInitialize(Sender: TObject);
begin
TECCesiumMap(sender).WebServer := 'http://www.your_serveur.com/cesium-app.html';
TECCesiumMap(sender).IonAccessToken := 'your cesium ion token';
end;

TCesiumControl

La structure est la même que pour TECNativeMap, les éléments fonctionnent de la même manière et vous retrouvez la notions de groupes, la géolocalisation et le calcul des routes sont identiques

Ce composant non visuel est celui qui manipule vraiment Cesium, TECCesiumMap est le composant visuel que vous installez sur vos formes et qui utilise TCesiumControl



111

function Add(const shape: TNativeShape; const Lat, Lng: double; const GroupName: string = ''): TECCesiumShape;

function AddRoute(const routePath: TECroutepath; const GroupName: string = ''): TECCesiumShapeLine;

function AddPOI(const Lat, Lng: double; const GroupName: string = '') : TECCesiumShapePOI;

function AddPOIText(const Lat,Lng:Double;const Text:string='';const GroupName:string=''): TECCesiumShapePOI;

function AddMarker(const Lat, Lng: double; const GroupName: string = '') : TECCesiumShapeMarker;

function AddLine(const Lat, Lng: double; const GroupName: string = '') : TECCesiumShapeLine;

function AddPolygone(const Lat, Lng: double; const GroupName: string = '') : TECCesiumShapePolygone;

function AddInfoWindow(const X,Y: double; const GroupName: string = '') : TECCesiumShapeInfoWindow;

Contrairement à TECNativeMap dans TECCesiumControl vous indiquez des coordonnées écran pour positionner votre fenêtre d'information

41

procedure Remove(const shape: TECCesiumShape);

procedure Clear

procedure BeginUpdate

procedure EndUpdate

procedure SaveToFile(const Filename: string);

procedure LoadFromFile(const Filename: string)

procedure setCenter(const Lat, Lng: double);

procedure fitBounds(const NELat, NELng, SWLat, SWLng: double);

procedure fitBoundsRadius(const dLat, dLng, dRadiusKm: double);

procedure FlyTo(const Lat, Lng, alt: double);

procedure Jumpto(const Lat, Lng, alt: double);

procedure LookAt(const Lat, Lng, alt: double);

procedure GECamera(const Lat, Lng, alt, Tilt, Heading, roll: double);

procedure Javascript(const js:string);

function GetRoutePathByAdress(const StartAdress, EndAdress: string; const routeType: TMQRouteTyp = rtFastest; const params: string = ''): TECroutepath;

function GetRoutePathFrom(const dLatLngs: array of double; const routeType: TMQRouteType = rtFastest; const params: string = ''): TECroutepath;

function GetASyncRoutePathByAdress(const StartAdress, EndAdress: string; const routeType: TMQRouteTyp = rtFastest; const params: string = ''): TECroutepath;

function GetASyncRoutePathFrom(const dLatLngs: array of double; const routeType: TMQRouteType = rtFastest; const params: string = ''): TECroutepath;

property Address: string

property MouseLatLng: TLatLng

property MouseAlt: double

property ScreenShot: TBitmap

property ClickX : integer read FClickX;

Position en X (coordonnée écran ) du click

property ClickY : integer read FClickY;

Position en Y (coordonnée écran ) du click

property MouseX : integer read FMouseX;

Position en X (coordonnée écran ) de la souris

property MouseY : integer read FMouseY;

Position en Y (coordonnée écran ) de la sourisk

property Shapes: TECCesiumShapes read FShapes;

property HintInfoWindow : TECCesiumShapeInfoWindow read getHintInfoWindow;

Donne accès au TECCesiumShapeInfoWindow qui gère les info-bulles des éléments, utile pour modifier le style

property Group[value: string]: TECCesiumShapes read getShapesGroup;

property Groups:TECGroupShapesList read getShapesGroups;

property toKml: string read getToKml write setToKml;

property toGpx: string read getToGPX write setToGpx;

property toTxt: string read getToTxt write setToTxt;

property toGeoJSon: string read getToGeoJSon write setToGeoJSon;

property Url: string read getUrl write setUrl;

property WebServer : string read FWebServeur write setWebServeur;

property BingKey: string

property Latitude: double ;

property Longitude: double ;

property Altitude: double;

property Zoom: double;

property Draggable;

property TileServer: TTileServer

Les serveurs suivant sont disponibles :

  • tsOpenMapQuest
  • tsOSM
  • tsOpenCycleMap
  • tsArcGisWorldTopoMap
  • tsArcGisWorldStreetMap
  • tsArcGisWorldImagery
  • tsBingRoad
  • tsBingAerial
  • tsBingAerialLabels

Il est conseillé de remplir la propriété BingKey avec votre clef Bing pour utiliser les tuiles de Bing Maps ( tsBingRoad, tsBingAerial, tsBingAerialLabels )

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

property Terrain: boolean;

Active le relief du terrain

property SceneMode: TCesiumMode;

Sélectionne le type d'affichage, par défaut 3D

  • cm2D
  • cmColombus
  • cm3D

Événements

property OnMapClick: TOnMapLatLng

property OnMapRightClick: TOnMapLatLng

property OnMapMove: TOnMapLatLng

property OnMapMouseMove: TOnMapLatLng

property OnMapMouseUp: TOnMapLatLng

property OnMapMouseDown: TOnMapLatLng

property OnShapeMove: TOnShapeMove

property OnShapeDrag: TOnShapeMove

property OnShapeDragEnd: TNotifyEvent

property OnShapeMouseOver: TOnShapeMouseEvent

property OnShapeMouseOut: TOnShapeMouseEvent

property OnShapeMouseDown: TOnShapeMouseEvent

property OnShapeMouseup: TOnShapeMouseEvent

property OnShapeClick: TOnShapeMouseEvent

property OnShapeRightClick: TOnShapeMouseEvent

property OnShapePathChange: TNotifyEvent

property OnCloseInfoWindow: TOnCloseInfoWindow

property OnRoutePath: TOnRoutePath

property OnLoad: TOnLoadGroup

property OnLoadShapes: TOnLoadShapes

property OnUrl: TOnUrl

property OnCZML: TOnCZML

TECCesiumShapeMarker

i := cmap.Shapes.Markers.Add(lat,lng) ;
// hint accept html
cmap.Shapes.Markers[i].Hint := 'marker n° <b>'+inttostr(i)+'</b>';

Fig. 168 Marker by default

uses uecCesiumShape;

var marker : TECCesiumShapeMarker;

// use the shortcut to create the marker
marker := cmap.AddMarker(Lat,lng);
// you can find index with marker.IndexOf
// cmap.shapes.markers[marker.indexOf]

// add a text
marker.Description := 'Text';
// adapt width
marker.Width := 70;
// change color
marker.Color := clOlive;

Fig. 169 Marker with Text

// use the shortcut to create the marker
marker := cmap.AddMarker(Lat,lng);
// use maki icon
marker.Description := 'maki:bicycle';
marker.Width := 64;
marker.Color := clBlue;
// set draggable
marker.Draggable := true;

Fig. 170 Marker with Maki icon

// use the shortcut to create the marker
marker := cmap.AddMarker(Lat,lng);
// use png file
marker.Filename := 'http://www.helpandweb.com/cake_32.png';;

Fig. 171 Marker with Png

TECCesiumShapeLine

var line : TECCesiumShapeLine;

// create line and add first point Latitude, Longitude
line := cmap.AddLine(48.8594069779731,2.34283447265625) ;
// better for optimisation
line.BeginUpdate;
// change color
line.Color := clHotLight;
// change size
line.Weight := 10;
// add other points
line.Add(48.8638113489879,2.35519409179688);
line.Add(48.8608751447095,2.36532211303711);
line.Add(48.8543245298006,2.36360549926758);
// update
line.EndUpdate;
// zoom to line
line.fitBounds;

Fig. 172 TECCesiumShapeLine

TECCesiumShapePolygone

var polygone : TECCesiumShapePolygone;

// create polygone and add first point Latitude, Longitude
polygone := cmap.AddPolygone(48.8594069779731,2.34283447265625) ;
// better for optimisation
polygone.BeginUpdate;
// change color
polygone.fillColor := clYellow;
// change opacity
polygone.fillOpacity := 30;
// add other points
polygone.Add(48.8638113489879,2.35519409179688);
polygone.Add(48.8608751447095,2.36532211303711);
polygone.Add(48.8543245298006,2.36360549926758);
// update
polygone.EndUpdate;
// zoom to polygone
polygone.fitBounds;

Fig. 173 TECCesiumPolygone

TECCesiumShapePOI

Contrairement à TECNativeMap seul les types poiEllipse et poiText sont supportés pour l'instant

42

var Poi : TECCesiumShapePOI;

Poi := cmap.AddPOI(lat,lng) ;

Poi.BorderSize := 2;
Poi.Color := clBlue;
Poi.BorderColor := clWhite;
// 16 pixels
// for meters use Poi.POIUnit := puMeter;
Poi.Width := 16;

Fig. 174 TECCesiumShapePOI

var Poi : TECCesiumShapePOI;

Poi := cmap.AddPOIText(lat,lng,'my label') ;

// use description for change text
//Poi.Description := 'my new label';

// font
Poi.CssFont := '14pt monospace';
// color
Poi.Color := clWhite;


Fig. 175 poiText

Material

Vous pouvez utiliser la propriété material pour par exemple incruster une image dans un polygone.

Cesium.Shapes.polygones[index].Material := '"https://cesiumjs.org/images/2015/02-02/cats.jpg";';

Fig. 176 material property

Vous pouvez directement utiliser du javascript pour définir un material plus complexe.

Cesium.Shapes.polygones[index].Material := 'new Cesium.ImageMaterialProperty({'+
'image : "'+UrlImageToDataUri('d:\alert-weather.png')+'",'+
'transparent:true })';

Fig. 177 material local image

TECCesiumShapeInfoWindow

Contrairement à TECNativeMap la position des InfoWindows est indiquée en coordonnées écran, vous pouvez utiliser du html pour votre contenu et utiliser CSS pour styler vos InfoWindows

var wn:TECCesiumShapeInfoWindow;

Wn := cmap.AddInfoWindow(10,10) ;
Wn.content := 'You can enter <b>html</b> content <br>text and <i>image</i> <img src="http://www.helpandweb.com/cake_32.png"/>'; ;
// you can style with css
Wn.Style := 'here css';
// use color for color background
Wn.Color := clWhite;

Wn.CloseButton := true;

L'événement OnCloseInfoWindow du composant TECCEsiumMap est déclenché lorsque l'on ferme par la croix et l'InfoWindow qui vient d'être fermée est récupérée.

Si votre fenêtre contient un lien, le click déclenche l'événement OnUrl

8

Fig. 178 InfoWindow

TECCesiumShapeModel

Cette classe gère les modèles 3D, Cesium utilise le format glTF, un convertisseur COLLADA -> gLTF est proposé

var model : TECCesiumShapeModel;

// you can use url or local filename for your .gltf
model := cmap.addModel(lat,lng,'http://cesiumjs.org/Cesium/Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf') ;

// Values greater than 1.0 increase the size of the model
// while values less than 1.0 decrease it.
model.Scale := 2.0;

// specifying the approximate minimum pixel size of the model regardless of zoom.
// This can be used to ensure that a model is visible even when the viewer zooms out
model.MinimumPixelSize := 64;

// Orientation(heading,pitch,roll)
model.Orientation(90,model.Pitch,model.Roll);

CZML

CZML est l'équivalent en plus puissant du langage KML utilisé par google earth

procedure LoadCZML(const CZML:string;const idCZML:string="";const Options:string='';const Promise:string='');

Pour les options voir //cesiumjs.org/Cesium/Build/Documentation/CzmlDataSource.html (Cesium.CzmlDataSource.load(czml, options))

Promise permet d'executer du javascript quand le script czml est terminé, LoadAndZoomToCZML l'utilise.

procedure TCesiumEngine.LoadAndZoomToCZML(const CZML:string;const idCZML:string='';const Options:string='');
var promise:string;
begin

promise := 'viewer.zoomTo(datasourceczml);'


LoadCZML(CZML,idCZML,Options,promise);

end;

Lorsque le script est terminé l'évènement OnCZML de votre composant est déclenché, il retourne idCZML

procedure LoadAndZoomToCZML(const CZML:string;const idCZML:string='';const Options:string='');

czml := '[{"id" : "document",'+
'"name" : "CZML Point",' +
'"version" : "1.0"'+
'}, {'+
'"id" : "toto",'+
'"name": "pointx",'+
'"position" : {"cartographicDegrees" : [-111.0, 40.0, 0]'+
'},'+
'"point": {'+
' "color": {"rgba": [255, 255, 255, 255] },'+
' "outlineColor": {"rgba": [255, 0, 0, 255]'+
' },'+
' "outlineWidth" : 4,'+
' "pixelSize": 20'+
' }'+
'}]';

Cesium.LoadAndZoomToCZML(czml,'add_point');

Fig. 180 create point with czml

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