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)
