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…

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