cesium是什么

CesiumJS 是一个开源 JavaScript 库，用于创建具有最佳性能、精度、视觉质量和易用性的世界级 3D 地球仪和地图。从航空航天到智能城市再到无人机，各行各业的开发人员使用 CesiumJS 来创建交互式 Web 应用程序，以共享动态地理空间数据。

CesiumJS 在Apache 2.0 许可下发布，可免费用于商业和非商业用途。

源码地址 github.com/CesiumGS/ce…

1.Cesium本地环境搭建

最新的release版本代码下载地址 cesium.com/learn/cesiu…

下载后解压目录，用vscode打开该目录
先安装资源

cnpm install
复制代码

本地运行

cnpm start
复制代码

运行后看到的界面

5.点击HelloWorld查看基础示例demo

6.HelloWorld代码分析

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Hello World!</title>
    <!-- 引入Cesium.js， 该js定义了Cesium对象 -->
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <!-- 定义cesium要渲染的元素 -->
    <div id="cesiumContainer"></div>
    <script>
      // 执行创建cesium渲染
      var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
  </body>
</html>
复制代码

2.Cesium目录结构介绍

2.1.根路径文件

CHANGES.md： Cesium每个版本的变更记录以及每个版本修复了哪些功能
gulpfile.cjs： 记录了cesium的所有打包流程，包括GLSL语法的转义、压缩和未压缩库文件的打包、API文档的生成以及自动化单元测试等
index.html： Web导航首页
package.json： 一个用于包的依赖管理文件，包括包的名称、版本号、描述、官网url、作者、程序的主入口文件、开发环境和生产环境依赖包列表以及执行执行脚本等
README.md： 项目的入门手册，里面介绍了整个项目的使用、功能等等
server.cjs： Cesium内置的Node服务器文件，命令npm run start以及npm run startPublic实际上执行的文件

2.2.Apps文件夹

CesiumViewer： 一个简单的Cesium初始化示例
SampleData： 所有示例代码所用到的数据，包括json、geoJson、topojson、kml、czml、gltf、3dtiles以及图片等
Sandcastle： Ceisum的示例程序代码就存储在此文件夹里，有兴趣的童鞋可以查阅每一个示例代码，一定会有新的收获
TimelineDemo： 时间轴示例代码

2.3.Build文件夹

Cesium： 打包之后的Cesium库文件（压缩）
CesiumUnminified： 打包之后的Cesium库文件（未压缩），引用该文件可方便开发人员进行调试，找到程序异常或报错的具体代码位置
Documentation： 打包之后的API 文档

2.4.Source文件夹

Source文件夹是Cesium整个项目工程的重中之重，涉及到的所有类的源码和自定义shader（渲染）源码都存储在此文件夹里，有兴趣的童鞋可以通过阅读源码研究每个类、属性、方法及事件的实现原理。

2.5.Specs文件夹

自动化单元测试，Cesium采用了单元测试Jasmine框架，可以实现接口的自动化测试以及接口覆盖率等统计效果。

2.6.ThirdParty文件夹

Cesium中接口实现和单元测试所依赖的外部第三方库，比如代码编辑器codemirror、单元测试框架库jasmine、javascript语法和风格的检查工具jshint等。

3.Cesium界面组件显隐

初始化界面上的组件功能使用过后就基本知道什么作用了，但是实际开发中肯定要隐藏这些默认功能，开发自己的UI界面

3.1.通过js配置项控制（推荐）

    var viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false, // 动画小组件
      baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
      fullscreenButton: false, // 全屏组件
      vrButton: false, // VR模式
      geocoder: false, // 地理编码（搜索）组件
      homeButton: false, // 首页，点击之后将视图跳转到默认视角
      infoBox: false, // 信息框
      sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
      selectionIndicator: false, //是否显示选取指示器组件
      timeline: false, // 时间轴
      navigationHelpButton: false, // 帮助提示，如何操作数字地球。
      // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
      navigationInstructionsInitiallyVisible: false,
    });

    // 隐藏logo
    viewer._cesiumWidget._creditContainer.style.display = "none";
复制代码

3.2.通过css样式隐藏控制

   /* 通过CSS控制组件显隐及位置 */
    .cesium-viewer-toolbar,             /* 右上角按钮组 */
    .cesium-viewer-animationContainer,  /* 左下角动画控件 */
    .cesium-viewer-timelineContainer,   /* 时间线 */
    .cesium-viewer-bottom               /* logo信息 */ {
      display: none !important;
    }

    .cesium-widget-credits  /* 隐藏logo图片 */ {
      display: none !important;
    }

    .cesium-viewer-fullscreenContainer  /* 全屏按钮 */ {
      display: none !important;
      position: absolute;
      top: 0;
    }
复制代码

Cesium系列-基础入门