区块链技术博客
www.b2bchain.cn

让GIS三维可视化变得简单-Vue项目中集成Cesium求职学习资料

本文介绍了让GIS三维可视化变得简单-Vue项目中集成Cesium求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

前言

市面上的前端框架中,Vue+Cesium 可谓是最佳搭档,一般做 Cesium B 端产品的公司都会使用 Vue,所以后续内容都将基于 Vue

通常情况下,我们要在 Vue 中使用 Cesium,首先要安装 Cesium,然后要在 vue-cli 的 webpack 配置很多东西,对一些有经验的人来说只不过麻烦些,但是对 Cesium 的初学者来说会很痛苦,因为没有使用过,也不知到要怎么配置,只能搜索网上的教程,一步一步踩坑

其实不管是有经验或是初学者,每次写项目重复配置这些东西都很麻烦

vue-cli-plugin-cesium 就是为了解决这个问题

介绍

vue-cli-plugin-cesium 是一款针对 Cesium 的 VueCLI 扩展插件,使用它将会让我们在 VueCLI 中零配置使用 Cesium,基于 VueCLI3.0+

其实就是我开始做 Cesium 的时候,觉得每次配置太麻烦,就写了个插件免配置从而节约开发时间,后来就发到几个 Cesium 开发群里给大家体验了一波,效果还不错

它会在我们已经创建好的 VueCLI 项目中做基于 Cesium 的扩展,截止目前它的功能也可以说它解决的问题如下

  • 自动安装 Cesium 并追加至 package.json 依赖项(可自选版本)

  • 自动扩展 VueCLI 中 Cesium 相关的 webpack 配置
    • 添加一个 cesium 别名,以便我们在项目中轻松的引入 Cesium 文件资源
    • 使 Cesium 对象实例可在每个 Vue 模块中使用而无须 import 引入
    • 使 webpack 可正常打包 Cesium
    • 允许 webpack 友好地在 Cesium 中使用 require,解决 require 引入警告
    • 开发环境生成 sourcemap,生产环境取消 sourcemap
    • 生产环境抽取公共模块执行压缩
    • 生产环境 loader 切换到优化模式
  • 自动在全局 main.js 中引入Widgets.css,可选

  • 自动在 components/ 文件夹下生成示例文件,可选

安装

vue-cli-plugin-cesium 是基于 VueCLI 的扩展插件,所以在使用前要先使用 VueCLI 创建一个 Vue 项目

如果您不了解 VueCLI 的使用,请移步 VueCLI-官网

当前插件只支持 VueCLI3.0+ 版本哦

创建好一个 Vue 项目后就可以按照以下步骤使用该插件了,同所有 VueCLI 插件一样,它有两种使用方式,推荐使用方式一

使用方式一

推荐使用 vue add 这种方式安装,一步到位,简单便捷

vue add vue-cli-plugin-cesium  // 非全局安装的vue-cli可以 npx vue add vue-cli-plugin-cesium

使用方式二

首先安装 vue-cli-plugin-cesium 插件,推荐使用 yarn 安装,因为它更简洁

// npm npm install --save-dev vue-cli-plugin-cesium  // yarn yarn add vue-cli-plugin-cesium

安装完成后我们要使用 vue invoke 来初始化这个插件

vue invoke vue-cli-plugin-cesium  // 非全局安装的vue-cli可以 npx vue invoke vue-cli-plugin-cesium

安装过程

vue invokevue add 的过程中会有三个询问

询问一

Please choose a version of 'cesium' from this list 请在列表中选择 cesium 的版本

在此选择想使用的 Cesium 版本

询问二

Whether to import styles globally.  This operation will automatically import widgets.css in main.js 是否全局引入样式,该操作将自动在main.js引入widgets.css?

此项默认为 yes,该操作将自动在 main.js 引入 widgets.css,即全局引入 Cesium 的 css 样式

