[JavaScript知识库]vue3.x +Cesium Cesium camera相机的使用（二）

Cesium camera 相机系统 setView flyTo lookAt viewBoundingSphere

setView 的使用 通过设定目的地的三维坐标和视线方向将视角切换到设定视域范围内

   const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);
      window.viewer.camera.setView({
        destination: position,
        orientation: { //相机视口方向
          heading: Cesium.Math.toRadians(0),//视口方向水平旋转，y轴  0正北方向
          pitch: Cesium.Math.toRadians(-90),//视口上下旋转，x轴 -90俯视朝向地面
          roll: 0 //视口翻转角度，z轴 0 不翻转
        }
      })

flyTo 的使用 空间飞行逐步切换效果，设置飞行时间

  window.viewer.camera.flyTo({
        destination: position,
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0
        },
        duration: 5
      })

lookAt 的使用 直接将视角跳转到目的地，鼠标旋转不会改变位置，锁定某个场景视角

var center = Cesium.Cartesian3.fromDegrees(116.39, 39.91)
      var heading = Cesium.Math.toRadians(50)
      var pitch = Cesium.Math.toRadians(-90)
      var range = 2500
      window.viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))

viewBoundingSphere 的使用 没有飞行过渡效果，直接切换视口到指定目的地,对一个物体进行多角度观测，建筑为进行定点漫游?

  var posi = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)

      var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(90), 0, 0)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(posi, hpr)
    //加载模型  
    var entity = window.viewer.entities.add({
        position: posi,
        orientation: orientation,
        model: {
          uri: '/cesium/SampleData/models/scen2/scene.gltf',
          minimumPixelSize: 10,
          maximumScale: 10,
          scale: 0.004,
          show: true
        }
      })
      var posi1 = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)
      var hpr1 = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(-90), 0, 0)
      var orientation1 = Cesium.Transforms.headingPitchRollQuaternion(posi1, hpr1)
      window.viewer.entities.add({
        position: posi1,
        orientation: orientation1,
        model: {
          uri: '/cesium/SampleData/models/sangshi/scene.glb',
          minimumPixelSize: 10,
          maximumScale: 10,
          scale: 0.4,
          show: true
        }
      })

      window.viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(posi, 100), new Cesium.HeadingPitchRange(0, 0, 0))
     

?

全部代码：

<template>
  <div class="map-box">
    <div class="cesium-camera-methods">
      <el-button @click="changeHeading">缩放地球</el-button>
    </div>
    <div id="cesiumCamera"></div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted } from "vue";

