cesium入门笔记集合

比眉伴天荒 2022-03-15 11:16 1316阅读 0赞

### 目录标题 ###

*   *  一、认识Cesium
     *   *  概念
         *  作用
     *  二、环境建立
     *   *  应用程序目录
         *  使用说明
         *  快速搭建最简环境
     *  三、界面以及小组件显示隐藏
     *   *  viewer介绍
         *  隐藏界面中的元素
         *   *  1、通过js代码控制
             *  2、通过css控制
         *  显示帧速(FPS)
     *  四、绘制形状
     *   *  通过Entity添加形状
         *  通过CZML添加
     *  五、3D Tiles
     *   *  3D Tiles 是什么
         *  3D Tiles 运用
         *   *  modelMatrix
     *  六、cesium中的坐标
     *   *   *  概念
             *  三维空间的右手笛卡尔坐标
             *  1.坐标系
             *  2. 二维屏幕坐标系到三维坐标系的转换
             *  3. 三维坐标到地理坐标的转换
             *  4. 地理坐标到经纬度坐标的转换
             *  5. 经纬度坐标转地理坐标（弧度）
             *  6. 经纬度坐标转世界坐标
             *  7. 计算两个三维坐标系之间的距离
     *  七、相机（camera）
     *   *   *  概念
             *  设置相机的位置
             *   *  方法一、Cartesian
                 *  方法三、flyTo
                 *  方法四、lookAt
             *  直接限制相机高度范围
             *  控制视角不转到地下
             *  官网Demo笔记

## 一、认识Cesium ##

### 概念 ###

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

### 作用 ###

*  使用3D Tiles加载各种3D数据，包含地形影像、人工模型、倾斜摄影、三维建筑物、CAD、BIM、点云数据等
 *  可以绘制各种几何图形、高亮区域，支持导入图片，甚至3D模型等多种数据可视化展示;
 *  可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和mobile;
 *  Cesium还支持基于时间轴的动态数据展示。
 *  全球级别的高精度的地形和影像服务
 *  地形影像、模型、倾斜、二三维场景与时态数据
 *  粒子特效：烟、火花

## 二、环境建立 ##

开发之前设置步骤：

1.  访问[Cesium Viewer][]确保您的系统与Cesium兼容
2.  安装[Node.js的][Node.js]。
3.  克隆或下载zip并提取内容。
4.  在控制台中，导航到根`cesium-workshop`目录。
5.  运行`npm install`。
6.  运行`npm start`，点击控制台上的http://localhost:8080

### 应用程序目录 ###

