vue - cesium.js （1）：顯示一個三維地圖

時間 2019-11-09

標籤 vue cesium.js cesium 顯示一個三維地圖欄目 JavaScript 简体版

原文原文鏈接

1、概述

寫 leaflet.js 有點無聊啦，接下來的文章會開始介紹 Cesium.js 在 Vue-CLI 中的使用方法。首先對 Cesium.js 進行簡單的介紹，由於我一直以爲再瞭解清楚其定義很重要，這能夠幫助你弄清你能夠是使用它完成哪些具體事務。javascript

Cesium is a fast, simple, end-to-end platform for tiling, visualizing, and analyzing 3D geospatial datacss

Cesium 的官方介紹也很是簡單。Cesium 是一個快速、簡單、端對端的平臺，用於瓦片化，可視化和分析三維地理空間數據。至少記住這個幾個關鍵信息。html

2、開發環境搭建

這裏只簡單的介紹用我本身的環境，詳細步驟請參考 leaflet.js 系統的第一篇文章中關於環境搭建的介紹 Vue-CLI and Leaflet (1)：顯示一個地圖。vue

nodejs 必須安裝。參考官網java
Vue-CLI 標準工具必須安裝。參考官網node
```
npm install -g @vue/cli
複製代碼
```

建立 Vue-CLI 工程webpack

vue create cesium //(your project name)
複製代碼

在工程中安裝 cesium.jsgit
```
npm install cesium --save
複製代碼
```

其餘關於工程內部的組織請參考 Vue-CLI and Leaflet (1)：顯示一個地圖。 github

3、功能分析

這篇文章主要完成如下的功能：web

成功加載 Cesium 地圖視窗
解決實如今 Vue-CLI 中使用 Cesium 會遇到的問題
移除 Cesium 默認加載的控件，獲得一個簡單的地圖視窗

因爲這些功能幾乎沒有操做邏輯，所以這裏只是將其羅列出來再也不作其餘多餘的描述。不過開始動代碼以前，必需要去 cesium 官網上註冊得到一個 Token

4、代碼

以上的準備工做作好以後，然在再逐一實現全部的功能點。代碼實現的過程當中儘可參考官方教程，以及常常查閱官方的 API文檔。

1）成功加載 Cesium 地圖視窗

先看一看，官方示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.59/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.59/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script> Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4YjA1ZWEzMy02YTgwLTRhNTAtYmQzMy05NzczMTA5MjgyYWIiLCJpZCI6MTA5ODAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTc4Mjg0MDR9.1tFNayl7pBJqJc3BxnC7j8uGW2k7srRFONLlbjJy6eM'; var viewer = new Cesium.Viewer('cesiumContainer'); </script>
</body>
</html>
複製代碼

實現過程是很是簡單的，引入 cesium.js 和其樣式文件，腳本中先配置好 Tokon，而後實例化一個cesium 視窗對象就完成了。

所以在咱們的工程中將採用一樣的思路。

首先我在把cesium的映入，和其餘相關方法都放在了工程中 map.js 中

// src\utils\map.js

// 引入 cesium
import Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";

// 配置 Token
const defaultAccessToken = "你本身的token";
Cesium.Ion.defaultAccessToken = defaultAccessToken;

let Viewer; // 這裏我將實例化的視窗對暫存，之後可能會用上，有可能不會 


/** 初始化 viewer * @param {string} divId viewer的容器ID * @param {object} opts 初始化viewer的默認配置 */

const initCesium = (divId, opts) => {
  CESIUM = new Cesium.Viewer(divId, opts);
  return CESIUM;
};

export default {
  Cesium,
  initCesium
};
複製代碼

而後在 View 文件夾中 Home.vue 調用初始化方法

<template>
  <div>
    <div class="home" id="home></div>
  </div>
</template>

<script>
export default {
  name: "home",
  components: {},
  data() {
    return {};
  },
  mounted() {
    this.$utils.map.initCesium("home");
  }
};
</script>

<style lang="less" scoped>
.home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: #eee;
}
</style>

複製代碼

而後運行 npm run serve。

你會發現地圖並無如期出現，而是報錯，提示 cesium.js 並無被成功引入。

這個問題的解決辦法是在 vue.config.js 中添加引入Cesium.js的配置

// vue.config.js

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

let cesiumSource = "./node_modules/cesium/Source";
let cesiumWorkers = "../Build/Cesium/Workers";

module.exports = {
  publicPath: "",
  devServer: {},
  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("./")
      })
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false
    }
  }
};

複製代碼

配置好了以後，再次運行就成功啦。

2）移除 Cesium 默認加載的控件

不少時候，要基於 cesium.js 作一些定製的系統,第一步就是移除掉 Cesium 默認的控件。那咱們先來看看默認初始界面有哪些控件。

這個時候查看官方API文檔就很是有用啦。同時還有一點要清楚的就是上圖中的全部控件都是在 Viewer 這個類中配置，查看官方文檔找到 Viewer 類，以下：

而後在咱們的頁面 Home.vue 中修改初始化 Viewer 默認配置：

// src\views\Home.vue

<template>
  <div>
    <div id="cesium-credit"></div>
    <div class="home" id="home"></div>
  </div>
</template>

<script>
export default {
  name: "home",
  components: {},
  data() {
    return {
      map: null,
      viewerOpts: {
        animation: false,
        timeline: false,
        geocoder: false,
        fullscreenButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        homeButton: false,
        baseLayerPicker: false,
        navigationInstructionsInitiallyVisible: false,
        creditContainer: "cesium-credit"
      }
    };
  },
  mounted() {
    this.map = this.$utils.map.initCesium("home", this.viewerOpts);
  }
};
</script>

<style lang="less" scoped>
.home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: #eee;
}
</style>

複製代碼

須要特別說明一下 creditContainer 空間就是 cesium 的標誌，配置的值，是一個容器的Id,我這裏只是將其指定爲隱藏於地圖視窗下的div。

// src\views\Home.vue

<template>
  <div>
    <div id="cesium-credit"></div>
    <div class="home" id="home"></div>
  </div>
</template>

複製代碼

運行, 就獲得了一個乾淨的三維視窗啦。

五、總結

這個系列的文章沒有具體計劃要作什麼內容。想到什麼就寫什麼吧。

而後，文章中提到的代碼都將上傳到了 github 可參考。

而後文章提到的解決Cesuim的方法參考了, 大約參考瞭如下文章：

juejin.im/post/5c8226…

zhuanlan.zhihu.com/p/53638065

之後呢，還會參考這位做者的文章：

www.cnblogs.com/fuckgiser/p…

站在了巨人的肩膀上，謝謝啦。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。