devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue+Cesium创建项目并加载地图全过程

作者：花生_TL007 | 2024-02-18 19:11:54

赞

踩

vue+cesium

目录

一.创建vue项目准备工作

1.执行创建项目命令

2.项目名称 

3.项目说明

 4.作者描述

5. 编译方式

6.是否安装vue路由 

7.是否使用ESLine

8.选择预设的ESLine规则

9.设置单元测试

10.设置e2e

 11.选择安装方式

12.项目创建及依赖自动安装

13.运行项目 

14.停止项目

二.cesium 安装配置

1.安装Cesium环境

2.Webpack配置

build/webpack.base.conf.js

build/webpack.dev.conf.js

build/webpack.prod.conf.js

3. 创建cesium测试组件

三.补充对npm run dev 运行错误处理

四.框架源码

一.创建vue项目准备工作

注释：使用vue-cli脚手架的版本是2.9.6

git 的下载及安装，用于管理源代码

node.js 尽量用低一点的版本（此处用的node.js版本是v12.14），尽可能不要是哟过高版本；

以上大家自行下载安装，我不在赘述；接下来我们开始创建项目

1.执行创建项目命令

前提是已安装node.js 按住win+r进入运行输入 cmd 以管理员打开命令运行页面如下图

 检查node.js和vue版本，如下图

 安装全局vue-cli

npm install vue-cli -g

通过cd 命令进入要创建项目的目录并下执行指令,创建的项目将存放到该目录中，执行创建项目命令，项目名称可以带引号“test” 如下图

vue init webpack test

2.项目名称 

如默认test为项目名称，回车继续，否则输入需要创建的项目名称，不支持中文和大写；

? Project name (test)   

3.项目说明

可以对该项目做一下简要说明，默认直接回车下一步

? Project description (A Vue.js project)

 4.作者描述

默认是vue中配置的作者信息，默认直接回车下一步

? Author (…….@126.com>)

5. 编译方式

vue的编译方式用户使用上下键选择,回车键确定，默认直接回车即可

? Vue build (User arrow keys)
>  Runtime + Compiler: recommended for most users
   Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files -render functions are required elsewhere

  对以上做一下翻译：

Vue 编译方式?(用户使用上下键选择,回车键确定)

> 运行时+编译器：建议大多数用户使用

仅运行时：比min+gzip轻约6KB，但模板（或任何特定于Vue的HTML）只允许在.vue文件中使用-其他地方需要呈现函数

6.是否安装vue路由 

默认安装路由，输入 Y 并回车继续

? Install vue-router? (Y/n)

7.是否使用ESLine

使用ESLine来约束代码书写风格 ，ESLine是一个检查语法规范的工具，输入 Y 并继续

? Use ESLint to lint your code?(Y/n)

8.选择预设的ESLine规则

选择默认的标准规范，并回车继续

