Vite+Vue3+TS 引入使用Cesium.js

申请 Cesium Token

进入Cesium 注册账号

cesium

离谱的是 E宝 (Epic) 居然可以快捷登录?!

登录后点击导航栏的 Access Token 再右侧即可看到默认Token

安装&引入

# Cesium pnpm
pnpm install cesium# 如果项目同时存在Three.js 需避免使用pnpm Three.js对pnpm + ts的组合并不友好
npm i cesium

依赖包安装完毕后 需要在 public 文件夹内创建一个引用文件夹 这里命名为libs

将 node_modules / cesium / Build / Cesium 中的 Assets、ThirdParty、Widgets、Workers 引入到刚刚创建好的libs文件夹内

public/
│
├── libs/
│   ├── Assets
│   └── ThirdParty
│   └── Widgets
│   └── Workers

在main.ts中 引入

// 引入cesium
import { Ion } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
Ion.defaultAccessToken = "第一步申请的Access Token"
window.CESIUM_BASE_URL = '/libs';

组件使用

注意
当浏览器报如下错误时 应当把代码中 infoBox 参数修改为 false ,这里默认为false
Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

<template><!-- 作为cesium的容器 --><div class="conter" ref="conter"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as Cesium from "cesium";// 获取cesium元素
const conter = ref();
onMounted(() => {// 判断是否获取到元素if (conter) {// 初始化cesium场景const viewer = new Cesium.Viewer(conter.value, {infoBox: false,});// 打印创建的viewer在控制台中console.log(viewer);}
});
</script><style lang="scss" scoped>
// 给容器一个宽高 以16/9展示
.conter {width: 70%;aspect-ratio: 16/9;
}
</style>

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

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

相关文章

正则表达式基础学习

有小伙伴反馈正则表达式太难学了&#xff0c;本人通过尝试从全新的8个维度去学习正则表达式&#xff0c;希望对大家有所帮助 更多学习资源点我获取 1. 普通字符 普通字符正则表达式直接些&#xff0c;比如 正则是 get&#xff0c;那么匹配就是get&#xff0c;还有一些符号&am…

【项目管理】整合管理

一、管理基础 1、项目整合管理由项目经理负责&#xff0c;项目经理负责整合所有其他知识领域的成果&#xff0c;并掌握项目总体情况。项目整合管理的责任不能被授权或转移&#xff0c;项目经理必须对整个项目承担最终责任。整合是项目经理的一项关键技能。执行项目整合时项目经…

java学习_数组

数组的储存原理 java内存分配数组名.length动态初始化数组的初始化 静态初始化 数组的长度eg. b.应用举例 c.在java中多个数组之间是可以相互赋值的。 eg. int []arr2 {1,2,3,4,5,6,7} int [] arr1arr2; 数组案例&#xff1a; 数组的初始化数组的访问数组的遍历 importjava.…

AIGC项目——Meta:根据对话音频生成带动作和手势的3d逼真数字人

From Audio to Photoreal Embodiment: Synthesizing Humans in Conversations From Audio to Photoreal Embodiment:Synthesizing Humans in Conversations 从二元对话的音频中&#xff0c;我们生成相应的逼真的面部、身体和手势。 概括性:角色是由作者的声音驱动的(而不是模…

Python Web 自动化测试实战(超详细)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 手工测试的占重比例达到了70%&#xff0c;相对开发来说&#xf…

SpringBoot 配置类解析

全局流程解析 配置类解析入口 postProcessBeanDefinitionRegistry逻辑 processConfigBeanDefinitions逻辑 执行逻辑解析 执行入口 ConfigurationClassPostProcessor.processConfigBeanDefinitions()方法中的do while循环体中 循环体逻辑 parse方法调用链 doProcessConfigurat…

刷力扣题过程中发现的不熟的函数

C中不熟的函数 1.memset() 头文件&#xff1a;<string.h> void *memset(void *s,int c,unsigned long n); 为指针变量s所指的前n个字节的内存单元填充给定的int型数值c 如&#xff1a; int a[10]; memset(a,0,sizeof(a)); //将数组a中的数全部赋值为02.sort() &#…

代码随想录day12 Java版

今天解决队列和栈的题&#xff0c;期待后面狠狠搞二叉树&#xff08;之前面试被刺了TT) 1047. 删除字符串中的所有相邻重复项 这个题目跟前面的匹配括号思路一模一样&#xff0c;入栈后消消乐即可 代码实现的时候发现容器类使用toString后就是包含[]的数组&#xff0c;所以需…

STM32——看门狗

