cesium基础设置

cesium官网下载：https://cesium.com/downloads/
1.安装cesium
选择下载到本地使用，或者通过npm下载到项目中

2.代码书写
（1）创建容器

  <div id="cesiumContainer" style="width: 100%; height: 100%"></div>

（2）引入cesium

import * as Cesium from 'cesium'

（3）设置静态资源路径
静态资源是指在cesium中内置的一些可以使用的资源，静态资源路径可能会根据cesium的版本不同而有区别，查看静态资源路径

// 静态资源路径
;(window as any).CESIUM_BASE_URL = 'node_modules/cesium/Build/CesiumUnminified/'

也可以将该处的静态资源文件放到项目的根目录静态资源文件夹下，例如public文件夹下，这时静态资源路径就为“/”

3.使用Viewer容器渲染

onMounted(async () => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
  })
})

4.申请token，以便调用cesium的api
登录cesium，获取Access Token，将其复制到项目中

控制台如果出现如下报错：

可以设置该配置：

 const viewer = new Cesium.Viewer('cesiumContainer', {
 		infoBox: false,
  })

默认效果图

5.查看器（viewer）部分相关配置项

  const viewer = new Cesium.Viewer('cesiumContainer', {
    // terrainProvider: Cesium.createWorldTerrain({
    //   requestWaterMask: true // 开启水面特效
    // }), // 创建地形
    // infoBox: false,
    // geocoder: true, //是否显示地名查找控件
    // sceneModePicker: true, //是否显示投影方式控件
    // navigationHelpButton: true, //是否显示帮助信息控件
    // baseLayerPicker: true, //是否显示图层选择控件
    // homeButton: true, //是否显示Home按钮
    // fullscreenButton: true, //是否显示全屏按钮
    // timeline: true, //时间轴控件
    // animation: true //动画控件
  })

6.相机相关配置

 // 相机
  // 将视野定位到特定地点
  // viewer.camera.setView({
  //   destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400), //定位到位置
  //   // 视野角度
  //   orientation: {
  //     // 默认（0，-90，0）
  //     heading: Cesium.Math.toRadians(0.0),
  //     pitch: Cesium.Math.toRadians(-15.0),
  //     roll: Cesium.Math.toRadians(0)
  //   }
  // })

  // 定位到特殊地点（含飞行动画）
  // viewer.camera.flyTo({
  //   destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
  //   duration: 3, //飞行时间
  //   orientation: {
  //     heading: Cesium.Math.toRadians(0.0),
  //     pitch: Cesium.Math.toRadians(-15.0)
  //   }
  // })
  
  // lookAt,锁住视野，无法拖动改变视野位置
  // const position = Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400)
  // viewer.camera.lookAt(
  //   position,
  //   new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0.0), Cesium.Math.toRadians(-15.0), 2000)
  // )

7.坐标转换

// 经纬度转换为笛卡尔坐标系
  // let carctesian1 = Cesium.Cartesian3.fromDegrees(110, 20, 20)
  // // 笛卡尔转弧度坐标
  // let cartongraphic = Cesium.Cartographic.fromCartesian(carctesian1)
  // // 弧度坐标转角度坐标,高度不用单独转
  // let lon = Cesium.Math.toDegrees(cartongraphic.longitude)
  // let lat = Cesium.Math.toDegrees(cartongraphic.latitude)
  // 未知角度/已知弧度=360°/2*PI；未知角度=已知弧度*180/PI
  // 圆一周弧度为2*PI，角度为360°
  // let lon = (180 / Math.PI) * cartongraphic.longitude
  // let lat = (180 / Math.PI) * cartongraphic.latitude

  // Add Cesium OSM Buildings, a global 3D buildings layer.
  // const buildingTileset = await Cesium.createOsmBuildings()
  // viewer.scene.primitives.add(buildingTileset)

8.添加实体

// 实体 写法一
  // const point = new Cesium.Entity({
  //   position: Cesium.Cartesian3.fromDegrees(120, 30),
  //   point: {
  //     pixelSize: 20, // 像素点大小
  //     color: Cesium.Color.RED
  //   }
  // })
  // viewer.entities.add(point)

  // 写法二
  // const point2 = viewer.entities.add({
  //   id: 'point',
  //   position: Cesium.Cartesian3.fromDegrees(120, 30),
  //   point: {
  //     pixelSize: 20, // 像素点大小
  //     color: Cesium.Color.RED
  //   }
  // })
  // viewer.zoomTo(point2)

  // 标注，广告牌
  // const billboard = viewer.entities.add({
  //   position: Cesium.Cartesian3.fromDegrees(116, 40, 50),
  //   billboard: {
  //     image: '/src/assets/R-C.png',
  //     scale: 0.3,
  //     color: Cesium.Color.YELLOW
  //   }
  // })
  // viewer.zoomTo(billboard)

  // 标题
  // const label = viewer.entities.add({
  //   position: Cesium.Cartesian3.fromDegrees(116, 40, 50),
  //   label: {
  //     text: 'Cesium',
  //     fillColor: Cesium.Color.YELLOWGREEN,
  //     showBackground: true,
  //     backgroundColor: new Cesium.Color(255, 255, 255)
  //   }
  // })
  // viewer.zoomTo(label)