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)