【CesiumJS入门】(12)Vite+Vue3+Cesium 简易安装与配置

步骤

  1. vite 创建项目:yarn create vite
  2. 安装 Cesium:yarn add cesium
  3. 安装 vite-plugin-static-copy:yarn add -D vite-plugin-static-copy

在这里插入图片描述

  1. 配置 vite.config.js :
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";import { viteStaticCopy } from "vite-plugin-static-copy";export default defineConfig({define: {CESIUM_BASE_URL: JSON.stringify("/cesiumStatic"),},plugins: [vue(),viteStaticCopy({targets: [{src: "node_modules/cesium/Build/Cesium/ThirdParty",dest: "cesiumStatic",},{src: "node_modules/cesium/Build/Cesium/Workers",dest: "cesiumStatic",},{src: "node_modules/cesium/Build/Cesium/Assets",dest: "cesiumStatic",},{src: "node_modules/cesium/Build/Cesium/Widgets",dest: "cesiumStatic",},],}),],
});
  1. 配置 main.js :
// 新增:
import "cesium/Build/Cesium/Widgets/widgets.css";
import "@cesium/engine/Source/Widget/CesiumWidget.css";

在这里插入图片描述

  1. 加载:(直接修改App.vue文件进行演示)
<script setup>
import { onMounted } from "vue";
import { Ion, Viewer } from "cesium";onMounted(() => {Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ODRiMTU0NS05NmJlLTRhNzYtYjA3OS02N2JmY2RhMDE0NDgiLCJpZCI6MTA3OTM5LCJpYXQiOjE2NjMxMjk1Nzd9.XmVmA2d7T2qG6y4vAcQrmb9msWbnLxCe5qYtnlK8h5k";new Viewer("cesiumContainer");
});
</script><template><div id="cesiumContainer" style="width: 100%; height: 100%"></div>
</template>

在这里插入图片描述

