Vue中集成Cesium

1.Cesium是什么？

Cesium是一个地图可视化框架，只是支持三维场景[渲染三维地球]

Cesium中的图层分为两种：一种是普通图层，包含影像、线划等普通显示图层；还有一种是地形图层，用于真实的模拟地球表面的场景，Cesium会根据加载到的地形瓦片以三维的方式显示出山川、大海等。

2.Vue中集成Cesium？

2.1为什么要配置webpack？

使用npm i cesium安装后并不能直接打包编译该库

原因：该库比较复杂，使用AMD(define定义模块，reqiured引入模块)规范，并且其依赖也是使用的AMD，而且代码中包含多行字符串，不能直接编译，需要配置webpack

2.2配置webpack

使用的是vue-cli3脚手架搭建项目

1，下载npm install --save-dev cesium

2，在配置文件vue.config.js上面从node_modules中引入下载的资源

const cesiumSource = './node_modules/cesium/Source';

const cesiumWorkers = '../Build/Cesium/Workers';

3，在webpack的t属性下添加如下配置，解决webpack编译Cesium的问题

添加下类三个配置：

output下的sourcePrefix:' ':因为某些版本的webpack默认在输出时在每行之前添加\ t制表符。Cesium具有多行字符串的实例，因此我们需要使用空前缀''覆盖此默认值。

amd.toUrlUndefined: true :Cesium源码模块化使用的requireJs，这个配置可以是webpack打包cesium

node.fs:'empty' :解决了fs模块的一些第三方用法，该模块的目标是在Node环境而不是浏览器中使用。

3，配置别名：我们添加一个cesium别名，以便我们在项目中轻松的引入它

4，管理Cesium的静态文件

我们将使用copy-webpack-plugin插件，将构建过程的一部分Cesium中包含的静态文件复制到我们的dist目录中，以便可以提供它们。

！安装

！！在配置文件的上面引入  vue.config.js

!!!配置webpack的plugins属性：

！！！使用webpack的内置插件DefinePlugin告诉Cesium加载静态文件的基本url

因此plugins为：

5，在组件中使用

在mian.js中引入样式：

在需要用到Cesium的组件中引入（比如新建的cesium.vue组件）

定义显示3d图形的容器

在js代码中创建Cesium的实例：

通过路由访问该组件或者引该组件作为别的组件的子组件，加载并设置Cesium容器的宽度和高度

通过上面的基本配置就可以显示基本的Cesium