Cesium入門（五）
阿新 • • 發佈：2018-11-24
Cesium入門（五）
配置場景
// Enable lighting based on sun/moon positions
//使用太陽光也就是我們平時的光白天亮晚上黑
viewer.scene.globe.enableLighting = true;
型別解析
- Cartesian3 一個3D笛卡爾座標 - 當它用作一個位置時，以米為單位.地球中心是圓點
- Cartographic 繪圖座標系，它用的經緯度和WGS84的高度一起來定位
- HeadingPitchRoll 旋轉座標系，h對應z軸，p對應Y，R對應X軸。
- Quaternion 4D座標系統的3D展示沒有用過。
上面的型別可以幫我們定位位置和方向幫助我們在場景中展示。
相機
- 相機是場景中一個重要的因素，我們可以通過以下方法來設定相機的方向
- setView(options) 把相機設定的特定的位置和方向
// 1. Set position with a top-down view
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});
// 2 Set view with heading, pitch and roll
viewer.camera.setView({
destination : cartesianPosition,
orientation: {
heading : Cesium.Math - zoomIN(amount) 沿相機的方向向前移動引數為移動的量
- zoomOut(amount)沿相機方向向後移動，引數為移動的量
- flyTo(options),啟用動畫並更改相機的位置到一個新 的位置
// 1. Fly to a position with a top-down view
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});
// 2. Fly to a Rectangle with a top-down view
viewer.camera.flyTo({
destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
});
// 3. Fly to a position with an orientation using unit vectors.
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
orientation : {
direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
}
});
// 4. Fly to a position with an orientation using heading, pitch and roll.
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
orientation : {
heading : Cesium.Math.toRadians(175.0),
pitch : Cesium.Math.toRadians(-35.0),
roll : 0.0
}
});- lookAt(target,offset),從指的目標和偏移量來更新相機的位置
// 1. Using a cartesian offset
var center = Cesium.Cartesian3.fromDegrees(-98.0, 40.0);
viewer.camera.lookAt(center, new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0));
// 2. Using a HeadingPitchRange offset
var center = Cesium.Cartesian3.fromDegrees(-72.0, 40.0);
var heading = Cesium.Math.toRadians(50.0);
var pitch = Cesium.Math.toRadians(-20.0);
var range = 5000.0;
viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));- move(direction.amount)在任何方向上移動任何長度，它有幾個方向定好的函式，只要傳入移動的量就可以瞭如moveBackward(amount)etc
- rotate(axis,angle)旋轉任何軸任何角度，同上，也有幾個定好軸的方法
一個Demo
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var clock = viewer.clock;
var referenceFramePrimitive;
function flyToSanDiego() {
Sandcastle.declare(flyToSanDiego);
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});
}
function flyToHeadingPitchRoll() {
Sandcastle.declare(flyToHeadingPitchRoll);
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-122.22, 46.12, 5000.0),
orientation : {
heading : Cesium.Math.toRadians(20.0),
pitch : Cesium.Math.toRadians(-35.0),
roll : 0.0
}
});
}
function flyToLocation() {
Sandcastle.declare(flyToLocation);
// Create callback for browser's geolocation
function fly(position) {
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(position.coords.longitude, position.coords.latitude, 1000.0)
});
}
// Ask browser for location, and fly there.
navigator.geolocation.getCurrentPosition(fly);
}
function viewRectangle() {
Sandcastle.declare(viewRectangle);
var west = -77.0;
var south = 38.0;
var east = -72.0;
var north = 42.0;
var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);
viewer.camera.setView({
destination: rectangle
});
// Show the rectangle. Not required; just for show.
viewer.entities.add({
rectangle : {
coordinates : rectangle,
fill : false,
outline : true,
outlineColor : Cesium.Color.WHITE
}
});
}
function flyToRectangle() {
Sandcastle.declare(flyToRectangle);
var west = -90.0;
var south = 38.0;
var east = -87.0;
var north = 40.0;
var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);
viewer.camera.flyTo({
destination : rectangle
});
// Show the rectangle. Not required; just for show.
viewer.entities.add({
rectangle : {
coordinates : rectangle,
fill : false,
outline : true,
outlineColor : Cesium.Color.WHITE
}
});
}
function setReferenceFrame() {
Sandcastle.declare(setReferenceFrame);
var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
// View in east-north-up frame
var camera = viewer.camera;
camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
camera.lookAtTransform(transform, new Cesium.Cartesian3(-120000.0, -120000.0, 120000.0));
// Show reference frame. Not required.
referenceFramePrimitive = scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
modelMatrix : transform,
length : 100000.0
}));
}
function setHeadingPitchRoll() {
Sandcastle.declare(setHeadingPitchRoll);
var camera = viewer.camera;
camera.setView({
destination : Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0),
orientation: {
heading : -Cesium.Math.PI_OVER_TWO,
pitch : -Cesium.Math.PI_OVER_FOUR,
roll : 0.0
}
});
}
function icrf(scene, time) {
if (scene.mode !== Cesium.SceneMode.SCENE3D) {
return;
}
var icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time);
if (Cesium.defined(icrfToFixed)) {
var camera = viewer.camera;
var offset = Cesium.Cartesian3.clone(camera.position);
var transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
camera.lookAtTransform(transform, offset);
}
}
function viewInICRF() {
Sandcastle.declare(viewInICRF);
viewer.camera.flyHome(0);
clock.multiplier = 3 * 60 * 60;
scene.postUpdate.addEventListener(icrf);
scene.globe.enableLighting = true;
}
var viewChanged = document.getElementById('viewChanged');
var removeStart;
var removeEnd;
function cameraEvents() {
Sandcastle.declare(cameraEvents);
var camera = viewer.camera;
removeStart = camera.moveStart.addEventListener(function() {
viewChanged.style.display = 'block';
});
removeEnd = camera.moveEnd.addEventListener(function() {
viewChanged.style.display = 'none';
});
}
var cameraChanged = document.getElementById('cameraChanged');
var removeChanged;
function cameraChanges() {
Sandcastle.declare(cameraChanges);
var i = 0;
removeChanged = viewer.camera.changed.addEventListener(function(percentage) {
++i;
cameraChanged.innerText = 'Camera Changed: ' + i + ', ' + percentage.toFixed(6);
cameraChanged.style.display = 'block';
});
}
function flyInACity() {
Sandcastle.declare(flyInACity);
var camera = scene.camera;
camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-73.98580932617188, 40.74843406689482, 363.34038727246224),
complete : function() {
setTimeout(function() {
camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-73.98585975679403, 40.75759944127251, 186.50838555841779),
orientation : {
heading : Cesium.Math.toRadians(200.0),
pitch : Cesium.Math.toRadians(-50.0)
},
easingFunction : Cesium.EasingFunction.LINEAR_NONE
});
}, 1000);
}
});
}
function losAngelesToTokyo(adjustPitch) {
var camera = scene.camera;
var tokyoOptions = {
destination : Cesium.Cartesian3.fromDegrees(139.8148, 35.7142, 20000.0),
orientation: {
heading : Cesium.Math.toRadians(15.0),
pitch : Cesium.Math.toRadians(-60),
roll : 0.0
},
duration: 20,
flyOverLongitude: Cesium.Math.toRadians(60.0)
};
var laOptions = {
destination : Cesium.Cartesian3.fromDegrees(-117.729, 34.457, 10000.0),
duration: 5,
orientation: {
heading : Cesium.Math.toRadians(-15.0),
pitch : -Cesium.Math.PI_OVER_FOUR,
roll : 0.0
}
};
laOptions.complete = function() {
setTimeout(function() {
camera.flyTo(tokyoOptions);
}, 1000);
};
if (adjustPitch) {
tokyoOptions.pitchAdjustHeight = 1000;
laOptions.pitchAdjustHeight = 1000;
}
camera.flyTo(laOptions);
}
function flyOverLongitude(adjustPitch) {
Sandcastle.declare(flyOverLongitude);
losAngelesToTokyo();
}
function flyOverLongitudeWithPitch() {
Sandcastle.declare(flyOverLongitudeWithPitch);
losAngelesToTokyo(true);
}
Sandcastle.addToolbarMenu([{
text : 'Camera Options'
}, {
text : 'Fly in a city',
onselect : function() {
flyInACity();
Sandcastle.highlight(flyInACity);
}
}, {
text : 'Fly to San Diego',
onselect : function() {
flyToSanDiego();
Sandcastle.highlight(flyToSanDiego);
}
}, {
text : 'Fly to Location with heading, pitch and roll',
onselect : function() {
flyToHeadingPitchRoll();
Sandcastle.highlight(flyToHeadingPitchRoll);
}
}, {
text : 'Fly to My Location',
onselect : function() {
flyToLocation();
Sandcastle.highlight(flyToLocation);
}
}, {
text : 'Fly to Rectangle',
onselect : function() {
flyToRectangle();
Sandcastle.highlight(flyToRectangle);
}
}, {
text : 'View a Rectangle',
onselect : function() {
viewRectangle();
Sandcastle.highlight(viewRectangle);
}
}, {
text : 'Set camera reference frame',
onselect : function() {
setReferenceFrame();
Sandcastle.highlight(setReferenceFrame);
}
}, {
text : 'Set camera with heading, pitch, and roll',
onselect : function() {
setHeadingPitchRoll();
Sandcastle.highlight(setHeadingPitchRoll);
}
}, {
text : 'View in ICRF',
onselect : function() {
viewInICRF();
Sandcastle.highlight(viewInICRF);
}
}, {
text : 'Move events',
onselect : function() {
cameraEvents();
Sandcastle.highlight(cameraEvents);
}
}, {
text : 'Camera changed event',
onselect : function() {
cameraChanges();
Sandcastle.highlight(cameraChanges);
}
}, {
text : 'Fly from Los Angeles to Tokyo via Europe',
onselect : function() {
flyOverLongitude();
Sandcastle.highlight(flyOverLongitude);
}
}, {
text : 'Look down during exaggerated flight',
onselect : function() {
flyOverLongitudeWithPitch();
Sandcastle.highlight(flyOverLongitudeWithPitch);
}
}
]);
Sandcastle.reset = function() {
scene.completeMorph();
viewer.entities.removeAll();
scene.primitives.remove(referenceFramePrimitive);
scene.tweens.removeAll();
if (Cesium.defined(removeStart)) {
removeStart();
removeEnd();
viewChanged.style.display = 'none';
removeStart = undefined;
removeEnd = undefined;
}
if (Cesium.defined(removeChanged)) {
removeChanged();
removeChanged = undefined;
cameraChanged.style.display = 'none';
}
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
clock.multiplier = 1.0;
scene.postUpdate.removeEventListener(icrf);
scene.globe.enableLighting = false;
};
scene.morphComplete.addEventListener(function() {
Sandcastle.reset();
});
時間控制元件
-code注意時間的計時規則以及轉換的方法。其它的都是應用了。
// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range下面是官司的例子
// Create a clock that loops on Christmas day 2013 and runs in 4000x real time.
var clock = new Cesium.Clock({
startTime : Cesium.JulianDate.fromIso8601("2013-12-25"),
currentTime : Cesium.JulianDate.fromIso8601("2013-12-25"),
stopTime : Cesium.JulianDate.fromIso8601("2013-12-26"),
clockRange : Cesium.ClockRange.LOOP_STOP, // loop when we hit the end time
clockStep : Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
multiplier : 4000, // how much time to advance each tick
shouldAnimate : true // Animation on by default
});
var viewer = new Cesium.Viewer('cesiumContainer', {
clockViewModel : new Cesium.ClockViewModel(clock)
});
viewer.scene.globe.enableLighting = true;
Sandcastle.addToolbarButton('Reset Current Time', function() {
var resetTime = viewer.clockViewModel.startTime;
viewer.clockViewModel.currentTime = resetTime;
viewer.timeline.updateFromClock();
});
Sandcastle.addToolbarButton('Slow Down Clock', function() {
viewer.clockViewModel.multiplier /= 2;
});
Sandcastle.addToolbarButton('Speed Up Clock', function() {
viewer.clockViewModel.multiplier *= 2;//速度
});