vue2+cesium初始开发环境配置及项目搭建（vue-cli2 + vue-cli3）

x趋向于0的极限

已于 2022-06-17 12:55:05 修改

阅读量4.2k

点赞数 13

分类专栏： cesium vue2 文章标签： npm 前端 vue javascript

于 2022-03-09 03:54:38 首次发布

本文链接：https://blog.csdn.net/qq_38271278/article/details/123366430

版权

vue2 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

cesium

1 篇文章 1 订阅

订阅专栏

vue2+cesium初始开发环境配置及项目搭建（vue-cli2 + vue-cli3）

**
（注意事项：文章标点符号及路径里的符号，实际展示与编辑时的效果不太一样，如果复制本文中的内容，建议核对一下标点符号、路径里的符号等）
2022.5.22更新内容：vue-cli2相关webpack配置文件为webpack.base.conf.js，vue-cli3相关webpack配置文件为vue.config.js，从第10点开始补充vue-cli3相关webpack配置信息等
2022.6.17更新内容：
1、之前标点符号粘贴到文档里错误的问题，现在已经更改，如果出现报错，只要核对下文中的内容是否粘贴进去即可；
2、另外本文中第一部分vue-cli2创建的vue2项目是将cesium、widget放在Vue.prototype里，而第二部分vue-cli3创建的vue2项目是将cesium、widget连带着viewer放在了window里，此处建议是放在window里，性能上可能快很多，可以试一下。另外如果走数据服务的点位数据量比较大，也建议将定义的接收数据的变量也放在window里而不是vue的data里（几十条点位数据就算了，体现不出来性能差距）

一：vue-cli2 vue项目webpack配置
1、首先本地安装环境node和vue-cli，由于之前已安装过，此处省略（网上很多安装教程，node可以官网下载，也可以用nvm安装管理对应的node版本）。
此处用cmd查看了当前本地的开发环境，如下图：
在这里插入图片描述
2、使用vue-cli脚手架创建Webpack模板项目
使用vue init webpack vue-cesium创建
其中vue-cesium 是项目名称，自己可以随意命名；
之后是一系列项目的配置，按个人需要选择就好（一般配置为no，除vue-router可根据需要配置为yes）
接着npm将会自动安装下载模板和许多依赖项；
等到下载完毕后， cd到你创建的项目文件中，输入npm run dev；
正常情况下在浏览器输入http://localhost:8080 就可以看到vue的界面了。
（此处vue版本为2.5.2）
详细操作参照下方两张图：
在这里插入图片描述

在浏览器中输入http://localhost:8080,可看到当前vue项目已新建成功：

3、npm安装Cesium 环境（cesium的配置步骤）
在vue-cesium文件路径中运行cmd命令，输入以下命令将cesium作为项目依赖项
npm install cesium@1.74.0 --save
在这里插入图片描述
当cesium下载完毕后，再进行下面的文件配置工作
（1）配置webpack.base.conf.js文件
进入build 文件夹，编辑webpack.base.conf.js
1.1、定义 Cesium 源码路径

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

1.2、在output 里加入以下内容，让webpack 正确处理多行字符串配置 amd参数

sourcePrefix: ''

1.3、module.exports中添加以下内容

amd: {
    toUrlUndefined: true
},

1.4、在resolve 中设置别名 cesium，定义别名cesium后，cesium代表了cesiumSource的文件路径，内容如下

'cesium': path.resolve(__dirname, cesiumSource)

1.5、在module 中加入以下内容, 让webpack 打印载入特定库时候警告

unknownContextCritical: false

以上配置webpack.base.conf.js文件代码，如下图截图所示：
在这里插入图片描述
（2）配置 webpack.dev.conf.js 文件
进入build文件夹，编辑 webpack.dev.conf.js文件
2.1、定义 Cesium 源码路径（注意事项：这里的 node_modules 与webpack.base.conf.js的不同，前面没有…/ ）

const cesiumSource = 'node_modules/cesium/Source'

2.2、定义 Cesium Workers 路径，内容如下

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

2.3、在plugin中加入下面插件,拷贝静态资源，内容如下

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' } ]),

2.4、new webpack.DefinePlugin中添加以下内容

'CESIUM_BASE_URL': JSON.stringify('/')

以上配置webpack.dev.conf.js文件代码，如下图截图所示：
在这里插入图片描述

（3）配置 webpack.prod.conf.js 文件
进入build文件夹，编辑 webpack.prod.conf.js文件
3.1、定义 Cesium 源码路径（注意这里的 node_modules 与webpack.base.conf.js的不同，前面没有…/ ）

const cesiumSource = 'node_modules/cesium/Source'

3.2、定义 Cesium Workers 路径

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

3.3、在plugin中加入下面插件,拷贝静态资源

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' } ]),

3.4、new webpack.DefinePlugin中加入以下内容（拷贝静态资源注意这里的CESIUM_BASE_URL: JSON.stringify(’./’)与webpack.dev.conf.js中的配置不同）

//2022-6-17备注：如果报错，可试一下此处./改为/
'CESIUM_BASE_URL': JSON.stringify('./')

配置webpack.prod.conf.js文件代码，如下图截图所示：
在这里插入图片描述

（4）配置config/index.js文件
进入config 文件夹，配置index.js文件，这里有 dev 、build 两个配置项
4.1、dev下的配置，内容如下

