vue+Cesium学习笔记——wsdchong

Cesium学习笔记

前言

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

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

gittee上例子的地址

cesium的介绍我就不赘述了，我也刚了解，下面是我学习过程中参考的教程。

cesium官网

cesium官方文档：优点是官方的，权威；缺点是阅读起来有些吃力。

cesium中文网：优点是系统；缺点大部分是2018年写的，没有更新；此外没有和vue整合的教程。

vue cli4搭建cesium环境：优点是最新的，例子简单。缺点是不过系统，但是够用。

我主要用到的是第三个和第四个。

环境搭建一（成功）

参考教程：vue cli4搭建cesium环境

跟着教程来。

第一步，安装node

已安装。

第二步，安装vue cli

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

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

npm使用时报npm ERR! code E405npm ERR! 405 Method Not Allowed

我这次安装没碰到上面这个问题。

C:\Users\admin>npm uninstall vue-cli -g
removed 238 packages in 8.843s

C:\Users\admin>npm install -g @vue/cli
省略
    
C:\Users\admin>vue --version
@vue/cli 4.5.3

第三步，初始化vue项目

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

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

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

C:\Users\admin>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:\Users\admin\.vuerc    

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

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

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

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

E:\work>cd project-one

E:\work\project-one>npm run serve
npm ERR! missing script: serve

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\admin\AppData\Roaming\npm-cache\_logs\2020-08-12T01_45_06_602Z-debug.log

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

C:\Users\admin>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:\work\project-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。

第四步，安装elementUI

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

报错

Vue 无法加载文件 X:\Xxx\XXX\vue.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安装成功。

第五步，引入cesium库

步骤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。内容如下：

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

步骤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，运行项目

最终效果

环境搭建二（失败）

参考教程：cesium编程入门（二）环境搭建

第一步，安装node

已安装node；

第二步，cnpm设置

设置如下；

C:\Users\admin>node -v
v12.18.0

C:\Users\admin>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:\Users\admin\AppData\Roaming\npm\cnpm -> C:\Users\admin\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
updated 129 packages in 81.525s

C:\Users\admin>cnpm -v
cnpm@6.1.1 (C:\Users\admin\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.7 (C:\Users\admin\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.18.0 (C:\Program Files\nodejs\node.exe)
npminstall@3.27.0 (C:\Users\admin\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\admin\AppData\Roaming\npm
win32 x64 10.0.18363
registry=https://r.npm.taobao.org

第三步，cesium安装

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

官网：下载地址

C:\Users\admin>npm install cesium
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\admin\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\admin\package.json'
npm WARN admin No description
npm WARN admin No repository field.
npm WARN admin No README data
npm WARN admin No license field.

+ cesium@1.72.0
added 1 package from 2 contributors and audited 1 package in 4.997s
found 0 vulnerabilities

第四步，node server.js

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

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

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

总结

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

更多内容请关注：CSDN、掘金、GitHub、gitee