cesium基础设置

cesium官网下载： cesium /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)