563 lines
14 KiB
HTML
563 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Use correct character set. -->
|
||
<meta charset="utf-8">
|
||
<!-- Tell IE to use the latest, best version. -->
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||
<title>Learning Cesium!</title>
|
||
<script src="./Build/Cesium/Cesium.js"></script>
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
|
||
html,
|
||
body,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#credit {
|
||
display: none;
|
||
}
|
||
|
||
#viewChanged,
|
||
#cameraChanged {
|
||
display: none;
|
||
background-color: red;
|
||
color: white;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="cesiumContainer"></div>
|
||
<div id="loadingOverlay">
|
||
<h1>Loading...</h1>
|
||
</div>
|
||
<div id="toolbar">
|
||
<div id="viewChanged">View Changed</div>
|
||
<div id="cameraChanged">Camera Changed</div>
|
||
</div>
|
||
<div id="credit"></div>
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken =
|
||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
|
||
|
||
|
||
|
||
var viewer = new Cesium.Viewer('cesiumContainer', {
|
||
scene3DOnly: true,
|
||
selectionIndicator: false,
|
||
baseLayerPicker: false
|
||
});
|
||
// 移除默认的底图
|
||
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
|
||
|
||
// 添加哨兵影像 Sentinel-2 imagery
|
||
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({
|
||
assetId: 3954
|
||
}));
|
||
|
||
viewer.terrainProvider = Cesium.createWorldTerrain({
|
||
requestWaterMask: true, // required for water effects
|
||
requestVertexNormals: true // required for terrain lighting
|
||
});
|
||
|
||
//添加参考实体
|
||
var citizensBankPark = viewer.entities.add({
|
||
name: 'Citizens Bank Park',
|
||
position: Cesium.Cartesian3.fromDegrees(113.930, 22.5391),
|
||
point: {
|
||
pixelSize: 5,
|
||
color: Cesium.Color.RED,
|
||
outlineColor: Cesium.Color.WHITE,
|
||
outlineWidth: 2
|
||
},
|
||
label: {
|
||
text: 'Citizens Bank Park',
|
||
font: '14pt monospace',
|
||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
outlineWidth: 2,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
pixelOffset: new Cesium.Cartesian2(0, -9)
|
||
}
|
||
});
|
||
|
||
|
||
/**
|
||
* viewer.camera.lookAt(target, offset)
|
||
* target 必须是笛卡尔坐标；
|
||
* offset 可以是笛卡尔坐标也可以是 HeadingPitc‘hRange
|
||
*
|
||
*/
|
||
// 1. Using a cartesian offset
|
||
var center = Cesium.Cartesian3.fromDegrees(113.930, 22.5391);
|
||
// viewer.camera.lookAt(center, new Cesium.Cartesian3(-10000.0, 1000.0, 50000));
|
||
|
||
// 2. Using a HeadingPitchRange offset
|
||
var heading = Cesium.Math.toRadians(100);
|
||
var pitch = Cesium.Math.toRadians(20);
|
||
var range = 10000.0;
|
||
// viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));
|
||
|
||
|
||
/**
|
||
* Camera.setView(options) 设置位置、方向、转换
|
||
* options配置参数：
|
||
* destination：Cartesian3 | Rectangle 在WGS84中 Camera 的最终位置坐标或从自上而下视图中可见的矩形。
|
||
* orientation：Object 包含方向和向上属性或航向、俯仰和滚动属性的对象。
|
||
*
|
||
*/
|
||
// 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 : center,
|
||
// orientation: {
|
||
// heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
|
||
// pitch : Cesium.Math.toRadians(-90), // default value (looking down)
|
||
// roll : 0.0 // default value
|
||
// }
|
||
// });
|
||
//3. Change heading, pitch and roll with the camera position remaining the same.
|
||
// viewer.camera.setView({
|
||
// orientation: {
|
||
// heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
|
||
// pitch : Cesium.Math.toRadians(-90), // default value (looking down)
|
||
// roll : 0.0 // default value
|
||
// }
|
||
// })
|
||
|
||
|
||
// 4. View rectangle with a top-down view
|
||
// viewer.camera.setView({
|
||
// destination : Cesium.Rectangle.fromDegrees(113.930-1, 22.5391-1, 113.930+1, 22.5391+1)
|
||
// });
|
||
|
||
// 5. Set position with an orientation using unit vectors.
|
||
// viewer.camera.setView({
|
||
// 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)
|
||
// }
|
||
// });
|
||
|
||
var scene = viewer.scene;
|
||
var clock = viewer.clock;
|
||
var referenceFramePrimitive;
|
||
|
||
function flyToSanDiego() {
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
|
||
});
|
||
}
|
||
|
||
function 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() {
|
||
// 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() {
|
||
|
||
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() {
|
||
|
||
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() {
|
||
|
||
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() {
|
||
|
||
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() {
|
||
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() {
|
||
|
||
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() {
|
||
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() {
|
||
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) {
|
||
losAngelesToTokyo();
|
||
}
|
||
|
||
function flyOverLongitudeWithPitch() {
|
||
losAngelesToTokyo(true);
|
||
}
|
||
var Sandcastle = window;
|
||
Sandcastle.addToolbarMenu([{
|
||
text: "Camera Options",
|
||
},
|
||
{
|
||
text: "Fly in a city",
|
||
onselect: function() {
|
||
reset();
|
||
flyInACity();
|
||
Sandcastle.highlight(flyInACity);
|
||
},
|
||
},
|
||
{
|
||
text: "Fly to San Diego",
|
||
onselect: function() {
|
||
reset();
|
||
flyToSanDiego();
|
||
Sandcastle.highlight(flyToSanDiego);
|
||
},
|
||
},
|
||
{
|
||
text: "Fly to Location with heading, pitch and roll",
|
||
onselect: function() {
|
||
reset();
|
||
flyToHeadingPitchRoll();
|
||
Sandcastle.highlight(flyToHeadingPitchRoll);
|
||
},
|
||
},
|
||
{
|
||
text: "Fly to My Location",
|
||
onselect: function() {
|
||
reset();
|
||
flyToLocation();
|
||
Sandcastle.highlight(flyToLocation);
|
||
},
|
||
},
|
||
{
|
||
text: "Fly to Rectangle",
|
||
onselect: function() {
|
||
reset();
|
||
flyToRectangle();
|
||
Sandcastle.highlight(flyToRectangle);
|
||
},
|
||
},
|
||
{
|
||
text: "View a Rectangle",
|
||
onselect: function() {
|
||
reset();
|
||
viewRectangle();
|
||
Sandcastle.highlight(viewRectangle);
|
||
},
|
||
},
|
||
{
|
||
text: "Set camera reference frame",
|
||
onselect: function() {
|
||
reset();
|
||
setReferenceFrame();
|
||
Sandcastle.highlight(setReferenceFrame);
|
||
},
|
||
},
|
||
{
|
||
text: "Set camera with heading, pitch, and roll",
|
||
onselect: function() {
|
||
reset();
|
||
setHeadingPitchRoll();
|
||
Sandcastle.highlight(setHeadingPitchRoll);
|
||
},
|
||
},
|
||
{
|
||
text: "View in ICRF",
|
||
onselect: function() {
|
||
reset();
|
||
viewInICRF();
|
||
Sandcastle.highlight(viewInICRF);
|
||
},
|
||
},
|
||
{
|
||
text: "Move events",
|
||
onselect: function() {
|
||
reset();
|
||
cameraEvents();
|
||
Sandcastle.highlight(cameraEvents);
|
||
},
|
||
},
|
||
{
|
||
text: "Camera changed event",
|
||
onselect: function() {
|
||
reset();
|
||
cameraChanges();
|
||
Sandcastle.highlight(cameraChanges);
|
||
},
|
||
},
|
||
{
|
||
text: "Fly from Los Angeles to Tokyo via Europe",
|
||
onselect: function() {
|
||
reset();
|
||
flyOverLongitude();
|
||
Sandcastle.highlight(flyOverLongitude);
|
||
},
|
||
},
|
||
{
|
||
text: "Look down during exaggerated flight",
|
||
onselect: function() {
|
||
reset();
|
||
flyOverLongitudeWithPitch();
|
||
Sandcastle.highlight(flyOverLongitudeWithPitch);
|
||
},
|
||
},
|
||
]);
|
||
|
||
Sandcastle.addToolbarButton("Complete Flight", function() {
|
||
scene.camera.completeFlight();
|
||
});
|
||
|
||
Sandcastle.addToolbarButton("Cancel Flight", function() {
|
||
scene.camera.cancelFlight();
|
||
});
|
||
|
||
function reset() {
|
||
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() {
|
||
reset();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|