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 [email protected]

当然我更推荐使用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大屏数据可视化项目——第一章:搭建项目_第1张图片

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

vite+vue3+cesium大屏数据可视化项目——第一章:搭建项目_第2张图片

执行以下命令:

安装依赖:yarn install

运行项目:yarn dev

执行后,可看见以下页面:

vite+vue3+cesium大屏数据可视化项目——第一章:搭建项目_第3张图片

 打开链接就能看见页面啦

vite+vue3+cesium大屏数据可视化项目——第一章:搭建项目_第4张图片

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

二、配置cesium

1.前期准备

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

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

vite+vue3+cesium大屏数据可视化项目——第一章:搭建项目_第5张图片

也可以点击acesstoke查看

vite+vue3+cesium大屏数据可视化项目——第一章:搭建项目_第6张图片

2.安装cesium

yarn add cesium vite-plugin-cesium

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

vite+vue3+cesium大屏数据可视化项目——第一章:搭建项目_第7张图片

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;





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







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


总结

以上就是今天要讲的内容,本文仅仅vue3得搭建,引入sesium及展示,其他的下一张再讲解把~

你可能感兴趣的:(cesium,信息可视化,前端,vue.js,javascript)