vue+Cesium学习笔记——wsdchong - Go语言中文社区

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:Usersadmin>npm uninstall vue-cli -g
removed 238 packages in 8.843s

C:Usersadmin>npm install -g @vue/cli
省略
    
C:Usersadmin>vue --version
@vue/cli 4.5.3

第三步,初始化vue项目

步骤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。

第四步,安装elementUI

用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安装成功。

第五步,引入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。内容如下:

<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,运行项目

最终效果

在这里插入图片描述

环境搭建二(失败)

参考教程:cesium编程入门(二)环境搭建

第一步,安装node

已安装node;

第二步,cnpm设置

设置如下;

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

第三步,cesium安装

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

官网:下载地址

C:Usersadmin>npm install cesium
npm WARN saveError ENOENT: no such file or directory, open 'C:Usersadminpackage.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:Usersadminpackage.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: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的第一步。之后怎么用,以后再摸索。

更多内容请关注:CSDN掘金GitHubgitee

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_42875245/article/details/107962396
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2021-06-27 13:55:21
  • 阅读 ( 2078 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