三维技术探索-Cesium.js学习

第一章：搭建开发环境

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

安装cesium.js

yarn add cesium

搭建三维场景的html界面

构建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文件中加入

方案二、在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('./')
      })
      ],
  },

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

遇到的问题：沙盒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');