如果此项设置为 no,那么开发时我们要手动引入widgets.css样式文件,引入命令如下

import "cesium/Widgets/widgets.css"

询问三

前言

市面上的前端框架中,Vue+Cesium 可谓是最佳搭档,一般做 Cesium B 端产品的公司都会使用 Vue,所以后续内容都将基于 Vue

通常情况下,我们要在 Vue 中使用 Cesium,首先要安装 Cesium,然后要在 vue-cli 的 webpack 配置很多东西,对一些有经验的人来说只不过麻烦些,但是对 Cesium 的初学者来说会很痛苦,因为没有使用过,也不知到要怎么配置,只能搜索网上的教程,一步一步踩坑

其实不管是有经验或是初学者,每次写项目重复配置这些东西都很麻烦

vue-cli-plugin-cesium 就是为了解决这个问题

介绍

vue-cli-plugin-cesium 是一款针对 Cesium 的 VueCLI 扩展插件,使用它将会让我们在 VueCLI 中零配置使用 Cesium,基于 VueCLI3.0+

其实就是我开始做 Cesium 的时候,觉得每次配置太麻烦,就写了个插件免配置从而节约开发时间,后来就发到几个 Cesium 开发群里给大家体验了一波,效果还不错

它会在我们已经创建好的 VueCLI 项目中做基于 Cesium 的扩展,截止目前它的功能也可以说它解决的问题如下

  • 自动安装 Cesium 并追加至 package.json 依赖项(可自选版本)

  • 自动扩展 VueCLI 中 Cesium 相关的 webpack 配置
    • 添加一个 cesium 别名,以便我们在项目中轻松的引入 Cesium 文件资源
    • 使 Cesium 对象实例可在每个 Vue 模块中使用而无须 import 引入
    • 使 webpack 可正常打包 Cesium
    • 允许 webpack 友好地在 Cesium 中使用 require,解决 require 引入警告
    • 开发环境生成 sourcemap,生产环境取消 sourcemap
    • 生产环境抽取公共模块执行压缩
    • 生产环境 loader 切换到优化模式
  • 自动在全局 main.js 中引入Widgets.css,可选

  • 自动在 components/ 文件夹下生成示例文件,可选

安装

vue-cli-plugin-cesium 是基于 VueCLI 的扩展插件,所以在使用前要先使用 VueCLI 创建一个 Vue 项目

如果您不了解 VueCLI 的使用,请移步 VueCLI-官网

当前插件只支持 VueCLI3.0+ 版本哦

创建好一个 Vue 项目后就可以按照以下步骤使用该插件了,同所有 VueCLI 插件一样,它有两种使用方式,推荐使用方式一

使用方式一

推荐使用 vue add 这种方式安装,一步到位,简单便捷

vue add vue-cli-plugin-cesium  // 非全局安装的vue-cli可以 npx vue add vue-cli-plugin-cesium

使用方式二

首先安装 vue-cli-plugin-cesium 插件,推荐使用 yarn 安装,因为它更简洁

// npm npm install --save-dev vue-cli-plugin-cesium  // yarn yarn add vue-cli-plugin-cesium

安装完成后我们要使用 vue invoke 来初始化这个插件

vue invoke vue-cli-plugin-cesium  // 非全局安装的vue-cli可以 npx vue invoke vue-cli-plugin-cesium

安装过程

vue invokevue add 的过程中会有三个询问

询问一

Please choose a version of 'cesium' from this list 请在列表中选择 cesium 的版本

在此选择想使用的 Cesium 版本

询问二

Whether to import styles globally.  This operation will automatically import widgets.css in main.js 是否全局引入样式,该操作将自动在main.js引入widgets.css?

此项默认为 yes,该操作将自动在 main.js 引入 widgets.css,即全局引入 Cesium 的 css 样式

如果此项设置为 no,那么开发时我们要手动引入widgets.css样式文件,引入命令如下

import "cesium/Widgets/widgets.css"