assetsPublicPath: '/',

4.2、build下的配置，内容如下

assetsPublicPath: '',

配置config下的index.js文件代码，如下图截图所示：
在这里插入图片描述
（5）修改 src 下的 main.js：
全局引用cesium和widget，分别注册全局变量
（据了解，此处cesium1.61版本和1.74版本引用方式不同，以下方法为1.74版本cesium引入vue2注册全局变量的方法）

//1.74版本引入方式
import * as Cesium from 'cesium/Cesium'
import * as widget from "cesium/Widgets/widgets.css";
Vue.prototype.Cesium = Cesium
Vue.prototype.widget = widget

配置src下的main.js文件代码，如下图截图所示：
在这里插入图片描述

到此，webpack的相关设置完毕，现在我们可以创建vue组件进行cesium的开发工作了。
4、创建cesiumDemo组件
在components文件夹中创建cesiumDemo.vue组件，内容如下

<template>
    <div style="height:100%;">
        <div id="cesiumContainer" style="height:100%"></div>
    </div>
</template>

<script>
export default {
    name: 'cesiumDemo',
    data(){
        return {
            viewer:null,
        }
    },
    created(){

    },
    mounted(){
        this.viewer = new this.Cesium.Viewer('cesiumContainer');
    },
}
</script>

<style>

</style>

5、修改src/router下的index.js 文件

import cesiumDemo from '@/components/cesiumDemo'

{
  path: '/',
  name: 'cesiumDemo',
  component: cesiumDemo
},

自带的HelloWorld模块这里也修改了path名称
如下图所示：

在这里插入图片描述
6、修改 src 下的 App.vue 文件：
（包括样式的调整）
删除 img 标签
#app下删除样式margin-top: 60px;添加样式height:100%;
添加样式

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei";
  overflow: hidden;
}

src下的App.vue文件修改，如下图截图所示：
在这里插入图片描述
7、此时输入npm run dev，运行项目，页面会报错，
cesium 报错{“code”:“InvalidCredentials”,“message”:“Invalid access token”}
经查询是token未配置

8、申请cesium开发用的token
申请地址 https://cesium.com/ion/tokens
在这里插入图片描述
账号密码自行注册，注册好后登录，进入以下界面，

点击create token，输入名称新建完成后，会自动分配一个token，将此处的token复制到代码中。
也就是在cesiumDemo.vue中加上

this.Cesium.Ion.defaultAccessToken='你的token';

配置文件代码，如下图截图所示：
在这里插入图片描述
9、此时输入npm run dev,再次运行项目，项目正常运行

二：vue-cli3 vue项目webpack配置
注意事项1：vue-cli3 vue项目的创建此处省略；
注意事项2：vue-cli3项目创建时默认可能无vue.config.js文件，直接新建文件即可，具体可百度查看
10、安装cesium
npm install cesium@1.92.0 --save
11、配置vue.config.js文件

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

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

output: {
  sourcePrefix: ' '
},
amd: {
    toUrlUndefined: true
},

// cesium
'cesium': path.resolve(__dirname, cesiumSource)

// cesium
new CopyPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers'}]),
new CopyPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets'}]),
new CopyPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets'}]),
new CopyPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers'}]),
new webpack.DefinePlugin({
    // CESIUM_BASE_URL: JSON.stringify('./')
    // CESIUM_BASE_URL: JSON.stringify('/')
    CESIUM_BASE_URL: JSON.stringify(process.env.VUE_APP_WEB + "/")
})

配置vue.config.js文件代码，如下图截图所示：
在这里插入图片描述

12、main.js下全局引用Cesium
注意事项：此处引用Cesium后赋值给window，据说速度相对较快，另外如果有大批量数据，也需要定一个变量给window（如果大批量数据放在vue的data里，因为vue的加载机制，速度会很慢）

// cesium
import * as Cesium from 'cesium/Cesium'
import * as widget from "cesium/Widgets/widgets.css";

window.Cesium = Cesium
window.widget = widget
window.viewer = null

配置main.js文件代码，如下图截图所示：
在这里插入图片描述
12、使用（此处新建省略部分内容，详情可参考上方的4、5、6、7、8、9小点，下方需要换token）

<template>
    <div style="height:100%">
        <div id="cesiumContainer"></div>
    </div>
</template>

<script>
export default {
    name: "",
    components: {
        
    },
    data() {
        return {
            
        }
    },
    created() {

    },
    mounted() {
        Cesium.Ion.defaultAccessToken = '你的token';
        viewer = new Cesium.Viewer('cesiumContainer',{
            geocoder: false,                //是否显示地名查找控件
            sceneModePicker: false,         //是否显示投影方式控件
            navigationHelpButton: false,    //是否显示帮助信息控件
            baseLayerPicker: false,         //是否显示图层选择控件
            homeButton: false,              //是否显示Home按钮
            fullscreenButton: false,        //是否显示全屏按钮    
            timeline:false,                 //时间轴控件 
            animation:true,                //动画控件 
            shouldAnimate : true,
            infoBox: false,//初始化不弹出弹出框
            selectionIndicator: false,//初始化不选中
            baseLayerPicker: false,
        });

        viewer.scene.globe.depthTestAgainstTerrain = false; //开启深度检测
        viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印 或 css

    },
}
</script>

<style lang="scss" scoped>
    #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
</style>