vite+vue3.0+cesium ----03 cesium设置初始视角，加载位置与俯仰角

最新推荐文章于 2025-05-19 11:32:02 发布

不染-9732

最新推荐文章于 2025-05-19 11:32:02 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： cesium vue 文章标签： arcgis 前端

本文链接：https://blog.csdn.net/weixin_43564810/article/details/129454709

vue 同时被 2 个专栏收录

33 篇文章

订阅专栏

cesium

20 篇文章

订阅专栏

本文展示了如何在Vite和Vue3.0环境中，结合Cesium库来设置地图的默认相机视角。通过调用`viewer.camera.setView`方法，可以设定目的地坐标、坐标系旋转角度和俯仰角度，从而控制地球的初始显示位置和观看视角。示例代码中，相机被设置在了广州上方2000米的位置，俯视角度为-45度，坐标系旋转90度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vite+vue3.0+cesium ----03 cesium相机的常用配置

1. 在配置完成viewer之后我们可以对camera使用setView进行设置

该处设置能够帮助我们操作打开地球的默认位置，和观看的视角

  // 设置默认相机视角
  viewer.camera.setView({
    destination:Cesium.Cartesian3.fromDegrees(113.318977,23.114155,2000),
    // 方向，俯视和仰视的视角
    orientation:{
      heading:Cesium.Math.toRadians(90),//坐标系旋转90度
      pitch:Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
    }
  })

2.设置后效果

设置后效果

3. 单页面完整代码

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
  // 配置cesium中的相关属性
  let custom = new Cesium.ArcGisMapServerImageryProvider({
    url: "//servicse.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
  });
  let viewer = new Cesium.Viewer("cesiumContainer", {   //cesium的查看器的基本属性
    baseLayerPicker: true, //配置图层底图的图标
    // imageryProvider:custom  ,//使用上面自己配置的底图
    terrainProvider: Cesium.createWorldTerrain({//设置cesium的世界地形
      requestVertexNormals: true, //地形的开启
      requestWaterMask: true, //水面效果的开启
    }),
  });
  // 设置默认相机视角
  viewer.camera.setView({
    destination:Cesium.Cartesian3.fromDegrees(113.318977,23.114155,2000),
    // 方向，俯视和仰视的视角
    orientation:{
      heading:Cesium.Math.toRadians(90),//坐标系旋转90度
      pitch:Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
    }
  })
});
</script>

<style scoped>
#cesiumContainer {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  position: absolute;
}
</style>