vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 cesium环境搭建

Vue3+cesium环境搭建的实现示例

作者:过河不拆乔

本文主要介绍了Vue3+cesium环境搭建的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前置开发环境

首先确保电脑已经安装node.js,vue.js,搜索cmd,以管理员身份运行,

分别输入以下命令,检查环境配置是否成功;

node -v
npm -v
vue -V

如果输出版本号,则说明环境配置成功,这里每个人安装的版本可能不一样;

创建一个Vue3项目

初始化Vue项目,在我们要创建Vue项目的地方打开cmd,执行以下命令:

// demo为项目名
vue create demo

接着选择创建项目的Vue配置信息,这里默认是Vue3项目,这里我们选择自定义配置,也可以直接创建vue3项目,跳过以下步骤

这里我选择的是以下配置,按空格选择,然后下一步

下一步,这里选择3.X,如果你选择 "Choose a version of Vue.js that you want to start the project with 3.x",那么你的项目将基于 Vue.js 3.x 进行开发。在项目的配置和代码中,你将使用与 Vue.js 3.x 相关的特性、选项和 API。

这句话的意思是:是否使用历史模式的路由器?(在生产环境中需要正确的服务器设置以支持索引回退)(Y/n),这里我选择的是n,大家也可以根据自己的需要进行选择;

在 Vue.js 项目中,路由器可以使用历史模式来实现无刷新的页面导航。当使用历史模式时,浏览器不会发送标准的 GET 请求来加载新的页面,而是通过浏览器的历史记录来进行导航。

"Use history mode for router?" 询问你是否要使用历史模式的路由器。

"Requires proper server setup for index fallback in production" 表示在生产环境中需要正确的服务器设置以支持索引回退。这意味着在服务器端需要配置适当的规则,以确保当用户在浏览器中输入错误的 URL 或后退到不存在的页面时,能够正确地显示默认的索引页面或提供适当的错误提示。

"Y/n" 是一个提示,询问你是否同意使用历史模式的路由器。你可以选择输入 "Y" 表示同意,或者输入 "N" 表示不同意。

如果你选择 "Y",那么 Vue.js 的路由器将使用历史模式进行导航,并在服务器端进行适当的配置以支持索引回退。这样可以提供更好的用户体验,特别是在单页面应用(SPA)中。

如果你不确定或不想使用历史模式,或者你的服务器环境不支持或不需要特定的配置,你可以选择输入 "N",然后 Vue.js 的默认路由器模式将被使用。

这句话的意思是:选择一个 CSS 预处理器(PostCSS、Autoprefixer 和 CSS Modules 默认支持)。

在前端开发中,使用 CSS 预处理器可以提高开发效率和代码的可维护性。这里提供了几个常见的 CSS 预处理器供你选择。

这句话的意思是:选择一个代码风格检查器/格式化器的配置。

在软件开发中,代码风格和格式的一致性非常重要。代码风格检查器可以帮助你确保代码遵循一定的规范和标准,提高代码的可读性和可维护性。而格式化器则可以自动调整代码的格式,使其更加整洁和易读。

这里提供了一些常见的代码风格检查器/格式化器的配置供你选择。

在选择额外的 Lint 功能时,推荐选择 “Lint on save”。这个选项表示在保存文件时进行代码检查,可以即时发现并修复代码中的潜在问题,有助于保持代码质量和规范。因此,建议选择此功能以确保代码在保存时即时进行Lint检查。。

你可以使用空格键来选择或取消选择特定的检查功能,使用 a 键来切换所有功能的选择状态,使用 i 键来反转选择状态,然后按回车键继续。

这句话的意思是:你更倾向于在哪里放置 Babel、ESLint 等的配置?

在软件开发中,Babel 和 ESLint 等工具通常需要配置一些选项来满足项目的需求。关于配置文件的放置位置,可以根据项目的结构和团队的约定来决定。

这里提供了一些常见的放置位置供你选择。

你可以使用箭头键上下移动选择你想要的配置放置位置,然后按回车键确认选择。

这里里是问你是否需要将刚才选择的一系列配置保存起来,然后它可以帮你记住上面的一系列选择,以便下次直接重用。

这里根据自己需要输入 y 或者 n,我这里输入 n 不需要。

接着点击回车,开始创建项目

项目创建成功​​​​​​​

引入cesium库

打开VS code,打开我们刚刚创建的文件夹,点击package.json,可以查看该项目的详细信息

接着我们新建一个终端

输入以下命令,引入cesiu库,-D 是 --save-dev 的缩写,这里我们将 Cesium 添加至开发时依赖即可。

npm install cesium -D

现在可以在这里看见cesium的版本号,说明我们已经引入成功

修改项目配置

接下来修改配置文件,打开vue.config.js,修改为以下内容

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
// CesiumJS源代码的路径
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    output: {
      sourcePrefix: ''
    },
    resolve: {
      fallback: { "https": false, "zlib": false, "http": false, "url": false },
    },
    plugins: [
      // 复制Cesium的Assets、Widgets和Workers到一个静态目录
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
          { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
          { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
          { from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }
        ]
      }),
      new webpack.DefinePlugin({
        //在Cesium中定义一个相对基本路径来加载资源
        CESIUM_BASE_URL: JSON.stringify('')
      })
    ],
  }
})

接下来修改样式,我们在src目录下新建一个style文件夹,创建两个样式文件,一个是base.css,一个是index.css,

其中base.css用来书写一些基础通用的样式,内容如下

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

在index.css中引入我们刚刚建立的base.css样式

@import './base.css';

然后我们在main.js中引入index.css

import './style/index.css'

获取token

然后我们需要去cesium官网获取一个token,https://cesium.com/,这里我已经注册过了,只需要输入自己的邮箱按流程注册即可

然后回到VS code,修改App.vue的内容

<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import { onMounted } from 'vue';
import { Ion,Viewer } from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

Ion.defaultAccessToken = '这里替换为自己的token'

export default {
  name: 'App',
  setup() {
    onMounted(() => {
      const viewer = new Viewer('cesiumContainer', {
        animation:true, //是否打开创建动画小控件,即左下角的仪表
        baseLayerPicker:true,//是否显示图层选择器
        fullscreenButton:true,//是否显示全屏按钮
        geocoder:true,//是否显示Geocoder(右上角的查询按钮)
        homeButton:true,//是否显示Home按钮
        infoBox: true,//是否显示信息框
        sceneModePicker:true,//是否显示三维地球/二维地图选择器
        selectionIndicator:true,//是否显示选取指示器
        timeline: true, //是否关闭时间线
        navigationHelpButton: false, // 帮助提示
      });
      // 去除版权信息
      viewer._cesiumWidget._creditContainer.style.display = 'none';
    })
  }
}
</script>

<style scoped>
#cesiumContainer {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

运行项目

最后在终端输入以下命令

npm run serve

最终运行效果如下

到此这篇关于Vue3+cesium环境搭建的实现示例的文章就介绍到这了,更多相关Vue3 cesium环境搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文