<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description"
content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
<title>camera control</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl: '../../../Source',
waitSeconds: 60
});
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
/*参考:https://cesium.com/cesiumjs/*/
function startup(Cesium) {
'use strict';
// Sandcastle_Begin
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNDhhYmQxOC1mYzMwLTRhYmEtOTI5Ny1iNGExNTQ3ZTZhODkiLCJpZCI6NTQ1NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzM3Mzc0NH0.RU6ynAZcwQvdfygt_N_j2rb2lpsuyyROzdaLQg0emAg';
// new Cesium.Viewer(container, options)
let viewer = new Cesium.Viewer('cesiumContainer');
let wyoming = viewer.entities.add({
name: '怀俄明州', // 实体名称。
polygon: { // 实体类型
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-109.080842, 45.002073,
-105.91517, 45.002073,
-104.058488, 44.996596,
-104.053011, 43.002989,
-104.053011, 41.003906,
-105.728954, 40.998429,
-107.919731, 41.003906,
-109.04798, 40.998429,
-111.047063, 40.998429,
-111.047063, 42.000709,
-111.047063, 44.476286,
-111.05254, 45.002073]), // 分层
height: 0, // 指定多边形相对于椭球面的高度,默认0,此处用于启用outline属性。
material: Cesium.Color.RED.withAlpha(0.5), // 指定多边形的填充颜色及透明度。
outline: true, // 是否显示轮廓线。
outlineColor: Cesium.Color.BLACK // 轮廓线颜色
}
});
// // 1.默认视角。
// viewer.zoomTo(wyoming);
// // 2.指定视角。
// let heading = Cesium.Math.toRadians(90); // 镜头顺时针旋转 90 度,朝东。
// let pitch = Cesium.Math.toRadians(-30); // 俯视 30 度。
// viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch, 30000000));
// 3.flyTo 方法。
// // 3.1.默认飞行
// viewer.flyTo(wyoming);
// 3.2. 指定飞行选项。
// 注:maximumHeight(最大飞行高度)建议等于 range(视点到实体中心的距离)。
let heading = Cesium.Math.toRadians(0); // 镜头朝北。
let pitch = Cesium.Math.toRadians(-30); // 俯视 30 度。
let range = 30000000;
viewer.flyTo(wyoming, {
duration: 0.5, maximumHeight: range, offset: new Cesium.HeadingPitchRange(heading, pitch, range)
});
// 4.zoomTo(), flyTo() 都返回承诺,可以用来安排在飞行或缩放完成后执行的函数。
// 如果飞行成功完成,则传递给回调的结果参数为true;
// 如果航班被取消,则为 false,即用户在该航班完成之前发起另一次飞行或缩放,
// 或者因为目标没有相应的可视化,即没有什么可缩放的。
// viewer.flyTo(wyoming).then(function(result){
// // console.log("result:", result); // result: true
// if (result) {
// viewer.selectedEntity = wyoming;
// }
// });
// wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
// viewer.trackedEntity = wyoming;
// viewer.trackedEntity = undefined;
// Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== 'undefined') {
startup(Cesium);
} else if (typeof require === 'function') {
require(['Cesium'], startup);
}
</script>
</body>
</html>
cesium_1.62 camera control 视角.html
最新推荐文章于 2019-04-17 17:11:21 发布