第一章：搭建开发环境

现有环境配置
vue2.6版本
vue/cli 4.5.14版本
node 14.16 版本

安装cesium.js

yarn add cesium

搭建三维场景的html界面

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

构建vue界面时引入cesium

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

引入基本三维地球球体

 mounted() {
    this.init();
  },
  // 组件方法
  methods: {
    init() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmZDUyZDY3Ny0wYzA3LTQ5YjYtYmI3ZC02MjA0OTc1N2Q5NTciLCJpZCI6Nzk4ODgsImlhdCI6MTY0MjQ3MjUxOX0.gXGwm6DPITjRkzjdikD5dm4gPR1ZUKEP19hZewsDj54";

      // 使用“cesiumContainer”ID 在 HTML 元素中初始化 Cesium 查看器。
      const viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain()
      });
       
    }
  }

这时开始运行yarn serve

出现第一个报错

DeveloperError: Unable to determine Cesium base URL automatically, try defining a global variable called CESIUM_BASE_URL. Error

报错原因：
Cesium无法自动确定执行的基本地址URL，需要自己定义一个名为 CESIUM_BASE_URL 的全局变量，即Cesium的渲染地址
解决方案：
方案一、在index.html文件中加入
<script> window.CESIUM_BASE_URL = 'https://localhost:5000/'; </script>
方案二、在vue.config.js中加入

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

configureWebpack: {
     plugins: [
      new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify('./')
      })
      ],
  },

出现第二个问题

image.png

相关依赖未加载进来

解决方案
需要安装相关依赖
yarn add copy-webpack-plugin@6 --save-dev
因为我们webpack用的4.0版本所以使用copy-webpack-plugin6.0版本，否则会出现版本不兼容。

不兼容报错情况如下

TypeError: compilation.getCache is not a function

 configureWebpack: {
     plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: Path.resolve('./node_modules/cesium/Source/Workers'), to: 'Workers' },
          { from: Path.resolve('./node_modules/cesium/Source/Assets'), to: 'Assets' },
          { from: Path.resolve('./node_modules/cesium/Source/Widgets'), to: 'Widgets' },
          { from: Path.resolve('./node_modules/cesium/Source/ThirdParty/Workers'), to: 'WoThirdParty/Workersrkers' },
        ]
      }),
      new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify('./')
      })
      ],
  },

解决了这些问题基本上就构建一个简单三维地图
源码

<!--
 * @Author: 何元鹏
 * @Date: 2022-02-16 11:29:42
 * @LastEditors: 何元鹏
 * @LastEditTime: 2022-02-17 15:46:14
-->
<template>
  <div class="container" id="cesiumContainer"></div>
</template>

<script>
window.CESIUM_BASE_URL = "/";

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

export default {
  // 组件名称
  name: "CesiumDemo",
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},

  created() {},

  mounted() {
    // this.initViewer();
    this.init();
  },
  // 组件方法
  methods: {
    // 地图实例
    init() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmZDUyZDY3Ny0wYzA3LTQ5YjYtYmI3ZC02MjA0OTc1N2Q5NTciLCJpZCI6Nzk4ODgsImlhdCI6MTY0MjQ3MjUxOX0.gXGwm6DPITjRkzjdikD5dm4gPR1ZUKEP19hZewsDj54";

      // 实例化地图
      /*
      用于构建应用程序的基本小部件。它将所有标准的 Cesium 小部件组合到一个可重用的包中。小部件总是可以通过使用 mixins 来扩展，它添加了对各种应用程序有用的功能。
      */
      const viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),
        baseLayerPicker: false, // 如果设置为false，将不会创建右上角图层按钮。
        fullscreenButton: false, // 如果设置为false，将不会创建右下角全屏按钮。
        vrButton: false, // 如果设置为false，将不会创建VR应用场景
        geocoder: true, // 如果设置为false，将不会创建右上角查询(放大镜)按钮。
        homeButton: true, // 如果设置为false，将不会创建右上角主页(房子)按钮。
        infoBox: false, // 是否显示点击要素之后显示的信息,cesium中的沙盒开关
        sceneModePicker: false, // 如果设置为false，将不会创建右上角投影方式控件(显示二三维切换按钮)。
        selectionIndicator: true, // 获取当选定实体更改时引发的事件。
        navigationHelpButton: false, // 如果设置为false，则不会创建右上角帮助(问号)按钮。
        navigationInstructionsInitiallyVisible: true, // 如果帮助说明最初应该是可见的，则为true；如果直到用户明确单击该按钮，则不显示该说明，否则为false。
        timeline: false, // 如果设置为false，则不会创建正下方时间轴小部件。
        scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存。
        animation: false, // 如果设置为false，将不会创建左下角动画小部件。
        shouldAnimate: false, // 默认true ，否则为 false 。此选项优先于设置 Viewer＃clockViewModel 。
        // ps. Viewer＃clockViewModel 是用于控制当前时间的时钟视图模型。我们这里用不到时钟，就把shouldAnimate设为false
        sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        requestRenderMode: false, // 启用请求渲染模式，不需要渲染，节约资源吧
        fullscreenElement: document.body, // 全屏时渲染的HTML元素 暂时没发现用处，虽然我关闭了全屏按钮，但是键盘按F11 浏览器也还是会进入全屏
        // 配置地图源
        imageryProvider: new Cesium.createWorldImagery({
          url:
            "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
        })
      });
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

遇到的问题：沙盒infobox报错

cesium Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
因为infoBox是Ifram框架，H5的新安全机制不允许在其中执行脚本，如果在里面写了类似于点击事件的脚本，则会提示如下错误：Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

二、解决方法有两个：

1.禁用infobox，自己设计信息面板。
2.设置沙箱的权限

iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');