vue3中使用cesium

vue3中使用cesium

Cesium是一个开源的JavaScript库,专门用于创建3D地球和2D地图的Web应用程序。它提供了丰富的功能和工具,使得开发人员能够轻松地构建出高质量的地理空间可视化应用。

1. 安装cesium包

npm install cesium

2. 复制node_modules中的Cesium至public静态资源中

在这里插入图片描述

3. main.ts中引入cesium

import "cesium/Build/Cesium/Widgets/widgets.css";import * as Cesium from "cesium";(window as any).CESIUM_BASE_URL = "/Cesium"; Cesium.Ion.defaultAccessToken = "你的token";  // 注册地址https://cesium.com/ion/signin/tokens

4. 编写页面

<script setup lang="ts">
import { onMounted } from "vue";
import * as Cesium from "cesium";onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer1");
});
</script>
<template><div id="cesiumContainer1" />
</template>
<style lang="less" scoped>
#cesiumContainer1 {width: 100%;height: 100%;
}
</style>

此时页面效果
在这里插入图片描述

5.cesium相关配置, 具体可查看官方文档。

viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "xxx", //换成自己的地址maximumLevel: 9,}),animation: false, // 动画控件shouldAnimate: false, // 初始时刻运动homeButton: false, // Home按钮fullscreenButton: false, // 全屏按钮baseLayerPicker: false, // 图层选择控件geocoder: false, // 地名查找控件timeline: false, // 时间线控件shadows: false,navigationHelpButton: false, // 帮助信息控件infoBox: false, // 点击要素之后显示的信息 信息框小部件requestRenderMode: false, // true启用请求渲染模式:更新实体需拖动地图 视图才更新[true 加载完entity后requestRender一下]scene3DOnly: false, // 几何图形以3D模式绘制以节约GPU资源sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式  3d 球maximumRenderTimeChange: 1,sceneModePicker: false, // 切换展示模式控件selectionIndicator: false,// 设置渲染orderIndependentTranslucency: false,contextOptions: {webgl: {alpha: true,},},
});//去除 左下角 版权信息
(viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";// 相机位置
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(120, 48, 25000000),
});const scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;

配置后的页面效果
在这里插入图片描述

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

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

相关文章

pstree 进程树

pstree -aup a是所有all u是用户user p是pid进程号

排序算法:归并排序(非递归)

文章目录 一、非递归思路二、代码演示 先赞后看&#xff0c;养成习惯&#xff01;&#xff01;&#xff01;^ _ ^<3 ❤️ ❤️ ❤️ 码字不易&#xff0c;大家的支持就是我坚持下去的动力。点赞后不要忘了关注我哦&#xff01; 所属专栏:排序算法 一、非递归思路 步骤如下&…

他转行软件测试,一周已经拿了3个offer了,软件测试面试...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 自我介绍 自我介…

Linux系统资源管理

Linux系统资源命令 在Linux中查看系统资源常用命令有哪些 在Linux中&#xff0c;系统资源是指计算机硬件、软件和网络设备等可以利用的一切物质和能量。Linux中的系统资源包括&#xff1a; CPU&#xff08;中央处理器&#xff09;&#xff1a;用于处理计算机中的指令和数据的…

蓝桥练习题总结(一)字母图形、完美的代价、01串、序列求和

目录 一、字母图形 二、完美的代价 三、01字串 四、序列求和 一、字母图形 问题描述 利用字母可以组成一些美丽的图形&#xff0c;下面给出了一个例子&#xff1a; ABCDEFG BABCDEF CBABCDE DCBABCD EDCBABC 这是一个5行7列的图形&#xff0c;请找出这个图形的规律&#xff…

Vscode中关于Java的一些问题

前言 在使用Vscode的时候&#xff0c;总是会有这么一种感觉&#xff1a;有时得这样&#xff0c;有时得那样&#xff0c;这让我甚是困惑&#xff0c;于是写下来这篇解答文章 为什么java文件有时候会有class文件&#xff0c;有时候没有 在编写Java代码时&#xff0c;我会有一种…

Zinx框架的高级用法

一、使用框架提供的实用类 zinx框架已经提供了常用的IO通道类-TCP。 阅读Tcp相关类的使用文档&#xff0c;将之前的3个案例用TCP的方式实现。 步骤&#xff1a; 创建Tcp数据通道类继承ZinxTcpData&#xff0c;重写GetInputNextStage函数&#xff0c;内容跟之前标准输入通道类…

基于SpringBoot和Vue的大学生租房系统的设计与实现

今天要和大家聊的是一款今天要和大家聊的是一款基于SpringBoot和Vue的大学生租房系统的设计与实现。 &#xff01;&#xff01;&#xff01; 有需要的小伙伴可以通过文章末尾名片咨询我哦&#xff01;&#xff01;&#xff01; &#x1f495;&#x1f495;作者&#xff1a;李同…