STM32——看门狗 1.独立看门狗IWDG 独立看门狗介绍 什么是看门狗&#xff1f; 在由单片机构成的微型计算机系统中&#xff0c;由于单片机的工作常常会受到来自外界电磁场的干扰&#xff0c;造成程序的跑飞&#xff0c;而陷入死循环&#xff0c;程序的正常运行被打断&#x…

2023IT监控运维管理行业年度报告

随着信息技术的快速发展&#xff0c;IT监控运维管理软件在各行各业的应用越来越广泛。LinkSLA智能运维管家作为IT监控运维管理领域的优势品牌&#xff0c;深入洞察行业发展趋势&#xff0c;致力于为客户提供高效、稳定、安全的IT监控解决方案。 根据Gartner和艾瑞数据曾预测&a…

相片修复框架-GFPGAN

一 GFPGAN 介绍 GFPGAN 是一个由腾讯 ARC 团队开发的用于人脸图像生成和优化的 GAN 模型。在github可以找到开源的代码&#xff0c;它由两个主要模块组成&#xff1a; 退化移除模块 (U-Net)&#xff1a;用于从低分辨率、低质量的人脸图像中恢复出高质量的人脸图像。 生成式脸部…

SpringBoot自定义全局事务

1.说明 关于EnableTransactionManagement注解&#xff0c;可加可不加&#xff0c;加注解保证规范性。 2.核心代码 /** * author: wangning * date: 2024/1/23 16:19 */ Aspect Configuration ConditionalOnClass({TransactionManager.class, TransactionFactory.class}) pub…

由《幻兽帕鲁》私服漏洞引发的攻击面思考

《幻兽帕鲁》私服意外丢档 当了一天的帕鲁&#xff0c;回家开机抓帕鲁的时候发现服务器无法连接。运维工具看了下系统负载发现 CPU 已经跑满。 故障排查 登录服务器进行排查发现存在可疑的 docker 进程。 经过一番艰苦的溯源&#xff0c;终于在命令行历史中发现了端倪 攻击…

【极数系列】Flink集成DataSource读取Socket请求数据(09)

文章目录 01 引言02 简介概述03 基于socket套接字读取数据3.1 从套接字读取。元素可以由分隔符分隔。3.2 windows安装netcat工具&#xff08;1&#xff09;下载netcat工具&#xff08;2&#xff09;安装部署&#xff08;3&#xff09;启动socket端口监听 04 源码实战demo4.1 po…

模板(c++)part1

目录 1.模板 1.1模板基本使用 1.2.模板实例化 1.3函数模板的匹配规则 2.类模板 !!!!!!!目前更新到这&#xff0c;后面再更新模板的其他内容&#xff0c;本文章只是第一部分&#xff0c;第二部分等后面我再写!!!! 1模板 1.1模板基本使用 template<typename T> void …

前端实现token的无感刷新--VUE

token刷新的方案 方案一&#xff1a;后端返回过期时间&#xff0c;前端判断token过期时间&#xff0c;去调用刷新token的接口 缺点&#xff1a;需要后端提供一个token过期时间的字段&#xff1b;使用本地时间判断&#xff0c;若本地时间被修改&#xff0c;本地时间比服务…

【解决】Unity 工程无法正常打开而崩溃问题

开发平台&#xff1a;Unity 2022.3.17f1c1 一、问题描述 访问 Unity 工程等待 Open Projet&#xff08;busy for 时间&#xff09;&#xff0c;出现崩溃、闪退等情况&#xff0c;导致无法正常进入Unity编辑页面。 二、问题分析 笔者在 URP 渲染管线下处理 Obi Fluid 流体插件 D…

Docker本地部署Firefox浏览器并结合内网穿透公网访问

文章目录 1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox Firefox是一款免费开源的网页浏览器&#xff0c;由Mozilla基金会开发和维护。它是第一个成功挑战微软Internet Explorer浏…

尝试搭建域

使用window 7 作为dmz 主机 server_2008 作为 预控 前提两台主机都在同一个LAN 下&#xff08;设置一个LAN 区域&#xff09;&#xff0c;同样防火墙关闭状态 首先搞定server 2008 中的域 1. 在计算机属性中选择更改设置中将主机名修改一下&#xff1a; 2. 在server 2008 中…

echarts 柱状图数据过多时自动滚动

当我们柱状图中X轴数据太多的时候&#xff0c;会自动把柱形的宽度挤的很细&#xff0c;带来的交互非常不好&#xff0c;我们可以用dataZoom属性来解决 简易的版本&#xff0c;横向滚动。 option.dataZoom [{type: "slider",show: true,startValue: 0, //数据窗口范…