Cesium 上手不完全指北

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 ()