询问三

前言

市面上的前端框架中,Vue+Cesium 可谓是最佳搭档,一般做 Cesium B 端产品的公司都会使用 Vue,所以后续内容都将基于 Vue

通常情况下,我们要在 Vue 中使用 Cesium,首先要安装 Cesium,然后要在 vue-cli 的 webpack 配置很多东西,对一些有经验的人来说只不过麻烦些,但是对 Cesium 的初学者来说会很痛苦,因为没有使用过,也不知到要怎么配置,只能搜索网上的教程,一步一步踩坑

其实不管是有经验或是初学者,每次写项目重复配置这些东西都很麻烦

vue-cli-plugin-cesium 就是为了解决这个问题

介绍

vue-cli-plugin-cesium 是一款针对 Cesium 的 VueCLI 扩展插件,使用它将会让我们在 VueCLI 中零配置使用 Cesium,基于 VueCLI3.0+

其实就是我开始做 Cesium 的时候,觉得每次配置太麻烦,就写了个插件免配置从而节约开发时间,后来就发到几个 Cesium 开发群里给大家体验了一波,效果还不错

它会在我们已经创建好的 VueCLI 项目中做基于 Cesium 的扩展,截止目前它的功能也可以说它解决的问题如下

  • 自动安装 Cesium 并追加至 package.json 依赖项(可自选版本)

  • 自动扩展 VueCLI 中 Cesium 相关的 webpack 配置
    • 添加一个 cesium 别名,以便我们在项目中轻松的引入 Cesium 文件资源
    • 使 Cesium 对象实例可在每个 Vue 模块中使用而无须 import 引入
    • 使 webpack 可正常打包 Cesium
    • 允许 webpack 友好地在 Cesium 中使用 require,解决 require 引入警告
    • 开发环境生成 sourcemap,生产环境取消 sourcemap
    • 生产环境抽取公共模块执行压缩
    • 生产环境 loader 切换到优化模式
  • 自动在全局 main.js 中引入Widgets.css,可选

  • 自动在 components/ 文件夹下生成示例文件,可选

安装

vue-cli-plugin-cesium 是基于 VueCLI 的扩展插件,所以在使用前要先使用 VueCLI 创建一个 Vue 项目

如果您不了解 VueCLI 的使用,请移步 VueCLI-官网

当前插件只支持 VueCLI3.0+ 版本哦

创建好一个 Vue 项目后就可以按照以下步骤使用该插件了,同所有 VueCLI 插件一样,它有两种使用方式,推荐使用方式一

使用方式一

推荐使用 vue add 这种方式安装,一步到位,简单便捷

vue add vue-cli-plugin-cesium  // 非全局安装的vue-cli可以 npx vue add vue-cli-plugin-cesium

使用方式二

首先安装 vue-cli-plugin-cesium 插件,推荐使用 yarn 安装,因为它更简洁

// npm npm install --save-dev vue-cli-plugin-cesium  // yarn yarn add vue-cli-plugin-cesium

安装完成后我们要使用 vue invoke 来初始化这个插件

vue invoke vue-cli-plugin-cesium  // 非全局安装的vue-cli可以 npx vue invoke vue-cli-plugin-cesium

安装过程

vue invokevue add 的过程中会有三个询问

询问一

Please choose a version of 'cesium' from this list 请在列表中选择 cesium 的版本

在此选择想使用的 Cesium 版本

询问二

Whether to import styles globally.  This operation will automatically import widgets.css in main.js 是否全局引入样式,该操作将自动在main.js引入widgets.css?

此项默认为 yes,该操作将自动在 main.js 引入 widgets.css,即全局引入 Cesium 的 css 样式

如果此项设置为 no,那么开发时我们要手动引入widgets.css样式文件,引入命令如下

import "cesium/Widgets/widgets.css"

询问三

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 让GIS三维可视化变得简单-Vue项目中集成Cesium求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们