? Pick an ESLint preset (User arrow keys)
>  Standard (https://github.com/standard/standard)
   Airbnb (https://github.com/airbnb/javascript)
   none (configure it yourself)

9.设置单元测试

测试单元默认不创建，输入n 并回车继续；

如需创建测试单元，输入 Y 并回车继续，下一步默认 jest 回车继续

? Set up unit tests (Y/n)

10.设置e2e

使用Nightwatch框架设置e2e测试，默认输入n 并回车继续

? Setup e2e tests with Nightwatch?(Y/n)

 11.选择安装方式

创建项目时有很多依赖包需要下载,可以使用npm工具或者yarn工具类自动下载，默认直接回车,使用NPM安装

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
>    Yes, use NPM
     Yes, use Yarn
     No, I will handle that myself

12.项目创建及依赖自动安装

等待安装 ……

13.运行项目 

依次输入以下命令行

cd test
npm run dev

等待出现以下提示信息表示项目以运行成功

 DONE  Compiled successfully in 2768ms                   11:33:49

 I  Your application is running here: http://localhost:8080 

 项目访问地址，在浏览器中访问以下地址

http://localhost:8080 

备注：查看项目的启动命令在项目的根目录下 README.md 文件中 查看

14.停止项目

在命令窗口中按 ctrl + c ，出现以下提示，输入Y 并回车继续就会停止项目

二.cesium 安装配置

1.安装Cesium环境

在命令窗口或VS Code开发工具中打开text项目，执行 npm install cesium 安装命令，如下图

命令窗口中安装cesium环境

 VS Code 开发工具安装cesium环境

在安装cesium可能会报以下错误，若没有则忽略

rollbackFailedOptional: verb npm-session ab1b9becfc5b03e4

解决办法：

1.执行以下命令修改npm的资源镜像链接

npm config set registry http://registry.npm.taobao.org

2.查看是否修改成功

npm config get registry           

以下结果为修改成功

2.Webpack配置

在配置之前，使用过Cesium的都知道它是一个非常复杂的库，很难去直接打包，我们无法通过在main.js 中像引入Vue那样直接进行引入Cesium，具体配置如下

build/webpack.base.conf.js

1、定义 Cesium 源码路径

  1. 'use strict'
  2. const path = require('path')
  3. const utils = require('./utils')
  4. const config = require('../config')
  5. const vueLoaderConfig = require('./vue-loader.conf')
  6.  
  7. // cesium 配置
  8. const cesiumSource = '../node_modules/cesium/Source'

2、在output 里加入sourcePrefix: ' ' ，让webpack 正确处理多行字符串
3、配置 amd 参数
4、module 中在rules后添加 unknownContextCritical: false

  1. module.exports = {
  2.   context: path.resolve(__dirname, '../'),
  3.   entry: {
  4.     app: './src/main.js'
  5.   },
  6.   output: {
  7.     path: config.build.assetsRoot,
  8.     filename: '[name].js',
  9.     publicPath: process.env.NODE_ENV === 'production'
  10.       ? config.build.assetsPublicPath
  11.       : config.dev.assetsPublicPath,
  12.     sourcePrefix: ' ' // cesium 配置
  13.   },
  14.   // cesium 配置 --start
  15.   amd:{
  16.       toUrlUndefined: true
  17.   },
  18.   // cesium 配置 --end
  19.   resolve: {
  20.     extensions: ['.js', '.vue', '.json'],
  21.     alias: {
  22.       'vue$': 'vue/dist/vue.esm.js',
  23.       '@': resolve('src'),
  24. 		  'cesium': path.resolve(__dirname, cesiumSource) // cesium 配置
  25.     }
  26.   },
  27.   module: {
  28.     rules: [
  29.       // ...(config.dev.useEslint ? [createLintingRule()] : []),
  30.       {
  31.         test: /\.vue$/,
  32.         loader: 'vue-loader',
  33.         options: vueLoaderConfig
  34.       },
  35.       {
  36.         test: /\.js$/,
  37.         loader: 'babel-loader',
  38.         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
  39.       },
  40.       {
  41.         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  42.         loader: 'url-loader',
  43.         exclude: [resolve('src/assets/icons')], // svg配置
  44.         options: {
  45.           limit: 10000,
  46.           name: utils.assetsPath('img/[name].[hash:7].[ext]')
  47.         }
  48.       },
  49.       {
  50.         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  51.         loader: 'url-loader',
  52.         options: {
  53.           limit: 10000,
  54.           name: utils.assetsPath('media/[name].[hash:7].[ext]')
  55.         }
  56.       },
  57.       {
  58.         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  59.         loader: 'url-loader',
  60.         options: {
  61.           limit: 10000,
  62.           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  63.         }
  64.       }
  65.     ],
  66.     unknownContextCritical: false // cesium 配置
  67.   }
  68. }

build/webpack.dev.conf.js

1、定义 Cesium 源码路径和Cesium Workers 路径（注意：这里的 node_modules 与webpack.base.conf.js中的配置不同，前面没有 ../ ）

  1. // cesium 配置
  2. const cesiumSource = 'node_modules/cesium/Source'
  3. const cesiumWorkers = '../Build/Cesium/Workers'

2、定义CESIUM_BASE_URL变量
3、在plugins 中加入下面插件,拷贝静态资源

  1.   plugins: [
  2.     new webpack.DefinePlugin({
  3.       'process.env': require('../config/dev.env'),
  4.       'CESIUM_BASE_URL': JSON.stringify('') // cesium 配置
  5.     }),
  6.     new HtmlWebpackPlugin({
  7.       ……
  8.     }),
  9.     new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]), // cesium 配置
  10.     new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]), // cesium 配置
  11.     new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]), // cesium 配置
  12.     new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' } ]), // cesium 配置
  13.     
  14.     // copy custom static assets
  15.     new CopyWebpackPlugin([
  16.       ……
  17.     ])
  18.   ]