*  **Source/** : 我们项目的代码。
 *  **ThirdParty/** : 外部js库，目前只包含cesium。
 *  **[LICENSE.md][]** : 我们项目的说明条款。
 *  **index.html** : 主页，包含项目程序代码和页面结构。
 *  **server.js** : 简单的基于nodejs的http服务器。

CesiumJS完全兼容现代javascript 库和框架,下面是一些示例：

*  [Cesium and webpack][] 教程展示了使用webpack集成cesium去更高效的开发web项目。
 *  [React集成][React]
 *  [CesiumJS和Threejs集成][CesiumJS_Threejs]
 *  [Vue集成][Vue]

### 使用说明 ###

点击 [http://localhost:8080/][http_localhost_8080] 出现的页面：

*  **Documentation**
    
    里面是Cesium的完整的API说明，里面可以找到：  
    1、某一个模块的所有函数、属性  
    2、部分效果截图
    
    3、部分函数，属性调用代码示例
 *  **Sandcastle**
    
    一个沙盒，你可以在里面浏览当前版本的一些功能特性：  
    1、一个可运行的代码库  
    2、新建一个页面，进行代码测试  
    3、导出测试代码

### 快速搭建最简环境 ###

1.  创建文件夹 cesium-test
2.  引入编译成果 ，将cesium源码中的Build文件夹，拷入cesium-test
3.  创建html ，将cesium源码中Apps/ 中的HelloWorld.html 拷入cesium-test
4.  修改js和css的文件路径
5.  发布

## 三、界面以及小组件显示隐藏 ##

### viewer介绍 ###

1.  Geocoder : 查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图
2.  Home Button :视角返回初始位置
3.  Scene Mode Picker : 选择视角的模式，有三种：3D，2D，哥伦布视图(CV)
4.  Base Layer Picker : 图层选择器，选择要显示的地图服务和地形服务
5.  Navigation Help Button :导航帮助按钮，显示默认的地图控制帮助
6.  Animation : 动画器件，控制视图动画的播放速度
7.  Timeline :时间线,指示当前时间，并允许用户跳到特定的时间
8.  Credits Display :版权显示，显示数据归属，必选
9.  Fullscreen Button :全屏按钮

### 隐藏界面中的元素 ###

#### 1、通过js代码控制 ####

界面上默认的小控件可以通过在初始化Viewer的时候设置相应的属性来关闭

var viewer = new Cesium.Viewer('cesiumContainer',{ 
        geocoder:false,
        homeButton:false,
        sceneModePicker:false,
        baseLayerPicker:false,
        navigationHelpButton:false,
        animation:false,
        creditContainer:"credit",
        timeline:false,
        fullscreenButton:false,
        vrButton:false,
        });
    //界面默认的小控件的关闭方法，还有很多额外的属性，可以查看帮助文档

#### 2、通过css控制 ####

/* 不占据空间，无法点击 */
          .cesium-viewer-toolbar,             /* 右上角按钮组 */
          .cesium-viewer-animationContainer,  /* 左下角动画控件 */
          .cesium-viewer-timelineContainer,   /* 时间线 */
          .cesium-viewer-bottom               /* logo信息 */
          { 
            display: none;
          }
          .cesium-viewer-fullscreenContainer  /* 全屏按钮 */
         {  position: absolute; top: -999em;  }
    /*注：全屏按钮不能通过display:none的方式来达到隐藏的目的，这是因为生成的按钮控件的行内样式设置了display属性，会覆盖引入的css属性*/

### 显示帧速(FPS) ###

viewer.scene.debugShowFramesPerSecond = true;

## 四、绘制形状 ##

### 通过Entity添加形状 ###

**案例：添加立方体**

var viewer = new Cesium.Viewer('cesiumContainer');
    var redBox = viewer.entities.add({ 
      name : 'Models', //名字，非唯一
      position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0), //位置
      // 边框
      box : { 
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
      }
    });
    
    viewer.zoomTo(viewer.entities);

### 通过CZML添加 ###

*  CZML也可以添加几何形状，而且CZML还可以描述动画

官方说明：CZML是一种JSON格式的字符串，用于描述与时间有关的动画场景，CZML包含点、线、地标、模型、和其他的一些图形元素，并指明了这些元素如何随时间而变化。某种程度上说, Cesium 和 CZML的关系就像 Google Earth 和 KML

## 五、3D Tiles ##

### 3D Tiles 是什么 ###

3D Tiles是一种开放式规范，用于跨桌面，Web和移动应用程序共享，可视化，融合以及与大量异构3D地理空间内容交互。

3D Tiles将用于流式传输3D内容，包括建筑物，树木，点云和矢量数据。

参考\[官网 3dtiles 介绍 \]\[[https://cesium.com/blog/2015/08/10/introducing-3d-tiles/][https_cesium.com_blog_2015_08_10_introducing-3d-tiles]\]

### 3D Tiles 运用 ###

//contextCapture 可以将无人机成果转换成Cesium支持的倾斜摄影成果 ，数据的加载比较简单 
    //但是问题在于生成的数据不一定是落在地面上，有可能是浮在空中的 
    
    var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ 
    	url: url, //数据路径 
    	maximumScreenSpaceError: 2, //最大的屏幕空间误差
    	maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
    	modelMatrix: m //形状矩阵
    }))

希望拍摄的成果能贴到地面上，和地图能很好的融合在一起

#### modelMatrix ####

Cesium3DTile里面的一个属性：可以更改位置

