当前位置: 首页 > news >正文

使用vite+vue3.0 创建一个cesium基础应用 ----01 项目搭建

使用vite+vue3.0 创建一个cesium基础应用 ----01 项目搭建

1.使用yarn创建一个vite项目

  1. 我们可以在vite官网找到vite创建项目的命令 https://cn.vitejs.dev/
    vite官网
  2. 可以使用yarn创建项目使用yarn创建项目的方法
  3. 选择使用vue3.0框架,语言使用js 创建完成后结构如下:文档结构

2.找到vite社区中的cesium插件

1.前往官网中的cesium插件
官方插件
2.前往社区
社区插件
找到cesium插件
4.进入cesium社区
在这里插入图片描述

3.使用vite文档中的线上方式引用cesium的文档

  1. 在项目中安装cesium
npm i cesium vite-plugin-cesium vite -D
# yarn add cesium vite-plugin-cesium vite -D
  1. 在vite.config.js中引入cesium
    引入cesium
import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({plugins: [cesium()]
});
  1. 在APP.vue文件中首次调用cesium vue页面完整代码如下
    调用cesium
<template><div id="cesiumContainer"></div>
</template><script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer");
});
</script><style scoped>
#cesiumContainer {width: 100% !important;height: 100% !important;margin: 0 !important;padding: 0 !important;overflow: hidden;position: absolute;
}
</style>

4.运行项目,初始效果如下:

初始效果

http://www.lryc.cn/news/28010.html

相关文章:

  • 【Python学习笔记】第二十七节 Python 多线程
  • 【id:18】【20分】B. DS顺序表--连续操作
  • vi编辑器操作指令分享
  • OSPF与BFD联动配置
  • jQuery基础
  • day39|139.单词拆分 背包问题ending
  • Shell脚本编程
  • ChatGPT解答:JavaScript保存当前网页页面图片为pdf文件或者word文件,前端用vue2,给出详细的方案和代码
  • Python基础学习11——文件
  • 外网用户打不开公司的网站?web服务器端口映射到公网
  • 【CS224W】(task9)图神经网络的表示能力(更新中!!)
  • binlog找回误删数据
  • 《程序员面试金典(第6版)》面试题 02.03. 删除中间节点
  • Spring Boot
  • 图论初入门
  • 02-Oracle数据库的启动与关闭
  • 网络营销培训完能达到什么水平?学完能创业吗?
  • 大数据技术之——zeppelin数据清洗
  • Barra模型因子的构建及应用系列五之NonLinear Size因子
  • C++ 常用命令行开发工具(Linux)
  • java基础学习 day47(抽象类,抽象方法)
  • Java代码弱点与修复之——Open redirect(开放重定向)
  • Go 指针
  • shardingsphere5.1.1分表分库yaml配置 自定义策略
  • “探索未来:VR全景直播技术引领新媒体时代”
  • Spring Cloud(微服务)学习篇(六)
  • MATLAB-Scatter3-三维散点图投影至XYZ三个平面
  • Unity/C#------委托与事件(一篇文章彻底搞懂...)
  • 别再为 Jenkins 安装烦恼,Docker 帮你轻松解决
  • 汇编语言程序设计(一)