【C++】弥补C语言的不足(②有默认参数的函数)

&#x1f33b;缺省参数 我们先来看一个简单地例子&#xff0c;对于在函数的定义中三个形参都给定默认值&#xff1a; #include <iostream> using namespace std; void fun(int a 10, int b 20, int c 30) {cout << "a " << a << endl;…

【考研数学】跟张宇,一看就会,一做就废,怎么办?

刚开始考研的时候都是这种情况&#xff0c;建议降低习题难度 刚开始就做1000题的都是勇士 1000题适合在强化阶段做&#xff0c;因为1000题中的题目&#xff0c;综合度高&#xff0c;需要做题者掌握比较多的解题技巧&#xff0c;而且对于计算能力要求也比较高。初学者肯定是不…

【OJ】动归练习一

个人主页 &#xff1a; zxctscl 如有转载请先通知 题目 1. 前言2. 1137第 N 个泰波那契数2.1 分析2.2 代码 3. 面试题 08.01. 三步问题3.1 分析3.2 代码 4. 746使用最小花费爬楼梯4.1 分析4.1.1 以i位置为终点4.1.2 以i位置为起点 4.2 代码4.2.1以i位置为终点4.2.2以i位置为起点…

深浅拷贝与初始化列表

一、深拷贝与浅拷贝 浅拷贝&#xff1a;简单的赋值拷贝操作 深拷贝&#xff1a;在堆区重新申请空间 由于栈上的数据先进后出&#xff0c;所以p2后释放&#xff0c;在执行析构代码时&#xff0c;新建的堆区数据就被释放&#xff0c;再当p1进行释放时&#xff0c;由于堆区数据…

【leetcode】67.二进制求和

前言&#xff1a;剑指offer刷题系列 问题&#xff1a; 给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 示例&#xff1a; 输入&#xff1a;a "1010", b "1011" 输出&#xff1a;"10101"思路1&#xff1a; …

一命通关广度优先遍历

前言 在这篇文章之前&#xff0c;已对非线性结构遍历的另一种方法——深度优先遍历进行了讲解&#xff0c;其中很多概念词都是共用的。为了更好的阅读体验&#xff0c;最好先在掌握或起码了解dfs的基础上&#xff0c;再来阅读本文章&#xff0c;否则因为会有很多概念词看不明白…

如何修复WordPress网站媒体库上传文件失败的问题

公司最近推出了一系列新产品&#xff0c;为了更新网站的视频和图片&#xff0c;我们需要将它们上传至网站媒体库。然而&#xff0c;在上传视频时&#xff0c;我们却遇到了一些问题。系统提示说&#xff0c;我们尝试上传的视频文件大小超出了站点的最大上传限制。尽管我们的视频…

计算机网络:性能指标

计算机网络&#xff1a;性能指标 速率带宽吞吐量时延时延带宽积往返时间利用率丢包率 本博客介绍计算机网络的性能指标&#xff0c;我们可以从不同的方面来度量计算机网络的性能。常用的计算机网络性能指标有以下 8 个&#xff0c;他们是&#xff1a;速率、带宽、吞吐量、时延、…

NVIDIA NCCL 源码学习(十三)- IB SHARP

背景 之前我们看到了基于ring和tree的两种allreduce算法&#xff0c;对于ring allreduce&#xff0c;一块数据在reduce scatter阶段需要经过所有的rank&#xff0c;allgather阶段又需要经过所有rank&#xff1b;对于tree allreduce&#xff0c;一块数据数据在reduce阶段要上行…

智慧交通运维合集:基于图扑数字孪生技术的解决方案

城市交通作为城市与区域交通体系的核心&#xff0c;其完善程度和发展水平是评价城市现代化水准的关键指标之一。 城市交通数字孪生技术正在成为城市交通管理的关键工具&#xff0c;支持系统的高效运行和安全保障。随着互联网、大数据和人工智能技术的进步&#xff0c;城市交通…

LLM—Transformer作用及信息流

一、Transformer的作用 Transformer架构的精髓在于其创新性地采用了编码器与解码器的堆叠设计&#xff0c;这一设计巧妙地融合了多头自注意力机制&#xff08;Multi-Head Attention&#xff09;和位置前馈网络&#xff08;Position-wise Feed Forward Network&#xff09;两大核…

【Memcached】springBoot 集成 memcached 两万字长文带你认识memcached

目录 一、 memcached 介绍1.1 简介1.2 特性1.3 优点1.4 缺点1.5 实现原理1.6 适用场景1.7 不适用场景1.8 与 Redis 比较相同点1.9 与 Redis 比较不同点 二、对 java 的支持2.1 Memcached-java-client 客户端2.2 Spymemcached 客户端2.3 XMemcached 客户端 三、下载安装3.1 wind…