cesium入门笔记集合

最新推荐文章于 2024-09-18 15:55:38 发布

呱呱•.•

最新推荐文章于 2024-09-18 15:55:38 发布

阅读量4.9k

点赞数 5

分类专栏： Cesium 文章标签： cesium js 笔记

本文链接：https://blog.csdn.net/alisa_lisa/article/details/88074489

版权

本文详细介绍了Cesium的入门知识，从概念到环境搭建，深入探讨了界面组件的控制、绘制形状、3D Tiles的运用以及坐标系统。通过示例代码和实践操作，帮助读者理解Cesium在3D地图和数据可视化中的应用。

摘要由CSDN通过智能技术生成

目录标题

一、认识Cesium

概念

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

作用

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

二、环境建立

开发之前设置步骤：

访问Cesium Viewer确保您的系统与Cesium兼容
安装Node.js的。
克隆或下载zip并提取内容。
在控制台中，导航到根cesium-workshop目录。
运行npm install。
运行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集成
CesiumJS和Threejs集成
Vue集成

使用说明

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

Documentation

里面是Cesium的完整的API说明，里面可以找到：
1、某一个模块的所有函数、属性
2、部分效果截图

3、部分函数，属性调用代码示例
Sandcastle

一个沙盒，你可以在里面浏览当前版本的一些功能特性：
1、一个可运行的代码库
2、新建一个页面，进行代码测试
3、导出测试代码

快速搭建最简环境

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

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

viewer介绍

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

var czml = [{
   
    "id" : "document",
    "name" : "box",
    "version" : "1.0"
},{
   
    "id" : "shape2",
    "name" : "Red box with black outline",
    "position" : {
   
        "cartographicDegrees" : [-107.0, 40.0, 300000.0]
    },
    "box" : {
   
        "dimensions" : {
   
            "cartesian": [400000.0, 300000.0, 500000.0]
        },
        "material" : {
   
            "solidColor" : {
   
                "color" : {
   
                    "rgba" : [