export default {
  name: "",
  mounted() {

  },
  setup() {

    onMounted(() => {
      const { appContext: { config: { globalProperties: { $axios: $axios } } } } = getCurrentInstance()


      // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 55)// 默认定位到中国上空，home定位到中国范围
      window.viewer = new Cesium.Viewer("cesiumCamera", {
        animation: true, //是否显示动画控件
        homeButton: true, //是否显示home键
        geocoder: true, //是否显示地名查找控件        如果设置为true，则无法查询
        baseLayerPicker: false, //是否显示图层选择控件
        timeline: false, //是否显示时间线控件
        fullscreenButton: true, //是否全屏显示
        scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        infoBox: false, //是否显示点击要素之后显示的信息
        sceneModePicker: true, //是否显示投影方式控件  三维/二维
        navigationInstructionsInitiallyVisible: true,
        navigationHelpButton: false, //是否显示帮助信息控件
        selectionIndicator: false, //是否显示指示器组件
        shouldAnimate: true,//模型动起来
        //1 加载天地图
        // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        //   url:
        //     "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=edb7720e01611625116ff8ec05cae258",
        //   layer: "tdtBasicLayer",
        //   style: "default",
        //   format: "image/jpeg",
        //   tileMatrixSetID: "GoogleMapsCompatible",
        //   show: true,
        //   mininumLevel: 0,
        //   maximumLevel: 16
        // })
      });
      // 隐藏版权
      window.viewer._cesiumWidget._creditContainer.style.display = "none";
      // 显示月亮
      window.viewer.scene.moon.show = true


      /*
      * Cesium camera 相机系统 setView flyTo lookAt  viewBoundingSphere
      *
      *
      *** */


      /* setView 的使用 通过设定目的地的三维坐标和视线方向将视角切换到设定视域范围内*/
      // const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);
      // window.viewer.camera.setView({
      //   destination: position,
      //   orientation: { //相机视口方向
      //     heading: Cesium.Math.toRadians(0),//视口方向水平旋转，y轴  0正北方向
      //     pitch: Cesium.Math.toRadians(-90),//视口上下旋转，x轴 -90俯视朝向地面
      //     roll: 0 //视口翻转角度，z轴 0 不翻转
      //   }
      // })

      /* flyTo 的使用 空间飞行逐步切换效果，设置飞行时间*/
      // window.viewer.camera.flyTo({
      //   destination: position,
      //   orientation: {
      //     heading: Cesium.Math.toRadians(0),
      //     pitch: Cesium.Math.toRadians(-90),
      //     roll: 0
      //   },
      //   duration: 5
      // })

      /* lookAt 的使用 直接将视角跳转到目的地，鼠标旋转不会改变位置，锁定某个场景视角*/
      // var center = Cesium.Cartesian3.fromDegrees(116.39, 39.91)
      // var heading = Cesium.Math.toRadians(50)
      // var pitch = Cesium.Math.toRadians(-90)
      // var range = 2500
      // window.viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))


      /* viewBoundingSphere 的使用 没有飞行过渡效果，直接切换视口到指定目的地,对一个物体进行多角度观测，建筑为进行定点漫游*/
      var posi = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)

      var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(90), 0, 0)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(posi, hpr)
      var entity = window.viewer.entities.add({
        position: posi,
        orientation: orientation,
        model: {
          uri: '/cesium/SampleData/models/scen2/scene.gltf',
          minimumPixelSize: 10,
          maximumScale: 10,
          scale: 0.004,
          show: true
        }
      })
      var posi1 = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)
      var hpr1 = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(-90), 0, 0)
      var orientation1 = Cesium.Transforms.headingPitchRollQuaternion(posi1, hpr1)
      window.viewer.entities.add({
        position: posi1,
        orientation: orientation1,
        model: {
          uri: '/cesium/SampleData/models/sangshi/scene.glb',
          minimumPixelSize: 10,
          maximumScale: 10,
          scale: 0.4,
          show: true
        }
      })

      window.viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(posi, 100), new Cesium.HeadingPitchRange(0, 0, 0))
      // window.viewer.entities.removeAll();
      // const position = Cesium.Cartesian3.fromDegrees(
      //   -123.0744619,
      //   44.0503706,
      //   0
      // );
      // const heading = Cesium.Math.toRadians(0);
      // const pitch = 0;
      // const roll = 0;
      // const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
      // const orientation = Cesium.Transforms.headingPitchRollQuaternion(
      //   position,
      //   hpr
      // );
      // const entity = window.viewer.entities.add({
      //   position: position,
      //   orientation: orientation,
      //   model: {
      //     uri: '/cesium/SampleData/models/GroundVehicle/GroundVehicle.glb',
      //     minimumPixelSize: 100,
      //     maximumScale: 1000,
      //   },
      // });
      // window.viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position, 100), new Cesium.HeadingPitchRange(0, 0, 0));


    })


    let changeHeading = () => {
      // let center = Cesium.Cartesian3.fromDegrees(116.39, 39.91)
      let heading = Cesium.Math.toRadians(90)
      let pitch = Cesium.Math.toRadians(-10)
      let range = 2000
      // console.log("centercenter", center, heading, pitch, range)
      // window.viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))

      window.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(-123.0724519, 44.0588, 1000),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0
        },
        duration: 5
      })
      window.viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(-123.0724519, 44.0588, 0),new Cesium.HeadingPitchRange(heading, pitch, range))
    }

    return {
      changeHeading
    }

  }
};
</script> 
<style lang="scss" scoped>
.map-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .cesium-camera-methods {
    width: 160px;
    background: #ccc;
    padding: 20px;
    box-sizing: border-box;
  }
}

#cesiumCamera {
  flex: 1;
  width: 100%;
  height: 100%;
}
</style>

?

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