vue - cesium.js （1）：显示一个三维地图

蓝波丶坎迪
3,982 阅读3分钟

一、概述

写 leaflet.js 有点无聊啦，接下来的文章会开始介绍 Cesium.js 在 Vue-CLI 中的使用方法。首先对 Cesium.js 进行简单的介绍，因为我一直觉得再了解清楚其定义很重要，这可以帮助你弄清你可以是使用它完成哪些具体事务。

Cesium_Logo_Color

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

Cesium 的官方介绍也非常简单。Cesium 是一个快速、简单、端对端的平台，用于瓦片化，可视化和分析三维地理空间数据。至少记住这个几个关键信息。

二、开发环境搭建

这里只简单的介绍用我自己的环境，详细步骤请参考 leaflet.js 系统的第一篇文章中关于环境搭建的介绍 Vue-CLI and Leaflet (1)：显示一个地图 。

  1. nodejs 必须安装。参考官网

  2. Vue-CLI 标准工具 必须安装。参考官网

    npm install -g @vue/cli

  3. 创建 Vue-CLI 工程

    vue create cesium //(your project name)

  4. 在工程中安装 cesium.js

    npm install cesium --save

其他关于工程内部的组织请参考 Vue-CLI and Leaflet (1)：显示一个地图 。

ProjectTree

三、功能分析

这篇文章主要完成以下的功能：

  1. 成功加载 Cesium 地图视窗
  2. 解决实现在 Vue-CLI 中使用 Cesium 会遇到的问题
  3. 移除 Cesium 默认加载的控件，得到一个简单的地图视窗

由于这些功能几乎没有操作逻辑，因此这里只是将其罗列出来不再做其他多余的描述。不过开始动代码之前，必须要去 cesium 官网上注册获得一个 Token

CesiumTolen

四、代码

以上的准备工作做好之后，然在再逐一实现所有的功能点。代码实现的过程中尽可参考 官方教程，以及经常查阅官方的 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 并没有被成功引入。

cesium-error

这个问题的解决办法是在 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
    }
  }
};

配置好了之后，再次运行就成功啦。

Cesium_initial_1

2） 移除 Cesium 默认加载的控件

很多时候，要基于 cesium.js 做一些定制的系统,第一步就是移除掉 Cesium 默认的控件。那我们先来看看默认初始界面有哪些控件。

test_Cesium_initial_weight

这个时候查看官方API文档就非常有用啦。同时还有一点要清楚的就是上图中的所有控件都是在 Viewer 这个类中配置，查看官方文档找到 Viewer 类，如下：

cesium-api

然后在我们的页面 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>

运行, 就得到了一个干净的三维视窗啦。

Cesium_initial_2

五 、总结

这个系列的文章没有具体计划要做什么内容。想到什么就写什么吧。

然后，文章中提到的代码都将上传到了 github 可参考。

然后文章提到的解决Cesuim的方法参考了, 大约参考了以下文章：

juejin.cn/post/684490…

zhuanlan.zhihu.com/p/53638065

以后呢，还会参考这位作者的文章：

www.cnblogs.com/fuckgiser/p…

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

avatar
文章
阅读
粉丝