目录
学习 Cesium (二):HelloWorld
访问 Cesium 官方网站申请一个 Access Token
官网地址:https://cesium.com
进入后,注册一个账户,然后创建一个新的 Token,复制这个 Token 的值,后面会用到。
创建项目
- 运行 Node.js command prompt.exe,输入命令创建HelloWorld项目目录。
> vue create hello_world
-
在配置选择中,选择 Manually select features 手动选择。
-
按键盘上下键移动,空格键选择,回车确定。依次选中 Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter。
-
之后的选择随意。
安装依赖
- 进入项目目录
> cd hello_world
- 安装 Cesium 依赖
> cnpm install cesium
配置 vue.config.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 = {
// 基本路径 3.6之前的版本时 baseUrl
publicPath: "./",
// 输出文件目录
outputDir: "dist",
// eslint-loader 是否在保存的时候检查
lintOnSave: false,
// webpack-dev-server 相关配置
devServer: {
open: process.platform === "darwin",
host: "0.0.0.0",
port: 8080,
https: false,
hotOnly: false
},
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
}
}
};
配置 main.js
在 src 目录下打开 main.js 文件,修改如下
import Vue from 'vue'
import App from './App.vue'
import router from "./router";
import store from "./store";
Vue.config.productionTip = false
//引入cesium相关文件
var cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');
Vue.prototype.cesium = cesium
Vue.prototype.widgets = widgets
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
修改 App.vue
在 src 目录下打开 App.vue 文件,修改 template 标签内容如下
<template>
<div id="app">
<!--<img alt="Vue logo" src="./assets/logo.png">-->
<!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
<HelloWorld />
</div>
</template>
修改 HelloWorld.vue
在 src/components 目录下,打开 HelloWorld.vue 文件,修改如下
<template>
<div class="hello">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted:function(){
let Cesium = this.cesium;
// 默认的token,更新为之前申请的token值。
Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTQzNmUxZi00YTkyLTQwOTAtYjU5Yy01MmYxZTkyMWM2NmIiLCJpZCI6NDM0MDIsImlhdCI6MTYxMjU0OTM2MX0.A0mMDGAffRQWlx5hVPCPD9958NX9XaEO9ieVQo3sws0';
let viewer = new Cesium.Viewer("cesiumContainer");
var imageryLayer = viewer.imageryLayers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3845 }) // 使用 Blue Marble Next Generation July, 2004 的图像
);
viewer.zoomTo(imageryLayer).otherwise(function (error) {
console.log(error);
});
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
运行服务
> npm run serve
根据提示,打开浏览器,访问 localhost:8080,
如果没有看到地球,点击右上角五个小按钮左数第4个按钮,选择 Blue Marble 影像数据就可以看到地球了。
参考列表
- https://blog.csdn.net/weixin_41940497/article/details/107904575