build/webpack.prod.conf.js

1、定义路径

  1. // cesium 配置
  2. const cesiumSource = 'node_modules/cesium/Source';
  3. const cesiumWorkers = '../Build/Cesium/Workers';

2、定义'CESIUM_BASE_URL'变量
3、在plugins 中加入下面插件,拷贝静态资源

  1. plugins: [
  2.     // http://vuejs.github.io/vue-loader/en/workflow/production.html
  3.     new webpack.DefinePlugin({
  4.       'process.env': env,
  5.       'CESIUM_BASE_URL': JSON.stringify('static') // cesium 配置
  6.     }),
  7.     new UglifyJsPlugin({
  8.       ……
  9.     }),
  10.     new ExtractTextPlugin({
  11.       ……
  12.     }),
  13.     new OptimizeCSSPlugin({
  14.       ……
  15.     }),
  16.     new HtmlWebpackPlugin({
  17.       ……
  18.     }),
  19.  
  20.     new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'static/Workers' } ]), // cesium 配置
  21.     new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'static/Assets' } ]), // cesium 配置
  22.     new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'static/Widgets' } ]), // cesium 配置
  23.     new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' } ]), // cesium 配置
  24.     new CopyWebpackPlugin([ { from: 'ThirdParty', to: 'ThirdParty' } ]), // cesium 配置
  25.     
  26.     ……
  27.   ]

4、ThirdParty文件夹创建

        在项目根目录新建文件夹ThirdParty，放入draco_decoder.wasm文件，在加载gltf模型文件等需要用到。

5、main.js配置全局样式

  1. // cesium 配置
  2. import widgets from "../node_modules/cesium/Source/Widgets/widgets.css"
  3. Vue.prototype.widgets = widgets

