第一章：搭建開(kāi)發(fā)環(huán)境

現(xiàn)有環(huán)境配置
vue2.6版本
vue/cli 4.5.14版本
node 14.16 版本

安裝cesium.js

yarn add cesium

搭建三維場(chǎng)景的html界面

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

構(gòu)建vue界面時(shí)引入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()
      });
       
    }
  }

這時(shí)開(kāi)始運(yùn)行yarn serve

出現(xiàn)第一個(gè)報(bào)錯(cuò)

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

報(bào)錯(cuò)原因：
Cesium無(wú)法自動(dòng)確定執(zhí)行的基本地址URL，需要自己定義一個(gè)名為 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('./')
      })
      ],
  },

出現(xiàn)第二個(gè)問(wèn)題

image.png

相關(guān)依賴未加載進(jìn)來(lái)

解決方案
需要安裝相關(guān)依賴
yarn add copy-webpack-plugin@6 --save-dev
因?yàn)槲覀僿ebpack用的4.0版本所以使用copy-webpack-plugin6.0版本，否則會(huì)出現(xiàn)版本不兼容。

不兼容報(bào)錯(cuò)情況如下

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('./')
      })
      ],
  },

解決了這些問(wèn)題基本上就構(gòu)建一個(gè)簡(jiǎn)單三維地圖
源碼

<!--
 * @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",
  // 組件狀態(tài)值
  data() {
    return {};
  },
  // 計(jì)算屬性
  computed: {},
  // 偵聽(tīng)器
  watch: {},

  created() {},

  mounted() {
    // this.initViewer();
    this.init();
  },
  // 組件方法
  methods: {
    // 地圖實(shí)例
    init() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmZDUyZDY3Ny0wYzA3LTQ5YjYtYmI3ZC02MjA0OTc1N2Q5NTciLCJpZCI6Nzk4ODgsImlhdCI6MTY0MjQ3MjUxOX0.gXGwm6DPITjRkzjdikD5dm4gPR1ZUKEP19hZewsDj54";

      // 實(shí)例化地圖
      /*
      用于構(gòu)建應(yīng)用程序的基本小部件。它將所有標(biāo)準(zhǔn)的 Cesium 小部件組合到一個(gè)可重用的包中。小部件總是可以通過(guò)使用 mixins 來(lái)擴(kuò)展，它添加了對(duì)各種應(yīng)用程序有用的功能。
      */
      const viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),
        baseLayerPicker: false, // 如果設(shè)置為false，將不會(huì)創(chuàng)建右上角圖層按鈕。
        fullscreenButton: false, // 如果設(shè)置為false，將不會(huì)創(chuàng)建右下角全屏按鈕。
        vrButton: false, // 如果設(shè)置為false，將不會(huì)創(chuàng)建VR應(yīng)用場(chǎng)景
        geocoder: true, // 如果設(shè)置為false，將不會(huì)創(chuàng)建右上角查詢(放大鏡)按鈕。
        homeButton: true, // 如果設(shè)置為false，將不會(huì)創(chuàng)建右上角主頁(yè)(房子)按鈕。
        infoBox: false, // 是否顯示點(diǎn)擊要素之后顯示的信息,cesium中的沙盒開(kāi)關(guān)
        sceneModePicker: false, // 如果設(shè)置為false，將不會(huì)創(chuàng)建右上角投影方式控件(顯示二三維切換按鈕)。
        selectionIndicator: true, // 獲取當(dāng)選定實(shí)體更改時(shí)引發(fā)的事件。
        navigationHelpButton: false, // 如果設(shè)置為false，則不會(huì)創(chuàng)建右上角幫助(問(wèn)號(hào))按鈕。
        navigationInstructionsInitiallyVisible: true, // 如果幫助說(shuō)明最初應(yīng)該是可見(jiàn)的，則為true；如果直到用戶明確單擊該按鈕，則不顯示該說(shuō)明，否則為false。
        timeline: false, // 如果設(shè)置為false，則不會(huì)創(chuàng)建正下方時(shí)間軸小部件。
        scene3DOnly: true, // 為 true 時(shí)，每個(gè)幾何實(shí)例將僅以3D渲染以節(jié)省GPU內(nèi)存。
        animation: false, // 如果設(shè)置為false，將不會(huì)創(chuàng)建左下角動(dòng)畫小部件。
        shouldAnimate: false, // 默認(rèn)true ，否則為 false 。此選項(xiàng)優(yōu)先于設(shè)置 Viewer＃clockViewModel 。
        // ps. Viewer＃clockViewModel 是用于控制當(dāng)前時(shí)間的時(shí)鐘視圖模型。我們這里用不到時(shí)鐘，就把shouldAnimate設(shè)為false
        sceneMode: 3, // 初始場(chǎng)景模式 1 2D模式 2 2D循環(huán)模式 3 3D模式  Cesium.SceneMode
        requestRenderMode: false, // 啟用請(qǐng)求渲染模式，不需要渲染，節(jié)約資源吧
        fullscreenElement: document.body, // 全屏?xí)r渲染的HTML元素 暫時(shí)沒(méi)發(fā)現(xiàn)用處，雖然我關(guān)閉了全屏按鈕，但是鍵盤按F11 瀏覽器也還是會(huì)進(jìn)入全屏
        // 配置地圖源
        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>

遇到的問(wèn)題：沙盒infobox報(bào)錯(cuò)

cesium Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
因?yàn)閕nfoBox是Ifram框架，H5的新安全機(jī)制不允許在其中執(zhí)行腳本，如果在里面寫了類似于點(diǎn)擊事件的腳本，則會(huì)提示如下錯(cuò)誤：Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

二、解決方法有兩個(gè)：

1.禁用infobox，自己設(shè)計(jì)信息面板。
2.設(shè)置沙箱的權(quán)限

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