Fly camera to the specified extents using BoundingSphere in Cesium
Personal
JavaScript
CesiumJS
creates an extent set using WGS84 creates sphere using extents makes the camera fly towards the sphere
creates an extent set using WGS84
creates sphere using extents
makes the camera fly towards the sphere
Description :
Simple Expression :
viewer.scene.camera.flyToBoundingSphere(kure,
{duration: 6.0,
offset : new Cesium.HeadingPitchRange
(0.0, Cesium.Math.toRadians(-30),(kure.radius)*3 )});
Example :
//Dataset samples:
var building1_extent_points = new Cesium.Cartesian3.fromDegreesArrayHeights([29.1456,41.1213,264.49,29.1437,41.1213,365.11]);
var building2_extent_points = new Cesium.Cartesian3.fromDegreesArrayHeights([28.9011,40.9872,51.25,28.9016,40.9875,86.45]);
var building3_extent_points = new Cesium.Cartesian3.fromDegreesArrayHeights([29.0146,41.1162,81.31,29.0053,41.1186,290.29]);
// Grant CesiumJS access to your ion assets
Cesium.Ion.defaultAccessToken = "XXX";
try {
const viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider:
await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
});
//This object is unnecessary.
//It is only used to visualize the boundingsphere object with a approximate size.
const outlineOnly = viewer.entities.add({
name: "Yellow ellipsoid outline",
position: Cesium.Cartesian3.fromDegrees(29.14465, 41.1213, 314.8),
ellipsoid: {
radii: new Cesium.Cartesian3(64, 64, 64),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW,
slicePartitions: 24,
stackPartitions: 36,
},
});
const kure = Cesium.BoundingSphere.fromCornerPoints
(building1_extent_points[0], building1_extent_points[1]);
//console.dir(kure);
viewer.scene.camera.flyToBoundingSphere(kure,
{duration: 6.0,
offset : new Cesium.HeadingPitchRange
(0.0, Cesium.Math.toRadians(-30),(kure.radius)*3 )});
} catch (error) {
console.log(error);
2019 Dec