Noobie question - follow me tutorial

CesiumJS
1

Hi All,

I discovered this library just recenty. So far I used openlayers v2 (and beta of v3) for web based map implementations. CESIUM looks very promising to me and I consider a change …

Excuse me for a noobie question, however I search a bit and cannot find an easy to use tutorial for the following operation:

  1. Use of 3d (this I found in sandcastle terrain example (BTW, Sandcastle is a GREAT TOOL ! )
  2. I want to show a view based on eye position (lat, lon) in degrees and altitude (in feet or meters) and the angle of the eyepoint view (x,y,z) in radians
  3. now based on some algorytm in javascript every second (acctually via xml http request) I have a new position & eyepoint view which I want to smoothly move into.Kind of santa clause demo.

How should I achieve that or at least please give me some hints. No doubt, sooner or later I will contribute to this Cesium community :wink:

thx in advance

Marcin

2

Check out Scene.Camera and the camera's properties for adjusting the camera angle and all.

As for flying to new positions and such, look at Cesium.CameraFlightPath.createAnimationCartographic

3

I tried the following code, however I still see a default 3d globe and camera is not moved to desired location:

require([‘Cesium’], function(Cesium) {
“use strict”;

var widget = new Cesium.CesiumWidget('cesiumContainer');
var ellipsoid = widget.centralBody.ellipsoid;   

var viewer = new Cesium.Viewer('cesiumContainer', {
    sceneMode : Cesium.SceneMode.SCENE3D
});

var scene = viewer.scene;

var eye, target, up;

// var position = new Cesium.Cartographic(Cesium.Math.toRadians(21), Cesium.Math.toRadians(78), 5000);
// var cartesianPosition = Cesium.Ellipsoid.WGS84.cartographicToCartesian(position);

eye = new Cesium.Cartesian3(-2496304.1498512086, -4391818.97382059, 3884176.4503971986);
target = Cesium.Cartesian3.add(eye, new Cesium.Cartesian3(0.9279518715011381, -0.29488412129953234, -0.22792252890604328));
up = new Cesium.Cartesian3(-0.11836693744723503, -0.8130611584421428, 0.5700182635106171);
scene.camera.lookAt(eye, target, up);   

Sandcastle.finishedLoading();

});

4

You’re creating both a “widget” and a “viewer”. The viewer contains its own CesiumWidget, plus animation controls and stuff.

Only create one or the other, not both. You’re moving the camera of the viewer’s globe, which is hidden behind the widget’s globe.

–Ed.

5

thx Ed,

I am slowly (very slowly as never played with 3d before) getting the picture. I’ve even manged to undestand UP paramater in the camera.lookAt method when was looking straight down (eye & target same cartography location but different height) and played with “rotating my head” when looking at London.

require([‘Cesium’], function(Cesium) {
“use strict”;

var viewer = new Cesium.Viewer('cesiumContainer', {
    sceneMode : Cesium.SceneMode.SCENE3D
});

var scene = viewer.scene;

var eyeposition = new Cesium.Cartographic(Cesium.Math.toRadians(0), Cesium.Math.toRadians(51.5), 100000);
var eye = Cesium.Ellipsoid.WGS84.cartographicToCartesian(eyeposition);
var targetPos = new Cesium.Cartographic(Cesium.Math.toRadians(0), Cesium.Math.toRadians(51.5), 100);
var target = Cesium.Ellipsoid.WGS84.cartographicToCartesian(targetPos);

scene.camera.lookAt(eye, target, Cesium.Cartesian3.UNIT_Z);  

Sandcastle.finishedLoading();

});

many thanks again !

M.