1.  自己获取偏移量
    
    目标位置 = 平移矩阵 \* 原始位置 （参考《WebGl编程指南》的第三章第四章）
    
        //Tx,Ty,Tz就是我们需要设置的 x,y,z方向上的平移距离
        //由于Cesium的矩阵是列主序的，所以这里写成:
        
        //创建平移矩阵方法一
        /*m = Cesium.Matrix4.fromArray([ 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, x, y, z, 1.0 ])*/
        
        //创建平移矩阵方法二
        var translation=Cesium.Cartesian3.fromArray([x, y, z]);
        m= Cesium.Matrix4.fromTranslation(translation);
        
        //生效
        tileset._modelMatrix = m;
        
        /*这里我们只需要不断的修改 x,y,z，就可以调整物体的位置了 获取 x,y,z 之后,在加载3D Tiles 时将modelMatrix 设置成目标 x,y,z值，就完成了*/
2.  计算偏移量
    
    \[官方示例 \]\[[https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=3D Tiles Adjust Height.html][https_cesiumjs.org_Cesium_Build_Apps_Sandcastle_index.html_src_3D Tiles Adjust Height.html]\]

//直接调用函数，调整高度,height表示物体离地面的高度
    function changeHeight(height) { 
       height = Number(height);
       	if (isNaN(height)) { 
       		return;
       	}
       var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
       var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, 									cartographic.latitude, cartographic.height);
       var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, 										cartographic.latitude,height);
       var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
       tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    }

## 六、cesium中的坐标 ##

#### 概念 ####

[cesium][]中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系（世界坐标）。

*  WGS84坐标一般以经纬度来指明一个地点，原点在椭球的质心 。
 *  笛卡尔空间坐标系常用来做一些空间位置变换如平移旋转缩放等等，坐标原点在椭球的中心 。

#### 三维空间的右手笛卡尔坐标 ####

偏航(yaw)/俯仰(pitch)/滚动(roll)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]

屏幕坐标----------------------------------------------->Pick

世界坐标----------------------------------------------->Cartesian

地理坐标（弧度） ---------------------------------->cartographic

经纬度坐标-------------------------------------------->Point

**说明：以经纬度固定模型位置，要先将经纬度转换为世界坐标**

#### 1.坐标系 ####

new Cesium.Cartesian2(1,1) //表示一个二维笛卡尔坐标系，也就是直角坐标系（屏幕坐标系）
    new Cesium.Cartesian3(1,1,1) //表示一个三维笛卡尔坐标系，也是直角坐标系(真实世界的坐标系)

#### 2. 二维屏幕坐标系到三维坐标系的转换 ####

var pick1= scene.globe.pick(viewer.camera.getPickRay(pt1), scene) 
    //其中pt1为一个二维屏幕坐标。

#### 3. 三维坐标到地理坐标的转换 ####

var geoPt1= scene.globe.ellipsoid.cartesianToCartographic(pick1) 
    //其中pick1是一个Cesium.Cartesian3对象。

#### 4. 地理坐标到经纬度坐标的转换 ####

var point1=[geoPt1.longitude / Math.PI * 180,geoPt1.latitude / Math.PI * 180]; 
    //其中geoPt1是一个地理坐标。

#### 5. 经纬度坐标转地理坐标（弧度） ####

var cartographic = Cesium.Cartographic.fromDegree(point) //point是经纬度值
    var coord_wgs84 = Cesium.Cartographic.fromDegrees(lng, lat, alt);//单位：度，度，米

#### 6. 经纬度坐标转世界坐标 ####

var cartesian = Cesium.Cartesian3.fromDegree(point)

#### 7. 计算两个三维坐标系之间的距离 ####

var d = Cesium.Cartesian3.distance(
        new Cesium.Cartesian3(pick1.x, pick1.y, pick1.z), 
        new Cesium.Cartesian3(pick3.x, pick3.y, pick3.z)
    ); 
    //pick1、pick3都是三维坐标系

## 七、相机（camera） ##

#### 概念 ####

*  相机相当于我们在场景中的视野，模拟人的眼睛，用于观察视角。

**Cesium默认支持使用鼠标和触摸事件控制相机 ：**

*  左键单击并拖动 - 移动整个地图
 *  右键单击并拖动 - 放大和缩小相机。
 *  中轮滚动 - 也可以放大和缩小相机。
 *  中间点击并拖动 - 围绕地球表面的点旋转相机。

