Cesium学习笔记

由于工作过程中需要用到cesium，于是学习一下，记录一下学习笔记。

gitee上写了一下这个例子，后期如果在cesium上深入的话，会补充cesium的其他例子。

已安装。

把我之前的vue cli卸载，重装最新版本的vue cli。

如果报错的话，可以看是不是这个原因。

步骤1，进入一个目录，开始创建。输入vue create project-one；

步骤2，选择手动配置“Manually select features”，点enter；

步骤3，配置配置项。箭头↑↓进行选择，按空格键选中或取消；

C:Usersadmin>cd..
C:Users>cd..
C:>E:
E:>cd work

E:work>vue --version
@vue/cli 4.5.3

E:work>vue create project-one
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes


Vue CLI v4.5.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ( ) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
>(*) Unit Testing
 ( ) E2E Testing 

步骤4，不选择history router。

步骤5，选择Sass/SCSS(withdart-sass)

步骤6，选择ESLint+Prettier

步骤7，选择Lint on save

步骤8，选择Jest

步骤9，选择In package.json

步骤10，按Y，输入名字cesiumtest

Vue CLI v4.5.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: cesiumtest
    
�  Preset cesiumtest saved in C:Usersadmin.vuerc    

出现了一个小问题，我好像不知道按了哪，出现了下面这个。我选择no

Vue CLI v4.5.3
✨  Creating project in E:workproject-one.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

终止批处理操作吗(Y/N)? n 
E:work>  

我想我大概是选择错了，得重新来一遍。

E:work>cd project-one

E:workproject-one>npm run serve
npm ERR! missing script: serve

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersadminAppDataRoamingnpm-cache_logs2020-08-12T01_45_06_602Z-debug.log

于是删掉project-one的文件，重新按上面过程走第二遍。

C:Usersadmin>cd c:
c:>E:
E:>cd work

E:work>vue create project-one

Vue CLI v4.5.3
? Please pick a preset: cesiumtest ([Vue 2] dart-sass, babel, router, vuex, eslint, unit-jest)

Vue CLI v4.5.3
✨  Creating project in E:workproject-one.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

省略

�  Successfully created project project-one.
�  Get started with the following commands:

 $ cd project-one
 $ npm run serve

步骤11，cd到根目录下，npm run serve。

用vscode打开项目，在终端运行npm run serve.

报错

Vue 无法加载文件 X:XxxXXXvue.ps1，因为在此系统上禁止运行脚本。

解决方法

1以管理员身份打开powershell；

2输入 set-ExecutionPolicy RemoteSigned

3选择Y或A；

步骤1，在vscode的终端，运行vue add element；

步骤2，选择Fully import。（下一个scss点enter会变成no，要选Y。）

步骤3，选择zh-CN

步骤4，npm run serve

页面会多出一个el-button，表示element-ui安装成功。

步骤1，打开cmd，进入项目的文件夹，输入npm install cesium -s

步骤2，修改main.js文件

var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');

Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

步骤3，在项目文件夹下新建文件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: 5000,
    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
    }
  }
};

步骤4，在view文件夹新建组件CesiumScene.vue。内容如下：

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>

export default {
  name: 'cesiumPage',
  data () {
    return {
    }
  },
  mounted(){
    var Cesium = this.Cesium;
    var cesiumContainer = document.getElementById("cesiumContainer");
    var viewer = new Cesium.Viewer("cesiumContainer",{
      //加载在线谷歌地图
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
         url:"http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}"
      })
    })
      //去除 版权图标
      viewer._cesiumWidget._creditContainer.style.display="none";
  }
}
</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;
}
.box {
  height: 100%;
} 
</style>

步骤5，修改App.vue，内容如下：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
html,
body,
#app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  color: #000;
  overflow: hidden;
}
</style>

步骤6，修改路由如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import CesiumScene from '../views/CesiumScene.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'scene',
    component: CesiumScene
  }
]

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

步骤7，运行项目

已安装node；

设置如下；

C:Usersadmin>node -v
v12.18.0

C:Usersadmin>npm install -g cnpm --registry.npm.taobao.org
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:UsersadminAppDataRoamingnpmcnpm -> C:UsersadminAppDataRoamingnpmnode_modulescnpmbincnpm
+ cnpm@6.1.1
updated 129 packages in 81.525s

C:Usersadmin>cnpm -v
cnpm@6.1.1 (C:UsersadminAppDataRoamingnpmnode_modulescnpmlibparse_argv.js)
npm@6.14.7 (C:UsersadminAppDataRoamingnpmnode_modulescnpmnode_modulesnpmlibnpm.js)
node@12.18.0 (C:Program Filesnodejsnode.exe)
npminstall@3.27.0 (C:UsersadminAppDataRoamingnpmnode_modulescnpmnode_modulesnpminstalllibindex.js)
prefix=C:UsersadminAppDataRoamingnpm
win32 x64 10.0.18363
registry=https://r.npm.taobao.org

我看文章是2018年3月29日写的，感觉都2020年了，npm应该可以直接安装cesium。打开官网下载，果然可以。还蛮快的，只需要三四秒。

根据教程，输入node server.js。结果丢出错误。

C:Usersadmin>node server.js
internal/modules/cjs/loader.js:969
  throw err;
  ^

Error: Cannot find module 'C:Usersadminserver.js'
[90m    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)[39m
[90m    at Function.Module._load (internal/modules/cjs/loader.js:842:27)[39m
[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)[39m
[90m    at internal/main/run_main_module.js:17:47[39m {
  code: [32m'MODULE_NOT_FOUND'[39m,
  requireStack: []
}

cesium.js的第一步。之后怎么用，以后再摸索。