<!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 app 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>Camera Controls</title> <!-- The Cesium library. --> <script src="../ThirdParty/Cesium/Cesium.js"></script> <!-- Style our app. --> <style> @import url(../ThirdParty/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <script> Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNDhhYmQxOC1mYzMwLTRhYmEtOTI5Ny1iNGExNTQ3ZTZhODkiLCJpZCI6NTQ1NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzM3Mzc0NH0.RU6ynAZcwQvdfygt_N_j2rb2lpsuyyROzdaLQg0emAg'; let viewer = new Cesium.Viewer('cesiumContainer'); let wyoming = viewer.entities.add({ name : 'Wyoming', // 实体名称。 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 // 轮廓线颜色 } }); // viewer.zoomTo(wyoming); // 定义本地帧中的航向角、俯仰角和范围。航向是从局部向北的方向旋转,正角向东增加。 // 螺距是从局部XY平面旋转而来的.正俯仰角在平面上方。负俯仰角在平面以下。 // 距离是距帧中心的距离。 // new Cesium.HeadingPitchRange(heading, pitch, range) let heading = Cesium.Math.toRadians(90); // 镜头顺时针旋转90度。 let pitch = Cesium.Math.toRadians(-30); // 俯视30度。 viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch, 3000000)); // 这两个函数都返回承诺,可以用来安排在飞行或缩放完成后执行的函数。 // 如果飞行成功完成,则传递给回调的结果参数为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; </script> </body> </html>
cesium 1.52 demo _ Camera Controls.html
猜你喜欢
转载自blog.csdn.net/weixin_42193179/article/details/85700273
今日推荐
周排行