当前位置: 首页 > 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.运行项目,初始效果如下:

初始效果

相关文章:

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

使用vitevue3.0 创建一个cesium基础应用 ----01 项目搭建 1.使用yarn创建一个vite项目 我们可以在vite官网找到vite创建项目的命令 https://cn.vitejs.dev/ 可以使用yarn创建项目选择使用vue3.0框架&#xff0c;语言使用js 创建完成后结构如下&#xff1a; 2.找到vite社区中的…...

【Python学习笔记】第二十七节 Python 多线程

一、进程和线程进程&#xff1a;是程序的一次执行&#xff0c;每个进程都有自己的地址空间、内存、数据栈及其他记录运行轨迹的辅助数据。线程&#xff1a;所有的线程都运行在同一个进程当中&#xff0c;共享相同的运行环境。线程有开始、顺序执行和结束三个部分&#xff0c; …...

【id:18】【20分】B. DS顺序表--连续操作

题目描述建立顺序表的类&#xff0c;属性包括&#xff1a;数组、实际长度、最大长度&#xff08;设定为1000&#xff09;该类具有以下成员函数&#xff1a;构造函数&#xff1a;实现顺序表的初始化。插入多个数据的multiinsert(int i, int n, int item[])函数&#xff0c;实现在…...

vi编辑器操作指令分享

vi编辑器是所有Unix及Linux系统下标准的编辑器&#xff0c;它的强大不逊色于任何最新的文本编辑器&#xff0c;这里只是简单地介绍一下它的用法和一小部分指令。由于对Unix及Linux系统的任何版本&#xff0c;vi编辑器是完全相同的&#xff0c;因此您可以在其他任何介绍vi的地方…...

OSPF与BFD联动配置

13.1.1BFD概念 BFD提供了一个通用的、标准化的、介质无关的、协议无关的快速故障检测机制,有以下两大优点: 对相邻转发引擎之间的通道提供轻负荷、快速故障检测。 用单一的机制对任何介质、任何协议层进行实时检测。 BFD是一个简单的“Hello”协议。两个系统之间建立BFD会…...

jQuery基础

> &#x1f972; &#x1f978; &#x1f90c; &#x1fac0; &#x1fac1; &#x1f977; &#x1f43b;‍❄️&#x1f9a4; &#x1fab6; &#x1f9ad; &#x1fab2; &#x1fab3; &#x1fab0; &#x1fab1; &#x1fab4; &#x1fad0; &#x1fad2; &#x1…...

day39|139.单词拆分 背包问题ending

139.单词拆分 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 示例 1&#xff1a; 输入: s "leetcode",…...

Shell脚本编程

Shell编程 视频地址https://www.bilibili.com/video/BV1hW41167NW/?p1&vd_source977d52a6b92ce8b6ae67c16fc61f0428 第一章 Shell概述 大数据程序员为什么要学习Shell呢&#xff1f; 需要看懂运维人员编写的Shell程序偶尔会编写一些简单的Shell程序来管理集群&#xf…...

ChatGPT解答:JavaScript保存当前网页页面图片为pdf文件或者word文件,前端用vue2,给出详细的方案和代码

ChatGPT解答&#xff1a;JavaScript保存当前网页页面图片为pdf文件或者word文件&#xff0c;前端用vue2&#xff0c;给出详细的方案和代码 ChatGPTDemo Based on OpenAI API (gpt-3.5-turbo). JavaScript保存当前网页页面图片为pdf文件或者word文件&#xff0c;前端用vue2&am…...

Python基础学习11——文件

我们可以利用python对本电脑文件夹里的文件进行处理&#xff0c;python中提供了一系列相关的方法和函数供我们使用。 读取文件 我们现在在本python文件中有一个txt文件名为Lego&#xff0c;那么我们就可以利用python打开该文件 with open(Lego.txt) as file_text:contents …...

外网用户打不开公司的网站?web服务器端口映射到公网

