关于javascript:Cesium-上手不完全指北

45次阅读

共计 10056 个字符，预计需要花费 26 分钟才能阅读完成。

Cesium 上手不齐全指北

将最近学习的 CesiumJS 做一个零碎梳理，从我的项目配置开始，记录罕用 API 的应用。

环境搭建与装置

首先，什么是 Cesium，Cesium 是一款开源的基于 JavaScript 的 3D 地图框架，即地图可视化框架。产品基于 WebGL 技术，能够应用 CesiumJS 创立虚构场景的 3D 地理信息平台。其指标是用于创立以基于 Web 的地图动态数据可视化。在晋升平台的性能、准确率、虚拟化能力、易用性方面提供各种反对。

更多介绍和信息可通过官网进行学习。

注册

Cesium ion 是一个提供瓦片图和 3D 天文空间数据的平台，Cesium ion 反对把数据增加到用户本人的 CesiumJS 利用中。应用二三维贴图和世界地形都须要 ion 的反对，如果没有本人的数据源须要 cesium 提供的数据源就须要申请 ion 的 token，具体能够通过以下链接申请 access token。

在创立 Cesium Viewer 的时候，将 access token 填为本人的 access token 即可。

Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';

我的项目搭建

进入我的项目搭建过程，项目选择在 Vue 平台上进行实现，首先创立我的项目装置 cesium 库：

vue create cesium-vue
cd cesium-vue
npm i cesium@1.61 --save

留神：目前应用 webpack 进行配置援用最新版本(1.71) cesium 临时不能导入，实测 cesium@1.61 版本能够进行 import 导入。

我的项目配置

根目录下新建 vue.config.js 配置文件，对我的项目进行根本配置：

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const debug = process.env.NODE_ENV !== 'production'
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
    publicPath: '',
    devServer: {port: 9999},
    configureWebpack: {
        output: {sourcePrefix: ' '},
        amd: {toUrlUndefined: true},
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.resolve('src'),
                'cesium': path.resolve(__dirname, cesiumSource)
            }
        },
        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('./') }),
            new CopyWebpackPlugin([{from: path.join('./static', 'model'), to: 'model3D' }]),
            new CopyWebpackPlugin([{from: path.join('./static', 'images'), to: 'images' }])
        ]
    }
}

在根目录下创立 static 文件夹用于后续 model 和 images 的寄存。

组件实现

在 src/components/ 下新建 CesiumViewer.vue 进行组件实现：

<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
export default {
    name: 'CesiumViewer',
    mounted () {
        // token
        Cesium.Ion.defaultAccessToken = 'your token';
        let viewer = new Cesium.Viewer('cesiumContainer');
    },
    methods: {}}
</script>

<style>
#cesiumContainer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>

能够看到地图在调用 Cesium 的 Viewer 时开始构建。Viewer 是 Cesium API 的终点，new Viewer 后便能够看见地球对象。

组件申明

在 App.vue 中援用组件：

<template>
  <div id="app">
    <CesiumViewer></CesiumViewer>
  </div>
</template>

<script>
import CesiumViewer from './components/CesiumViewer'
export default {
  name: 'App',
  components: {CesiumViewer}
}
</script>

运行查看成果：

npm run serve

此时，曾经能够看见最开始的地球???? 成果，咱们进行一些简略配置和调整：

<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
export default {
    name: 'CesiumViewer',
    mounted () {this.init();
    },
    methods: {init () {
            let viewerOption = {
                geocoder: false,                // 地理位置搜寻控件
                homeButton: false,              // 首页跳转控件
                sceneModePicker: false,         // 2D,3D 和 Columbus View 切换控件
                baseLayerPicker: false,         // 三维地图底图切换控件
                navigationHelpButton: false,    // 帮忙提醒控件
                animation: false,               // 视图动画播放速度控件
                timeline: false,                // 时间轴控件
                fullscreenButton: false,        // 全屏控件
                infoBox: false,                 // 点击显示窗口控件
                selectionIndicator: false,      // 实体对象抉择框控件
                scene3DOnly: true               // 仅 3D 渲染，节俭 GPU 内存
            }
            // token
            Cesium.Ion.defaultAccessToken = 'your token';
            let viewer = new Cesium.Viewer('cesiumContainer', viewerOption);

            // 暗藏 Logo
            viewer.cesiumWidget.creditContainer.style.display = "none";
        }
    }
}
</script>
npm run serve

