vite+vue集成cesium

 1、创建项目、选择框架vue+js

pnpm create vite demo_cesium

2、进入项目安装依赖 

cd demo_cesium
pnpm install

3、安装cesium及插件 

3、pnpm i cesium vite-plugin-cesium

4、修改vite-config.js 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),cesium()],
})

5、删除style.css,修改App.vue 

<template><div id="cesiumContainer"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {Cesium.Ion.defaultAccessToken = '' //改为自己申请的tokennew Cesium.Viewer('cesiumContainer')   
})
</script>
<style scoped></style>

6、运行 

pnpm dev

 

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

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

相关文章

【笔记】手工部署之linux中开放已安装的mysql与tomcat端口

在需要打包的springboot项目中输入mvn clean package 在target下面获得jar包 进入linux中你想要该jar包存在的位置 将jar包上传至linux中 此时在浏览器中输入linux的ip地址&#xff1a;端口号/mapping路径为404 故&#xff1a; 在linux中另开一个标签页 检查mysql和tomcat已…

js条件引用

在JavaScript中&#xff0c;条件引用模块通常涉及到在运行时根据条件判断来决定是否加载某个模块。这在某些情况下非常有用&#xff0c;比如在不同环境下使用不同的模块&#xff0c;或者在某些特定条件下才需要某个模块的功能。 以下是几种在JavaScript中实现条件引用的方法&a…

Linux内核升级

Background wireguard 内核要求内核版本4.18以上&#xff0c;对于内核版本4.18以下&#xff0c;无法使用WireGuard。内核版本4.18以上、5.6以下&#xff0c;可以通过升级内核的方式支持WireGuard。内核5.6及以上版本已经原生支持WireGuard&#xff0c;可以直接使用原生的WireGu…

【总线】AXI4第六课时:寻址选项深入解析

大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计感兴趣&#xff0c;那你绝对不能错过我们今天的主角——AXI4总线。作为ARM公司AMBA总线家族中的佼佼者&#xff0c;AXI4以其高性能和高度可扩展性&#xff0c;成为了现代电子系统中不可或缺的通信桥梁…

pip的常用命令整理|python入学必备知识

1. 什么是pip? 通俗的说&#xff1a;pip 是 Python 第三方包管理工具&#xff0c;它提供了对Python 包的查找、下载、安装、卸载的功能。Python 3.4以上版本都自带 pip 工具。 2. 查看系统是否安装的pip&#xff1f; 下面这行代码如果没有报错&#xff0c;则证明系统中安装…

设计模式(实战项目)-状态模式

需求背景&#xff1a;存在状态流转的预约单 一.数据库设计 CREATE TABLE appointment (id bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT 主键id,appoint_type int(11) NOT NULL COMMENT 预约类型(0:线下查房...),appoint_user_id bigint(20) NOT NULL COMMENT 预约人…

实现胶囊神经网络,识别手写MNIST数据集,谈谈实现及理解。

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

稀疏数组Java练习代码含IO

是在学习尚硅谷的数据结构与算法Java课程&#xff0c;课后自己凭借思路写的练习代码 首先定义一个稀疏数组类 import java.io.*; import java.util.Objects;public class SparseArray {int sum;//创建原始数组public int[][] createArray(int column, int row){//根据传入数据…

雨量气象站:野外监测的得力助手

在广阔无垠的大自然中&#xff0c;雨量、风力、风向、温湿度以及大气压力等气象数据对于各种应用场景都至关重要。特别是在野外、森林防火、山洪监测等无市电供电的场合&#xff0c;一款高效可靠的监测设备更是不可或缺。雨量气象站正是为了满足这些需求而诞生的户外专用监测站…

C++ STL unique_ptr智能指针源码剖析

由于上一篇博客将shared_ptr,weak_ptr,enable_shared_form_this的源码实现整理了一遍,想着cpp智能指针还差个unique_ptr故写下此篇博客,以供学习 源码剖析 一,模板参数 首先,我们先看unique_ptr的模板参数,第一个参数_TP自是不用说表示对象类型,第二个模板参数定义了unique_p…

FFmpeg视频处理工具安装使用

一、前言 FFmpeg是流行的开源视频处理工具&#xff0c;用于转码、合并、编辑等。以下是安装和使用方法&#xff1a; 二、步骤 1.下载 1.1 ffmpeg下载 官网下载地址 wget https://www.ffmpeg.org/releases/ffmpeg-6.1.1.tar.xz1.2 nasm下载 https://www.nasm.us/pub/nasm/…

Android应用安装过程

Android 系统源码源码-应用安装过程 Android 中应用安装的过程就是解析 AndroidManifest.xml 的过程&#xff0c;系统可以从 Manifest 中得到应用程序的相关信息&#xff0c;比如 Activity、Service、Broadcast Receiver 和 ContentProvider 等。这些工作都是由 PackageManage…

drm core

drm core初始化 /*** drm_sysfs_init - initialize sysfs helpers** This is used to create the DRM class, which is the implicit parent of any* other top-level DRM sysfs objects.** You must call drm_sysfs_destroy() to release the allocated resources.** Return: …

Linux通配符及其在文件搜索和管理中的应用

Linux通配符及其在文件搜索和管理中的应用 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. 了解Linux通配符 在Linux系统中&#xff0c;通配符是一种用于匹…

家政小程序的开发,带动市场快速发展,提高家政服务质量

当下生活水平逐渐提高&#xff0c;也增加了年轻人的工作压力&#xff0c;同时老龄化也在日益增加&#xff0c;使得大众对家政的需求日益提高&#xff0c;能力、服务质量高的家政人员能够有效提高大众的生活幸福指数。 但是&#xff0c;传统的家政服务模式存在着效率低、用户与…

慧翰股份毛利率下滑:股权转让纠纷引关注,研发费用率远弱同行还买楼?

《港湾商业观察》施子夫 6月11日&#xff0c;慧翰微电子股份有限公司&#xff08;以下简称&#xff0c;慧翰股份&#xff09;IPO注册申请获证监会同意&#xff0c;预计公司将很快登陆深交所创业板&#xff0c;保荐机构为广发证券。 从业绩面来看&#xff0c;过去三年&#xf…

基于X86+FPGA+AI的芯片缺陷检测方案

应用场景 随着半导体技术的发展&#xff0c;对芯片的良率要求越来越高。然而集成电路芯片制造工艺复杂&#xff0c;其制造过程中往往产生很多缺陷&#xff0c;因此缺陷检测是集成电路制造过程中的必备工艺。 客户需求 小体积&#xff0c;低功耗 2 x USB,1 x LAN Core-i平台无…

JavaScript——运算符的优先级和结合性

目录 任务描述 相关知识 运算符的优先级 运算符的结合性 编程要求 任务描述 本关任务&#xff1a;我们将给出函数mainJs()的完整代码&#xff0c;要求在函数体内第三句以及第五句中添加适当的括号&#xff0c;实现编程要求里面的要求。 要想完成本关任务&#xff0c;必须…

一点连接千家银行,YonSuite让“银企对账”一键确认

在当今数智化浪潮下&#xff0c;成长型企业面临着前所未有的机遇与挑战。特别是在与银行的对接以及银企对账等方面&#xff0c;传统的手动操作模式已难以满足企业高效、安全的金融管理需求。用友YonSuite作为一款全场景SaaS应用服务&#xff0c;凭借其强大的银企直联功能&#…

AI在线免费视频工具3:声音生视频

1、声音生视频 Noisee&#xff1a;通过声音生成对应视频&#xff0c;可以增加prompt指定生成内容相关视频 https://noisee.ai/create