#### 设置相机的位置 ####

##### 方法一、Cartesian #####

camera.setView({ 
        destination : new Cesium.Cartesian3(x, y, z),
        orientation: { 
            //heading/pitch/roll 的单位是弧度
            heading : headingAngle,  //方向向量以正东方向为轴的旋转角度 
            pitch : pitchAngle,		//方向和水平平面的夹角 
            roll : rollAngle		//方向向量指向水平平面上方，反之表示方向向量指向平面下方
        }
    });``` ##### 方法二、Rectangle > 设置为一个矩形区域 ```js
    
    viewer.camera.setView({ 
       ///西，南，东，北 
        destination : Cesium.Rectangle.fromDegrees(west, south, east, north),
        orientation: { 
            heading : headingAngle,
            pitch : pitchAngle,
            roll : rollAngle
        }
    })
    //参数为可选参数，如果不设置默认以当前的相机去计算对应的属性

##### 方法三、flyTo #####

> 跳转镜头到指定位置

//lookAt(target, offect) 
    //target目标位置在世界坐标,offect以目标为中心的当地东北向参考系中的目标的偏移量。
    view.camera.flyTo({ 
         destination :  Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0), // 设置位置
         orientation: { 
             heading : Cesium.Math.toRadians(20.0), // 方向
             pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
             roll : 0
         },
         duration:5, // 设置飞行持续时间，默认会根据距离来计算
         complete: function () { 
             // 到达位置后执行的回调函数
             console.log('到达位置');
         },
         cancle: function () { 
             // 如果取消飞行则会调用此函数
             console.log('取消飞行')
         },
         // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
         pitchAdjustHeight: -90, 
         maximumHeight:5000, // 相机最大飞行高度
         flyOverLongitude: 100, // 如果到达目的地有2种方式，设置具体值后会强制选择方向飞过这个经度
     });

##### 方法四、lookAt #####

> lookAt会将视角固定在设置的点上

var center = Cesium.Cartesian3.fromDegrees(-72.0, 40.0);
    var heading = Cesium.Math.toRadians(50.0);
    var pitch = Cesium.Math.toRadians(-20.0);
    var range = 5000.0;
    view.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));

#### 直接限制相机高度范围 ####

*  设置后当相机高度达到设置的最大和最小高度时将不再放大和缩小

//相机的高度的最小值
    	viewer.scene.screenSpaceCameraController.minimumZoomDistance = 250000;
    //相机高度的最大值
    	viewer.scene.screenSpaceCameraController.maximumZoomDistance = 22000000; 
    //设置相机缩小时的速率
    	viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; 
    //设置相机放大时的速率
    	viewer.scene.screenSpaceCameraController._maximumZoomRate=5906376272000

#### 控制视角不转到地下 ####

this.viewer.scene.globe.depthTestAgainsTerrain = true

#### 官网Demo笔记 ####

![在这里插入图片描述][2019030212375315.jpg]

[Cesium Viewer]: https://cesiumjs.org/Cesium/Build/Apps/CesiumViewer/
[Node.js]: https://nodejs.org/en/
[LICENSE.md]: http://LICENSE.md
[Cesium and webpack]: https://cesiumjs.org/tutorials/cesium-and-webpack/
[React]: https://cesium.com/blog/2018/03/05/integrating-cesium-and-react/
[CesiumJS_Threejs]: https://cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/
[Vue]: https://blog.csdn.net/alisa_lisa/article/details/87940080
[http_localhost_8080]: http://localhost:8080/
[https_cesium.com_blog_2015_08_10_introducing-3d-tiles]: https://cesium.com/blog/2015/08/10/introducing-3d-tiles/
[https_cesiumjs.org_Cesium_Build_Apps_Sandcastle_index.html_src_3D Tiles Adjust Height.html]: https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=3D%20Tiles%20Adjust%20Height.html
[cesium]: https://www.baidu.com/s?wd=cesium&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]: /images/20220315/9a617682098a461284b93eca10c4e73b.png
[2019030212375315.jpg]: /images/20220315/9f5184a5a92f4f579164f7d5a67a8982.png