Cesium是什么

我们打开Cesium官网，能够很清晰的看到官方赋予Cesium的使命，即构建世界一流的3D地理空间应用程序。那Cesium到底是个什么东东呢？

  • Cesium是一个跨平台、跨浏览器的展示三维地球和地图的javascript库
  • Cesium使用WebGL来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL
  • Cesium是基于Apache2.0许可的开源程序，它可以免费的用于商业和非商业用途

Cesium支持的数据格式

  • 影像数据：Bing、天地图、ArcGIS、OSM、WMTS、WMS等
  • 地形数据：ArcGIS、谷歌、STK等
  • 矢量数据：KML、KMZ、GeoJSON、TopoJSON、CZML
  • 三维模型：GLTF、GLB（二进制glTF文件）
  • 三维瓦片：3D Tiles（倾斜摄影、人工模型、 三维建筑物、CAD、BIM，点云数据等）

Cesium能做什么

  • 支持2D,2.5D,3D 形式的地理（地图）数据展示
  • 可以绘制各种几何图形、高亮区域，支持导入图片，甚至三维模型等多种数据可视化展示
  • 可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和移动端浏览器
  • 支持基于时间轴的动态流式数据展示

cesium的官方github源代码下载

https://github.com/CesiumGS/cesium/releases

下载压缩包解压后用vscode打开，在index.html 右键运行。就可以在本地查看官方api和一些案例汇总

vue引入cesium

 npm install cesium

配置环境

当然首先是构建一个vue项目，用vue-cli ， 构建方法这里不多说，随便一搜就能搜到。在vue-cli构建完成后，一般来说的话cesium使用需要先配置webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js、config/index.js等等，感觉挺麻烦的。看了一晚上找到一个最简单的解决办法。

1. 打开你的项目目录，然后目录下面这个叫node_modules的文件夹中找cesium文件夹，然后把里面的Build文件夹整个拷出来，放到static目录下。

2.再项目根目录的index.html中引入刚才放入static文件夹中的两个文件（有个小问题 加载地球时页面css样式不见了）

3.解决（报错原因为node_modules中的cesium库并没有导出widget.css文件，导致在引入widget.css时找不到该文件，究其原因为Cesium在模块化导出方面没有做的很完善，官网有解决方案）

我的解决方法：在main.js中引入

初始化地球

一行代码就可以搞定

let viewer = new Cesium.Viewer("cesiumContainer")

运行效果！

如上图有一行小字说 官方建议用自己的ion token。

去官网注册账号获取自己的token，密钥写在代码里。上面一行小字就会消失。

 // cesium 秘钥Cesium.Ion.defaultAccessToken ='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwOGFjYWZjNC02MmE5LTRjOWMtOTRjYS1hYmUyNTA5NjU3MmQiLCJpZCI6MTE5MDY0LCJpYXQiOjE2NzE3MDc2MTZ9.3UkJqIeMcZfjb4EMnTAi8AqUg5CFtKuipy4yktFK9-c';

代码定制cesium viewer 基础控件（创建纯净的地球！）

可以根据需要开启或者关闭他们。

// cesium 秘钥Cesium.Ion.defaultAccessToken ='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwOGFjYWZjNC02MmE5LTRjOWMtOTRjYS1hYmUyNTA5NjU3MmQiLCJpZCI6MTE5MDY0LCJpYXQiOjE2NzE3MDc2MTZ9.3UkJqIeMcZfjb4EMnTAi8AqUg5CFtKuipy4yktFK9-c';this.viewer = new Cesium.Viewer("cesiumContainer", {//放大镜图标，查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图geocoder: true,//房子图标，视角返回初始位置homeButton: true,//经纬网图标，选择视角的模式，有三种：3D，2D，哥伦布视图（2.5D)sceneModePicker: false,//地图图标，图层选择器，选择要显示的地图服务和地形服务baseLayerPicker: false,//问号图标，导航帮助按钮，显示默认的地图控制帮助navigationHelpButton: false,//动画器件，显示当前时间，允许跳转特定时间animation: false,//时间轴timeline: false,//全屏图标，全屏按钮fullscreenButton: false,//虚拟现实vrButton: false,//阴影shadows: false,//点击后显示详细信息infoBox: false,//展示数据版权属性CreditsDisplay: false,creditContainer: "credit",//展示地形terrainProvider: Cesium.createWorldTerrain()});this.viewer.scene.debugShowFramesPerSecond = false; //显示帧率

效果展示！

加载并聚焦三维模型（glb格式）

设置模型url路径

let glb = '../../static/models/Cesium_Air.glb'this.createModel(glb, 50.0)
 createModel(url, height) {this.viewer.entities.removeAll();// 3D笛卡尔点，参数 x、y、zconst position = Cesium.Cartesian3.fromDegrees(119.196653,26.031937,//福理工// 119.28,//东经福州// 26.08,//北纬height);// const heading = Cesium.Math.toRadians(135);// const pitch = 0;// const roll = 0;// const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);// const orientation = Cesium.Transforms.headingPitchRollQuaternion(// position,// hpr// );// 将实体添加到集合中const entity = this.viewer.entities.add({name: url,position: position,// orientation: orientation, // 设置方向model: {uri: url, // 获取或设置字符串Property，该字符串指定glTF资产的URI。 minimumPixelSize: 128, // 获取或设置数字属性，指定近似最小值模型的像素大小，与缩放无关。这可以用来确保即使观看者缩小视图，模型仍然可见。当 0.0 时，没有强制执行最小大小。 maximumScale: 20000, // 获取或设置数字属性，该属性指定最大比例模型的大小},});this.viewer.trackedEntity = entity; // 聚焦模型}

绘制轨迹线

createoutLine(){const orangeOutlined = this.viewer.entities.add({name:"Orange line with black outline at height and following the surface",polyline: {positions: Cesium.Cartesian3.fromDegreesArrayHeights([119.196653, 26.031937,//线的初始经纬度250,//高度129.196653, 26.031937,//结束位置250,]),width: 5,material: new Cesium.PolylineOutlineMaterialProperty({color: Cesium.Color.ORANGE,outlineWidth: 2,outlineColor: Cesium.Color.BLACK,//颜色}),},});},

homebutton 按键重写（默认定位位置的设置）

// 修改homeButton的默认返回位置this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {e.cancel = true;//你要飞的位置this.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(119.196653, 26.031937, 150),})})

效果展示！