TECCesiumMap

Cesium is a Javascript library to manage globes 3D and 2D maps, information about the site www.cesiumjs.org

TECCesiumMap is a component that allows you to use Cesium in your Delphi developments, it is at the moment available for the VCL (Windows)

Installation

Default TECCesiumMap uses cesiumjs.org servers, but for the production of your developments I strongly advise you to install on your own webserver cesium.

Download the latest archive of Cesiumthen unzip on your server.

TECesiumMap has the property WebServer just set with the root directory of your installation.

TCesiumControl

The structure is the same that for TECNativeMap, elements work in the same way and you find the concepts of groups, geolocation and the calculation of routes are identical

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

You can use the material property for example to embed an image in a polygon.

You can directly use javascript to define a more complex material.

TECCesiumShapeInfoWindow

Unlike TECNativeMap the position of the InfoWindows is shown in screen coordinates, you can use html for your content and use CSS to style your 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;

The OnCloseInfoWindow of the TECCEsiumMap component event is raised when closing by the cross and the InfoWindow coming to be closed is recovered.

TECCesiumShapeModel

This class manages the 3D models, Cesium uses the glTF format, a converter COLLADA-> gLTF is proposed

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 is the equivalent of KML but more powerful

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

For options see //cesiumjs.org/Cesium/Build/Documentation/CzmlDataSource.html (Cesium.CzmlDataSource.load(czml, options))

Promise can execute javascript when the czml script is finished, LoadAndZoomToCZML use.

When the script is finished the event OnCZML of your component is triggered, it returns idCZML

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