TECCesiumMap

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)

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.

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

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;

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;

property ClickY : integer read FClickY;

property MouseX : integer read FMouseX;

property MouseY : integer read FMouseY;

property Shapes: TECCesiumShapes read FShapes;

property HintInfoWindow : TECCesiumShapeInfoWindow read getHintInfoWindow;

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

property Terrain: boolean;

property SceneMode: TCesiumMode;

É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>';

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;

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

// use the shortcut to create the marker
marker := cmap.AddMarker(Lat,lng);
// use png file
marker.Filename := 'http://www.helpandweb.com/cake_32.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;

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;

TECCesiumShapePOI

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;

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;

Material

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

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

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.

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.

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='');