学习 Cesium (二)：HelloWorld_cesium helloworld-优快云博客

本文链接：https://blog.youkuaiyun.com/leoothello/article/details/113731348

学习 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>