2 Cesium开发入门

Cesium目录结构介绍

根路径文件

• 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实际上执行的文件。

Apps文件夹

使用 Source 目录下的源码直接创建出来的现成应用程序，包括我们熟悉的 Sandcastle（沙盒）程序，还有两个简单的，有兴趣自行打开查看（使用 start 这个命令启动开发服务器，从主页进）。含少量测试数据示例等。

• CesiumViewer：一个简单的Cesium初始化示例

• SampleData：所有示例代码所用到的数据，包括json、geoJson、topojson、kml、czml、gltf、3dtiles以及图片等。

• Sandcastle：Ceisum的示例程序代码就存储在此文件夹里，有兴趣的童鞋可以查阅每一个示例代码，一定会有新的收获。

• TimelineDemo：时间轴示例代码。

Build文件夹

运行 build/combine/minify 等指令，这个文件夹才会出现。它主要是发布出来 CesiumJS 的 iife 库版本，以及附带必须要用的四大静态资源文件夹 - Assets、ThirdParty、Widgets、Workers。

根据指令的不同，发布的 iife 库版本不一样，也影响是不是有 TypeScript 类型定义文件、SourceMap 映射文件。

combine 指令发布的是 CesiumUnminified 未压缩版本，也就是主库文件有 37 万行的版本；minify 指令发布的是 Cesium 文件夹下的压缩版本，代码经过简化。

本节重点的开发引入

• Cesium：打包之后的Cesium库文件（压缩）。

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

• Documentation：打包之后的API 文档。

• Specs 测试目录

Source文件夹

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

• Assets，一些静态资源，例如默认天空盒、离线两级世界影像（TMS）等；

Specs文件夹

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

ThirdParty文件夹

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

html引入Cesium

下载

官网下载cesium 113版本地址

拷贝工程

拷贝文件到html工程目录下，如果是vue项目，可以直接拷贝到public目录下，拷贝内容主要是Build/Cesium

引入

html引入

  <script src="./cesium/Cesium.js"></script>
  <link rel="stylesheet" href="./cesium/Widgets/widgets.css">

页面使用

4. 页面中直接使用 new Cesium()

Vue2引入Cesium WebPackage方式

新建VUE项目

安装cesium

npm install cesium --save 

前使用版本1.99是当期最新版本

vue.config.js配置Cesium

定义源码路径

const cesiumSource = './node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

module.exports配置

module.exports = {
···
configureWebpack: {
    output: {
      sourcePrefix: ' ' // 1
    },
    amd: { // 2
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource) // 3
      }
    },
     plugins: [
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
            new webpack.DefinePlugin({
            CESIUM_BASE_URL: JSON.stringify('./')
            })
        ],
        module: {
            unknownContextCritical: /^.\/.*$/,
            unknownContextCritical: false
        }

····

}

main.js引用

var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');

Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

VUE页面中引用

import * as Cesium from 'cesium/Cesium';

initEarth() {
      Cesium.Ion.defaultAccessToken = '';//ion服务器key

      this.viewer = new Cesium.Viewer('earth', {
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        homeButton: false, // homebutton
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        skyAtmosphere: false,//大气层
        shadows: true,
        terrainProvider: Cesium.createWorldTerrain(),
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=[你自己的key]',
          layer: 'tdt',
          minimumLevel: 0,
          maximumLevel: 18,
          style: 'default',
          tileMatrixSetID: 'w',
          format: 'image/jpeg',
        }),
      });

Vue3引入Cesium

新建vue 使用vite, pnpm，可以考虑ts

安装cesium

pnpm i cesium -S

安装插件

pnpm i vite-plugin-cesium -D

引入插件

import cesium from 'vite-plugin-cesium'; // 引入插件                   
export default () => {
  return {
    plugins: [
      vue(),
      cesium(),
    ],        
  },
};

Vue中使用cesium

import 'cesium/Build/Cesium/Widgets/widgets.css';
import * as Cesium from 'cesium/Build/Cesium';

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

cator: false, // 是否显示选取指示器组件
timeline: true, // 时间轴
navigationHelpButton: false, // 帮助提示，如何操作数字地球。
// 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
navigationInstructionsInitiallyVisible: false,
})
推荐小宝公众号