我们经常会遇到这样的情景&#xff0c;在公司内部可以打开公司的网站&#xff0c;在家里或者外网却打不开&#xff0c;按照网上的做法&#xff0c;重新启动了服务器和iis&#xff0c;还是不行。许多用户设置了路由器端口映射功能&#xff0c;但是端口映射不成功怎么办&#xff…...

【CS224W】(task9)图神经网络的表示能力(更新中!!)

note 基于图同构网络&#xff08;GIN&#xff09;的图表征网络。为了得到图表征首先需要做节点表征&#xff0c;然后做图读出。GIN中节点表征的计算遵循WL Test算法中节点标签的更新方法&#xff0c;因此它的上界是WL Test算法。 在图读出中&#xff0c;我们对所有的节点表征&…...

binlog找回误删数据

1、检查当前是否开启binlog存储 输入命令show variables like %log_bin%;&#xff0c;结果如下 可以看到log_bin的值是ON&#xff0c;说明binlog开启了。 2、查找binlog的存储位置 这个去到数据库的my.cnf配置文件中寻找&#xff0c;有一个log_bin的配置 切换到log_bin的目…...

《程序员面试金典(第6版)》面试题 02.03. 删除中间节点

题目描述 若链表中的某个节点&#xff0c;既不是链表头节点&#xff0c;也不是链表尾节点&#xff0c;则称其为该链表的「中间节点」。 假定已知链表的某一个中间节点&#xff0c;请实现一种算法&#xff0c;将该节点从链表中删除。 例如&#xff1a; 传入节点 c&#xff08…...

Spring Boot

目录 SpringBoot SpringBoot创建和使用 什么是Spring Boot Spring Boot优点 Spring Boot项目的创建 项目目录介绍和运行 目录介绍 项目运行 SpringBoot核心设计思想 SpringBoot的配置文件 配置文件的作用 配置文件的格式 注意事项 properties配置文件 propertie…...

图论初入门

目录 一、前言 二、图的概念 三、例题及相关概念 1、全球变暖&#xff08;2018年省赛&#xff0c;lanqiao0J题号178&#xff09; 2、欧拉路径 3、小例题 4、例题&#xff08;洛谷P7771&#xff09; 一、前言 本文主要讲了树与图的基本概念&#xff0c;图的存储、DFS遍历…...

02-Oracle数据库的启动与关闭

本文章主要讲解Oracle数据库的启动与关闭方法&#xff0c;详细讲解启动Oracle的命令&#xff0c;三种启动数据库的方法及区别&#xff1b;关闭数据库的4种方法及他们的区别。 启动和关闭数据库 •数据库没启动前&#xff0c;只有拥有DBA权限或者以sysoper或sysdba身份才能连接到…...

网络营销培训完能达到什么水平?学完能创业吗?

网络营销本身就是一门创业的技术&#xff0c;很多人学习网络营销&#xff0c;往往担心学完以后技术达不到&#xff0c;再工作几年才可以创业&#xff0c;实际这是错误的理解&#xff0c;那么&#xff0c;网络营销培训完能达到什么水平&#xff1f;新手学员参加网络营销培训&…...

大数据技术之——zeppelin数据清洗

一、zeppelin的安装zeppelin解压后进入到conf配置文件界面。修改zeppelin-site.xml[roothadoop02 conf]# cp zeppelin-site.xml.template zeppelin-site.xml[roothadoop02 conf]# vim zeppelin-site.xml将IP地址和端口号设置成自己的修改 zeppelin-env.shexport JAVA HOME/opt/…...

Barra模型因子的构建及应用系列五之NonLinear Size因子

一、摘要 在前期的Barra模型系列文章中&#xff0c;我们构建了Size因子、Beta因子、Momentum因子和Residual Volatility因子&#xff0c;并分别创建了对应的单因子策略&#xff0c;本节文章在该系列下进一步构建NonLinear Size因子。从回测结果看&#xff0c;自2022年以来&…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...