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)
