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