参考

  1. CesiumGS/cesium-vite-example: The minimal recommended setup for an application using Cesium with Vite. (github.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/22360.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

制作自己的 ButterKnife(使用 AutoService 和 APT 注解处理器在编译期生成 Java 代码)

ButterKnife 开发过 Android 的肯定都知道曾经有这么一个库&#xff0c;它能够让你不用再写 findViewById 这样的代码&#xff0c;这就是大名鼎鼎的 ButterKnife&#xff08;https://github.com/JakeWharton/butterknife&#xff09;。虽然现在这个库已经不再维护&#xff0c;…

LabVIEW实现汽车逆变器功能测试系统

​介绍了如何利用LabVIEW开发汽车逆变器&#xff08;包括功率板和控制板&#xff09;的自动测试设备&#xff08;ATE&#xff09;&#xff0c;实现对额定800V电压、300A电流的逆变器进行功能测试。系统通过CAN2.0通讯协议&#xff0c;实现电机控制、温度传感器监测、电压校验和…

Java程序策——Java连接数据库保姆级教程(超详细步骤)

【Java程序策】——连接数据库 目录 ​编辑 一&#xff1a;在数据库中建立一个表&#xff08;student表&#xff09; 1.1&#xff1a;进入mysql 1.2&#xff1a;建立一个“数据库成员” 1.3&#xff1a;建立一个表&#xff08;student表&#xff09; 1.4&#xff1a;给表…

关于 spring boot 的目录详解和配置文件

目录 配置文件 spring boot 的配置文件有两种格式&#xff0c;分别是 properties 和 yml&#xff08;yaml&#xff09;。这两种格式的配置文件是可以同时存在的&#xff0c;此时会以 properties 的文件为主&#xff0c;但一般都是使用同一种格式的。 格式 properties 语法格…

36. 【Java教程】输入输出流

本小节将会介绍基本输入输出的 Java 标准类&#xff0c;通过本小节的学习&#xff0c;你将了解到什么是输入和输入&#xff0c;什么是流&#xff1b;输入输出流的应用场景&#xff0c;File类的使用&#xff0c;什么是文件&#xff0c;Java 提供的输入输出流相关 API 等内容。 1…

eNSP学习——OSPF的DR与BDR

目录 相关命令 原理概述 实验内容 实验目的 实验拓扑 实验编址 实验步骤 1、基本配置 2、搭建基本的OSPF网络 3、查看默认情况下的DR/BDR状态 4、根据现网需求影响DR/BDR选举 需要eNSP各种配置命令的点击链接自取&#xff1a;华为&#xff45;NSP各种设备配置命令大…

小白级教程—安装Ubuntu 20.04 LTS服务器

下载 本教程将使用20.04版进行教学 由于官方速度可能有点慢&#xff0c;可以下方的使用清华镜像下载 https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/ 点击20.24版本 选择 ubuntu-20.04.6-live-server-amd64.iso 新建虚拟机 下载好后 我们使用 VMware 打开它 这里选…

数组的详细介绍

数组是一组相同类型元素的集合&#xff0c;也就是说&#xff1a;数组至少包含两个及以上的元素&#xff0c;且元素类型相同。 数组包括一维数组和多维数组&#xff0c;其中二维数组最常见。下面我们一一介绍。 一维数组&#xff1a; 格式&#xff1a;type name [常量值]&…

2024开放式耳机怎么买才好?这里可以教你六招!

有不少人都在说“开放式蓝牙耳机无音质”&#xff0c;大多数的购买者往往既贪恋蓝牙耳机的便携性&#xff0c;又想要有线耳机的Hifi快感&#xff0c;对于我们来说最重要的就是确定预算和需求&#xff0c;这样才能定位到最适合自己的开放式蓝牙耳机。这么多年零零总总听下来的蓝…

【python】成功解决“ModuleNotFoundError: No module named ‘IPython’”错误的全面指南

成功解决“ModuleNotFoundError: No module named IPython’”错误的全面指南 一、引言 在Python编程中&#xff0c;ModuleNotFoundError是一种常见的错误类型&#xff0c;它通常表明Python解释器无法找到你试图导入的模块。特别是当你遇到“ModuleNotFoundError: No module…

求助!什么软件可以人声分离?手机上可以进行人声分离操作吗?

在数字时代&#xff0c;音频处理变得越来越重要&#xff0c;而人声分离技术则是其中的一项关键技术。很多人可能都有过这样的疑问&#xff1a;什么软件可以实现人声分离&#xff1f;手机上能否进行人声分离操作&#xff1f;今天&#xff0c;我们就来为大家解答这些问题&#xf…

MySql学习(一)——MySQL概述之MySQL的启动

文章目录 一、MySQl概述1.1 启动MySQL1.2 客户端连接1.3 关系型数据库1.4 总结 一、MySQl概述 数据库&#xff1a;存储数据的仓库&#xff0c;数据是有组织的进行存储&#xff0c;简称为&#xff08;DB&#xff09;数据库管理系统&#xff1a;操纵和管理数据库的大型软件&…

微型计算机公司 Raspberry Pi 也开始涉足人工智能领域,计划出售AI芯片

Raspberry Pi 与 Hailo 合作&#xff0c;为其微型计算机提供可选的 AI 插件。 随着AI热潮的持续&#xff0c;就连微型计算机公司Raspberry Pi也计划出售AI芯片。它与 Raspberry Pi 的相机软件集成&#xff0c;可以在微型计算机上本地运行聊天机器人等基于人工智能的应用程序。…

Maven实战: 创建自定义archetype

在手动创建SpringBoot应用中&#xff0c;我们讲过手动创建SpringBoot工程是比较麻烦的&#xff0c;尤其是公司内部不有自定义扩展和集成的情况下。利用Maven的archetype:generate能基于项目模板生成功能&#xff0c;自定义模板能让整个创建过程自动化&#xff0c;这样既能大大降…

【UML用户指南】-07-对基本结构建模-公共机制

目录 1、术语和概念 1.1、注解&#xff08;note&#xff09; 1.2、修饰 1.3、衍型 1.4、标记值 1.5、约束 1.6、标准元素 1.7、外廓&#xff08;profile&#xff09; 2、对新特性建模 3、对新语义建模 注解 &#xff08;note&#xff09;是附加在元素或元素集上用来表…

ICLR24大模型提示(2/11) | BatchPrompt:多样本批量提示事半功倍

【摘要】由于大型语言模型 (LLM) 的 token 限制不断增加&#xff0c;使得长上下文成为输入&#xff0c;使用单个数据样本进行提示可能不再是一种有效的方式。提高效率的一个直接策略是在 token 限制内对数据进行批处理&#xff08;例如&#xff0c;gpt-3.5-turbo 为 8k&#xf…

Python08 循环

循环1. while2. for循环控制1.back 退出当前循环2.continue 结束本次继续下次循环 i 0 while i < 10:print(f我正在学习python {i})i1 #循环增量 print(while 结束)while True:print(f我正在学习python {i})if i > 20:break #退出循环i1 #循环增量 print(while2 结束)# …

【Python机器学习】无监督学习——不同类型的预处理

之前学习过&#xff0c;一些算法&#xff08;比如神经网络和SVM&#xff09;对数据缩放非常敏感。因此&#xff0c;通常的做法是对特征进行调节&#xff0c;使数据更适合于这些算法。通常来说&#xff0c;这是对数据的一种简单的按照特征的缩放和移动。举例&#xff1a; impor…

【python】成功解决“ModuleNotFoundError: No module named ‘graphviz’”错误的全面指南

成功解决“ModuleNotFoundError: No module named ‘graphviz’”错误的全面指南 一、引言 在Python编程中&#xff0c;当尝试导入一个不存在的模块时&#xff0c;你会遇到ModuleNotFoundError错误。当你看到“ModuleNotFoundError: No module named ‘graphviz’”这样的错…

vue无需引入第三方, 将web页面内容直接下载为docx

vue无需引入第三方&#xff0c; 将web页面内容直接下载为docx 将web页面内容重绘 html &#xff0c;通过 a 标签直接下载 通过写行内样式&#xff0c;控制docx中的文字图效果 let echHtmlWithIf ;if (this.chartImg.length) {if (this.exceed10Min) {echHtmlWithIf <div…