Cesium-01：Vue 中基础使用

一直有关注 Cesium ，不过没有进行实际行动。

昨天事情不多就想着展示一个示例看看。

一、Vue 集成

首先是安装 cesium 包（创建 Vue 项目已经完成集成上）：

npm install cesium

直接引入

import * as Cesium from 'cesium'

运行代码发现会报错：

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|       function getWorker(options = {}) {
>               return new Worker(new URL(workerData.scripts[0], import.meta.url), options);
|       }
|

经过查找，需要安装以下 webpack 插件并配置：

1、copy-webpack-plugin

　　用于把一些 Cesium 文件拷贝到打包目录下直接使用。

2、@open-wc/webpack-import-meta-loader（vue3 + vite 没有此问题）

　　cesium 中使用到了 import.meta ，webpack 对此需要 loader 进行预处理。

在 vue.config.js 中对应的配置（webpack.config.js 中配置可对应）：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: 'node_modules/cesium/Build/Cesium/Workers', to: 'Workers' },
          { from: 'node_modules/cesium/Build/Cesium/ThirdParty', to: 'ThirdParty' },
          { from: 'node_modules/cesium/Build/Cesium/Assets', to: 'Assets' },
          { from: 'node_modules/cesium/Build/Cesium/Widgets', to: 'Widgets' }
        ]
      }),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('')
      })
    ],
    module: {
      unknownContextCritical: false,
      rules: [
        {
          test: /.js$/,
          use: {
            loader: '@open-wc/webpack-import-meta-loader'
          }
        }
      ]
    }
  }
}

按照上面操作后，你以为打工告成（有一部分走运的成功！）。

注意：

copy-webpack-plugin 版本问题，如果太高版本（建议 6.0左右及以下），会报错：

compilation.getCache is not a function

如果有这个错误，卸载原先的 copy-webpack-plugin 安装较低版本

二、基础使用

准备工作就绪后，下面开始 Cesium 之旅。

下面是基本的代码

初始化 viewer、设置 hoemView、设置默认 view、设置在线地图等

<template>
  <div id="cesiumContainer" class="cesium-box" />
</template>

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

const googleMap = 'https://mt0.google.com/vt/lyrs=r&x={x}&y={y}&z={z}'
// const gaodeMap = 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'

export default {
  name: 'App',
  data() {
    return {
      cesiumViewer: null,
      homeView: null
    }
  },
  created() {
    this.homeView = {
      destination: Cesium.Cartesian3.fromDegrees(119.966746, 30.270928, 5000),
      orientation: {
        // 航向
        heading: Cesium.Math.toRadians(0),
        // 俯仰
        pitch: Cesium.Math.toRadians(-90),
        // 滚转
        roll: 0.0
      }
    }
  },
  mounted() {
    // this.cesiumViewer = new Cesium.Viewer('cesiumContainer')
    this.cesiumViewer = new Cesium.Viewer('cesiumContainer', {
      animation: false,
      timeline: false,
      // baseLayerPicker:false,
      imageryProvider: new Cesium.UrlTemplateImageryProvider({ url: googleMap })
    })

    // 初始化视角（飞行模式）
    this.cesiumViewer.camera.flyTo(this.homeView)
    // 初始化视角
    // this.cesiumViewer.camera.setView(this.homeView)

    // 重写 homeButton 事件
    this.cesiumViewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
      // 阻止事件继续传递
      e.cancel = true
      this.cesiumViewer.camera.flyTo(this.homeView)
    })
  }
}
</script>

这些是最基础的用法，后续继探索 Cesium。