最终成果如下：

至此，最开始的构建运行就曾经实现了，上面对具体 API 进行学习。

Imagery 图层

开始 API 学习之前，为了不便办法实现，应用 ref 在元素上注册一个援用信息，不便通过 ID 间接拜访一个子组件实例。

批改如下，援用信息将会注册在父组件的 $refs 对象上，子组件通过 this.$viewer 进行拜访。

这里引入图层的概念(Imagery)，瓦片图汇合依据不同的投影形式映射到虚构的三维数字地球表面。依赖于相机指向地表的方向和间隔，Cesium 会去申请和渲染不同层级的图层详细信息。

具体代码如下：

<template>
  <div id="cesiumContainer" ref="viewer"></div>
</template>

<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

export default {
    name: 'CesiumViewer',
    mounted () {
        // 初始化
        this.init();

        // 增加图层
        this.addLayers();},
    methods: {
        // 初始化
        init () {let viewerOption = {...}
            // token
            Cesium.Ion.defaultAccessToken = 'your token';

            this.$viewer = new Cesium.Viewer(this.$refs.viewer, viewerOption);

            this.$viewer.cesiumWidget.creditContainer.style.display = "none";
        },
        // 增加 `Imagery` (图层)
        addLayers () {
            // Remove default base layer
            // this.$viewer.imageryLayers.remove(this.$viewer.imageryLayers.get(0));

            // Add grid imagery
            this.$viewer.imageryLayers.addImageryProvider(new Cesium.GridImageryProvider());
        }
    }
}
</script>

原理上和 PS 的图层统一，多个图层能够增加、移除和排序，渲染并适应到 Cesium 中。

Terrain 地形

Cesium 的地形图层反对渐进式加载和渲染寰球高精度地图，并且包含地形地势、水形数据，包含陆地、湖泊、河流、山峰、峡谷等成果。

为了增加地形数据，咱们须要创立一个 CesiumTerrainProvider，通过 createWorldTerrain 函数创立一个由 Cesium ion 提供服务的 Cesium WorldTerrian，同时可提供配置项，申请额定的水和光数据，最终咱们通过 camera 下的函数定位到创立的地位进行查看：

export default {
  name: "CesiumViewer",
  mounted() {
    // 初始化
    this.init();

    // 增加图层
    // this.addLayers();

    // 增加地形
    this.addTerrain();},
  methods: {
    // 初始化
    init() {...},
    // 增加图层
    addLayers() {...},
    // 增加地形
    addTerrain() {
      this.$viewer.terrainProvider = Cesium.createWorldTerrain({
        requestWaterMask: true, // required for water effects
        requestVertexNormals: true, // required for terrain lighting
      });

      // Enable depth testing so things behind the terrain disappear.
      this.$viewer.scene.globe.depthTestAgainstTerrain = true;

      this.$viewer.scene.camera.flyTo({
        destination: Cesium.Cartesian3.fromRadians(
          -2.6399828792482234,
          1.0993550795541742,
          5795
        ),
        orientation: {
          heading: 3.8455,
          pitch: -0.4535,
          roll: 0.0,
        },
      });
    },
  }
}

Viewer 控件

回到最开始的调整配置上，咱们在 viewerOption 中对 Viewer 申明的一系列根本小控件做了移除和优化操作，具体 API 官网给出了如下形容：

  1. Geocoder : A location search tool that flies the camera to queried location. Uses Bing Maps data by default.
  2. HomeButton : Flies the viewer back to a default view.
  3. SceneModePicker : Switches between 3D, 2D and Columbus View (CV) modes.
  4. BaseLayerPicker : Chooses the imagery and terrain to display on the globe.
  5. NavigationHelpButton : Displays the default camera controls.
  6. Animation : Controls the play speed for view animation.
  7. CreditsDisplay : Displays data attributions. Almost always required!
  8. Timeline : Indicates current time and allows users to jump to a specific time using the scrubber.
  9. FullscreenButton : Makes the Viewer fullscreen.

