关于cesuim的一些基本的属性(自己记录)

110 阅读1分钟
 <template>
  <div>
    <!-- 容器 -->
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {},
  components: {},
  data() {
    return{
      
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted() {
    var viewer = new Cesium.Viewer("cesiumContainer", {
      // 是否显示信息窗口
      infoBox: false , //将浏览器中的blank报错取消掉
      // 是否显示搜索框
      geocoder: false,
      // 是否显示home按钮
      homeButton: false,
      // 场景的转换
      sceneModePicker: false,
      // 是否显示图层选择器
      baseLayerPicker: false,
      // 帮助按钮
      navigationHelpButton: false,
      // 动画
      animation: false,
      // 是否设置时间轴
      timeline: false,
      // 设置全屏按钮
      FullscreenButton: false,
      // 天空盒子,就是地球的背景色
      skyBox:new Cesium.SkyBox({
        sources: {
          positiveX: 'skybox_px.png',
          negativeX: 'skybox_nx.png',
          positiveY: 'skybox_py.png',
          negativeY: 'skybox_ny.png',
          positiveZ: 'skybox_pz.png',
          negativeZ: 'skybox_nz.png'
        }
      }),
       // `这个没实现`
      // 自定义椭圆体上的图像(来自于哪个地图,高德还是...)??我看不到效果
      ImageryProvider: new Cesium.OpenStreetMapImageryProvider({
         url : 'https://a.tile.openstreetmap.org/'
      }),
      // 使地图更加的立体
      terrainProvider: Cesium.createWorldTerrain({
        // 增加水纹的效果
        requestWaterMask: true,
        // 增加光照的效果
        requestVertexNormals : true
      })
    });
    // 地图的叠加
    const imagerLayers = viewer.imagerLayers;
    var layer = imagerLayers.addImageryProvider(
      new Cesium.GoogleEarthEnterpriseMapsProvider({
        url : 'https://earth.localdomain',
        channel : 1008
      })
    )
    // 设置透明度
    layer.alpha=0.5
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
</style>
<template>
  <div>
    <!-- 容器 -->
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {},
  components: {},
  data() {
    return{
      
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted() {
    var viewer = new Cesium.Viewer("cesiumContainer", {
      // 是否显示信息窗口
      infoBox: false, //将浏览器中的blank报错取消掉
    })
    // 坐标系的种类
      // 二维的平面的坐标系
      // 地理位置坐标系,经度、维度、高度
      // 三维的笛卡尔坐标系(空间坐标系),一般用这个,因此需要将经纬度转换

      // 角度和弧度的转换--2PI*弧度=360°   可知弧度和角度的转换
    const radians = Cesium.Math.toRadians(90)
    // 弧度转角度
    const degrees = Cesium.Math.toDegrees(radians)

    // 将经纬度转化为笛卡尔坐标系
    var cartesion = Cesium.Cartesian3.fromDegrees(
      // 经度
      89.5,
      // 维度
      20.4,
      // 高度
      100
    )
    console.log(cartesion)

    // 将笛卡尔坐标系转化为经纬度--结果对象的值以弧度表示
    var Cartographic = Cesium.Cartographic.fromCartesian(cartesion)
    console.log(Cartographic) 
    // console.log(Cesium.Math.toDegrees(Cartographic.latitude)) //这个才是原来的维度

    // 瞬间将地图到达某一个位置
    // 我们在拨动地图的时候,动的不是地图,而是相机
    viewer.camera.setView({
        // 指定相机的位置
      destination: Cesium.Cartesian3.fromDegrees(116.393428, 39.90923, 100),
      // 设置相机的视角
      orientation: {
        // 设置相机的朝向 屏幕面向人脸是z轴,向上是Y轴,另一个方向是X轴
        // heading 为绕y轴进行旋转
        heading: Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
        // 相机的俯仰角:就是绕x轴进旋转,0度是竖直向上,-90是竖直向下
        pitch: Cesium.Math.toRadians(-90),    // default value (looking down)
        // 相机的翻滚角
        roll : 0.0                             // default value
      }
    });

    // ======================================
    // 让相机飞过去
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(116.393428, 39.90923, 100),
      // 设置相机的视角
      orientation: {
        // 设置相机的朝向 屏幕面向人脸是z轴,向上是Y轴,另一个方向是X轴
        // heading 为绕y轴进行旋转
        heading: Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
        // 相机的俯仰角:就是绕x轴进旋转,0度是竖直向上,-90是竖直向下
        pitch: Cesium.Math.toRadians(-90),    // default value (looking down)
        // 相机的翻滚角
        roll : 0.0                             // default value
      }
    })

    // 通过按键去控制相机的前进或者后退
    document.addEventListener('keydown', (e) => {
      // 将速率根据高度改变 ---- 突然发现所有动的一切都是根据viewer
      const height = viewer.camera.positionCartographic.height
      console.log(height)
      const moveRate=height/10
      if (e.key === 'w') {
        // 相机向前进行移动(速率)
        viewer.camera.moveForward(moveRate)
        // Camera#moveBackward
        // Camera#moveForward
        // Camera#moveLeft
        // Camera#moveRight
        // Camera#moveUp
        // Camera#moveDown
        // 相机的向左右旋转
        //Camera#lookUp
        // Camera#lookDown
        // Camera#lookLeft
        // Camera#lookRight

        // 逆时针和顺时针旋转相机
        // Camera#twistRight
      }
    })
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
</style>

(cesuim: cesuim 和mars3D 的学习的资料和笔记 (gitee.com)) 希望自己能留下来