vite+vue3+cesium大屏数据可视化项目——第一章：搭建项目

这篇具有很好参考价值的文章主要介绍了vite+vue3+cesium大屏数据可视化项目——第一章：搭建项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

系列文章目录

前言

一、搭建项目

1.检查node版本号

2.搭建vue3项目

二、配置cesium

1.前期准备

2.安装cesium

3.引入cesium

4.初始化页面

总结

前言

这几年智慧城市、数字孪生、数字可视化这些高级词汇可太多啦，招聘简介上也有很多要求会webGis等相关经验，所以我觉得最近来学一学，本文章也是边学边记录项目把。由于我常用vue所以这次用vue3+cesium来开发。

cesium官网可以：点这里

这一章主要搭建项目~

一、搭建项目

1.检查node版本号

首先要检查你的node版本，官网说必须 14.18+，16+

node -v //检查node 版本号

如果你的node版本过低，可以升级高版本，如下：

//直接升级
npm node@18.0.1

当然我更推荐使用nvm(node版本管理器)：

相关配置可看这篇：nvm安装和配置（npm下载失败的原因以及解决方法）

如果你已经有nvm，那请下载版本后切换，如下：

//下载node
nvm  install v18.0.1

//查看是否安装完成

nvm list //带*号表示正在使用得node版本

//使用新版本
nvm use v18.0.1

2.搭建vue3项目

//yarn
yarn create vite

// OR npm
npm create vite

对其进行配置，如下图：

vite+vue3+cesium大屏数据可视化项目——第一章：搭建项目

然后我们可以用vscode打开这个项目，打开vite.config.ts，配置端口，如下：

vite+vue3+cesium大屏数据可视化项目——第一章：搭建项目

执行以下命令：

安装依赖：yarn install

运行项目：yarn dev

执行后，可看见以下页面：

vite+vue3+cesium大屏数据可视化项目——第一章：搭建项目

打开链接就能看见页面啦

vite+vue3+cesium大屏数据可视化项目——第一章：搭建项目

到这里项目就搭建完成啦~

二、配置cesium

1.前期准备

首先需要打开cesium官网创建一个账户：点击这里

输入邮箱，根据步骤注册就行了，注册完成后你的邮箱将会收到官方给你分配得token，如下：

vite+vue3+cesium大屏数据可视化项目——第一章：搭建项目

也可以点击acesstoke查看

vite+vue3+cesium大屏数据可视化项目——第一章：搭建项目

2.安装cesium

yarn add cesium vite-plugin-cesium

在package.json中看到安装信息则表示安装好啦，如下图：

vite+vue3+cesium大屏数据可视化项目——第一章：搭建项目

3.引入cesium

在vite.config.ts中引入cesium，如下图：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';//1.引入cesium
// https://vitejs.dev/config/
export default defineConfig({
  plugins:
    [
      vue(),
      cesium()//2.使用插件
    ],
  server: {
    host: '0.0.0.0'
  }
})

4.初始化页面

我们删除component/helloWorld.vue，新建cesium.vue；

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

<script setup lang="ts">
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = '刚才申请得token'
    const viewer = new Cesium.Viewer("cesiumContainer",{
    terrainProvider: Cesium.createWorldTerrain()
  });
});
</script>

<style>
#cesiumContainer {
  width: calc(100vw);
  height: calc(100vh);
}

</style>

并将app.vue中多余得东西清除，在app.vue中引入组件cesium，如下：


<script setup lang="ts">
import Cesium from "./components/cesium.vue"

</script>

<template>
<div>

</div>
<Cesium></Cesium>
</template>

<style scoped>

</style>

此时我们就可以看到页面中展示出来得地图啦~

vite+vue3+cesium大屏数据可视化项目——第一章：搭建项目