咱们能够依据本身需要抉择是否启用。

官网形容地址

同时咱们还能够对视窗进行配置，达到本人冀望的成果，如开启依据动静工夫激活太阳地位的光照，对实在地球进行模仿：

export default {
  name: "CesiumViewer",
  mounted() {
    // 初始化
    this.init();

    // 增加图层
    // this.addLayers();

    // 增加地形
    // this.addTerrain();

    // 配置视窗
    this.configScene();},
  methods: {
    // 初始化
    init() {...},
    // 配置视窗
    configScene() {// Enable lighting based on sun/moon positions(激活基于太阳地位的光照)
      this.$viewer.scene.globe.enableLighting = true;
    },
  }
}

更近一步，能够利用上一大节应用的 camera 实现主视窗的定位：

// 配置视窗
configScene() {// Enable lighting based on sun/moon positions(激活基于太阳地位的光照)
    this.$viewer.scene.globe.enableLighting = true;

    // Create an initial camera view
    let initialPosition = new Cesium.Cartesian3.fromDegrees(
        -73.998114468289017509,
        40.674512895646692812,
        2631.082799425431
    );
    let initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
        7.1077496389876024807,
        -31.987223091598949054,
        0.025883251314954971306
    );
    let homeCameraView = {
        destination: initialPosition,
        orientation: {
            heading: initialOrientation.heading,
            pitch: initialOrientation.pitch,
            roll: initialOrientation.roll,
        },
    };
    // Set the initial view
    this.$viewer.scene.camera.setView(homeCameraView);
},

这里须要介绍的是 Scene 的概念，Scence 虚构场景是所有3D 图形对象和状态的容器，通常不是由开发者间接创立，而是在 Viewer 或者 CesiumWidget 外部隐式创立的。

通过 Scene 场景，咱们能够管制 Globe 地球 (包含地形和图层)、Camera 相机、Primitives (默认矢量数据层) 和 PostProcessStage (前期解决成果)等。

除了以上配置，当初咱们须要理解的有以下 Cesium 根本类型的 API:

  1. Cartesian3 : 一个三维笛卡尔坐标——当它被用作绝对于地球核心的地位时，应用地球固定框架（ECEF）。
  2. Cartographic : 由经度、纬度（弧度）和 WGS84 椭球面高度确定的地位。
  3. HeadingPitchRoll : 在西南向上的框架中对于部分轴的旋转（弧度）。航向是围绕负 Z 轴的旋转。俯仰是围绕负 Y 轴的旋转。滚动是对于正 X 轴的旋转。
  4. Quaternion : 以 4D 坐标示意的 3D 旋转。

Camera 相机

Camera 是 Cesium 中罕用的 API，属于 viewer.scene 中的属性，用来管制以后可见的域。能够管制场景的察看视角，例如旋转、缩放、平移以及航行定位。

一些最罕用的办法如下：

  • Camera.setView(options): 在特定地位和方向立刻设置相机。
  • Camera.zoomIn(amount): 沿着视角矢量挪动摄像机。
  • Camera.zoomOut(amount): 沿视角矢量向后挪动摄像机。
  • Camera.flyTo(options): 创立从以后相机地位到新地位的动画相机航行。
  • Camera.lookAt(target, offset): 定位并定位摄像机以给定偏移量瞄准指标点。
  • Camera.move(direction, amount): 朝任何方向挪动摄像机。
  • Camera.rotate(axis, angle): 绕任意轴旋转相机。

例子参考上一大节的视窗定位。

Clock 时钟

应用 viewer 的 Clock 和 Timline 能够管制 scene 的工夫进度。

上面通过批改 init 函数实现一个日夜交替成果：

