《学习笔记》VueCesium第一篇：vc-viewer的camera

最近感觉Cesium很火，就打算学一学，网上资料有限，所以打算记录下。

VueCesium 是基于CesiumJs封装的组件库，可以大幅度降低学习难度，所以推荐先从中入手。

VcViewer

构建 Cesium 应用程序的基础组件，其实质是通过 Cesium.Viewer 初始化的一个 DOM 节点，用于挂载其他 DOM 节点或者子组件。

属性 camera ：options

选项	类型	示例
heading	number	航向分量，单位度
pitch	number	俯仰分量，单位度
roll	number	滚动分量，单位度
rectangle	{west, south, east, north,}or [x,y,z,w]	经度和纬度坐标的二维区域，单位度number
position	{lng ,lat ,height} or [x,y,z]	相机位置,number

position	类型	示例
height	number	相机高度,单位米
lng	number	经度，单位度
lat	number	纬度，单位度

示例图

<template>
  <el-row ref="viewerContainer" class="demo-viewer">
    <vc-viewer ref="vcViewer" :camera="camera">     
      <vc-layer-imagery>
        <vc-imagery-provider-tianditu
          map-style="img_c"
          token="436ce7e50d27eede2f2929307e6b33c0"
        ></vc-imagery-provider-tianditu>
      </vc-layer-imagery>
      <vc-layer-imagery ref="layerText">
        <vc-imagery-provider-tianditu
          map-style="cia_c"
          token="436ce7e50d27eede2f2929307e6b33c0"
        ></vc-imagery-provider-tianditu>
      </vc-layer-imagery>
    </vc-viewer>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      camera: {
        heading: 360,
        pitch: -90, 
          roll: 0,
        position: {
          height: 1000,
          lat: 39.907175,
          lng: 116.39125,
        },      
      },
    };
  }, 
  mounted() {
    this.$refs.vcViewer.creatingPromise.then(({ Cesium, viewer }) => {
      console.log("viewer is loaded.");
    });
  },  
};
</script>

注：vc-layer-imagery为图层组件，方便观察引入