3. 创建cesium测试组件

  1. <template>
  2.   <div>
  3.     <div id="map3DView">
  4.   </div>
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. const Cesium = require('cesium/Cesium')
  10. let viewer = undefined
  11.  
  12. export default {
  13.   name: 'map3DView',
  14.   data () {
  15.     return {      
  16.     }
  17.   },
  18.   mounted(){
  19.     Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0NzhhMDI0NC05NDUwLTRjZWYtOWI5Mi1mYzNjNWQ5OGQ1ZWQiLCJpZCI6NDU0MTEsImlhdCI6MTYyNjA4MTg2MX0.dn2cDGd6p2ar3atcOEwX9LVjmgqcBj1RCqVaWkwFEcU';
  20.     viewer = new Cesium.Viewer("map3DView", {
  21.       requestRenderMode: true, // 开启请求的渲染模式
  22.       maximumRenderTimeChange: Infinity, // 处理模拟时间改变
  23.       animation: false, // 是否创建动画小器件，左下角仪表
  24.       baseLayerPicker: false, // 是否显示图层选择器
  25.       fullscreenButton: false, // 是否显示全屏按钮
  26.       geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
  27.       homeButton: false, // 是否显示Home按钮
  28.       infoBox: false, // 是否显示信息框
  29.       shouldAnimate: true,  // 允许动画
  30.       sceneModePicker: false, // 是否显示3D/2D选择器
  31.       selectionIndicator: false, // 是否显示选取指示器组件鼠标绿色框
  32.       timeline: true, // 是否显示时间轴
  33.       navigationHelpButton: false, // 是否显示右上角的帮助按钮
  34.       vrButton: false, // 是否显示双屏
  35.       scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
  36.       fullscreenElement: document.body, // 全屏时渲染的HTML元素
  37.       allowDataSourcesToSuspendAnimation: false,
  38.       navigationInstructionsInitiallyVisible: false,
  39.       terrainProvider:
  40.         Cesium.createWorldTerrain(),
  41.       orderIndependentTranslucency: false,
  42.       contextOptions: {
  43.         webgl: {
  44.           alpha: true,
  45.           depth: true,
  46.           stencil: true,
  47.           antialias: true, //!mobilecheck(),
  48.           premultipliedAlpha: true,
  49.           //通过canvas.toDataURL()实现截图需要将该项设置为true
  50.           preserveDrawingBuffer: true,
  51.           failIfMajorPerformanceCaveat: true
  52.         }
  53.       },
  54.       requestWaterMask: true // 水面特效
  55.     })
  56.     viewer.shadows = true //开启或关闭阴影
  57.  
  58.     // 关闭抗锯齿
  59.     viewer.scene.fxaa = true
  60.     viewer.scene.postProcessStages.fxaa.enabled = true;
  61.  
  62.     //开启帧率检测
  63.     viewer.scene.debugShowFramesPerSecond = true;
  64.  
  65.     // 开启全球光照
  66.     viewer.scene.globe.enableLighting = true
  67.  
  68.     //更改配置，性能优化
  69.     viewer.scene.logarithmicDepthBuffer = true;
  70.     // 取消双击事件-追踪该位置
  71.     viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
  72.     
  73.     viewer.camera.flyTo({ 
  74.       destination: Cesium.Cartesian3.fromDegrees(103.04756,37.48098,21119200),
  75.       orientation: {
  76.         heading: 6.07, 
  77.         pitch: -1.53,
  78.       },
  79.       duration: 5 
  80.     })
  81.   }
  82. }
  83. </script>
  84.  
  85. <style lang="scss" scoped>
  86. #map3DView{
  87.   width: 100%;
  88.   height: 100%;
  89.   overflow: hidden;
  90.  
  91.   /* cesium 去版权 */
  92.     /deep/ .cesium-widget-credits {
  93.       display: none !important;
  94.       visibility: hidden !important;
  95.     }
  96.     
  97.     /deep/ .cesium-widget-credits {
  98.       display: none !important;
  99.       visibility: hidden !important;
  100.     }
  101.  
  102.     /* 隐藏时间轴 */
  103.     /deep/ .cesium-viewer-timelineContainer{
  104.       display: none;
  105.     }
  106.     
  107.     /* 帧率位置控制 */
  108.     /deep/ .cesium-performanceDisplay-defaultContainer{
  109.       top: auto;
  110.       bottom: 36px;
  111.     }
  112.  
  113.     /* 隐藏帧率名称 */
  114.     /deep/ .cesium-performanceDisplay-throttled{
  115.       display: none;
  116.     }
  117.   }
  118. </style>

 运行结果如下

至此在vue中创建cesium项目及安装配置等完美收工；

三.补充对npm run dev 运行错误处理

执行npm run dev时出现以下信息需要进行处理

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

解决方法如下

方法一：在 webpack.base.conf.js 文件中，找到 module节点下的 rules节点，注释掉这一行 

// ...(config.dev.useEslint ? [createLintingRule()] : []),

方法二：如果是较新版本的 vue ，使用的不是 webpack.base.conf.js 配置，而是 vue-cli-service 配置，找到 vue.config.js 文件，将 lintOnSave 设为 false 即可

四.框架源码

下载：Vue2+Cesium框架源码

老铁，如果对您有用的话，别忘了给点个赞 + 关注！！！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/109968
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号