export default {
  name: "CesiumViewer",
  mounted() {
    // 初始化
    this.init();},
  methods: {
    // 初始化
    init() {
      let clock = new Cesium.Clock({startTime: Cesium.JulianDate.now(),
        currentTime: Cesium.JulianDate.now(),
        stopTime: Cesium.JulianDate.addDays(Cesium.JulianDate.now(), 1, new Cesium.JulianDate()),
        clockRange: Cesium.ClockRange.LOOP_STOP,
        clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
        multiplier: 9000,
        shouldAnimate: true
      });

      let viewerOption = {
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        infoBox: false,
        selectionIndicator: false,
        scene3DOnly: true,
        shadows: true,
        shouldAnimate: true,
        clockViewModel: new Cesium.ClockViewModel(clock)
      };

      // your token
      Cesium.Ion.defaultAccessToken = "token";

      this.$viewer = new Cesium.Viewer(this.$refs.viewer, viewerOption);

      // 暗藏 Logo
      this.$viewer.cesiumWidget.creditContainer.style.display = "none";

      this.$viewer.scene.globe.enableLighting = true;
    },
  }
}

通过定义 clock，设置起始工夫、速率和循环等配置，应用 clockViewModel 在实例中增加时钟视图模型，而后启用光照，实现成果。

注：此成果为演示，init 函数后续复原为开始的创立实例状态，不便之后的例子应用。

Entity 实体

Cesium 中的所有空间数据都应用 Entity API来示意。Entity API 以一种无效提供灵便的可视化的形式，以便对 Cesium 进行渲染。Cesium Entity 是能够与款式化图形示意配对并定位在空间和工夫上的数据对象。

在 Cesium 中，加载点线面矢量有两种形式：

  • Entity API 是数据驱动的一组高级对象，具备接口统一，容易应用的特点，但性能略低。
  • Primitive API 是面向三维图形开发，更为底层，具备灵便，性能高的特点，但应用简单。

其中，Entity API 的应用通过 viewer.entities.add() 办法增加矢量数据：

export default {
  name: "CesiumViewer",
  mounted() {
    // 初始化
    this.init();
    // 加载实体
    this.loadEntities();},
  methods: {
    // 初始化
    init() {...},
    loadEntities() {
        let polygon = this.$viewer.entities.add({
        name: "正方形",
        id: "square",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([
            -109.080842,
            45.002073,
            -105.91517,
            45.002073,
            -104.058488,
            44.996596,
            -104.053011,
            43.002989,
            -104.053011,
            41.003906,
            -105.728954,
            40.998429,
            -107.919731,
            41.003906,
            -109.04798,
            40.998429,
            -111.047063,
            40.998429,
            -111.047063,
            42.000709,
            -111.047063,
            44.476286,
            -111.05254,
            45.002073,
          ]),
          height: 0,
          material: Cesium.Color.RED.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.BLACK,
        },
      });

      this.$viewer.zoomTo(polygon);
      // polygon.show = false;
    }
  }
}

成果如下：

除了绘制实体，还能够通过内部加载的形式进行模型导入。

这里咱们在 static 文件夹下放入 J15.glb 文件进行导入：

export default {
  name: "CesiumViewer",
  mounted() {
    // 初始化
    this.init();
    // 增加模型
    this.addEntities();},
  methods: {
    // 初始化
    init() {...},
    addEntities() {
        let fighter = this.$viewer.entities.add({
        name: "fighter",
        id: "J15",
        model: {
          uri: "model3D/J15.glb",
          minimumPixelSize: 100,
          maximumScale: 1000,
        },
        position: Cesium.Cartesian3.fromDegrees(-110.345, 30, 70000),
      });
      // this.$viewer.trackedEntity = fighter;
      this.$viewer.zoomTo(fighter, new Cesium.HeadingPitchRange(-1, -0.3, 35));
    }
  }
}

正文完
javascript
发表至： javascript
2020-08-02
 0
动态规划练习题总
关于javascript:浅析JavaScript-Clone
关于javascript:Form-表单提交知识的总结全
react中bind函数传参问题