当前位置: 首页 > news >正文

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;

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

相关文章:

vue3中使用cesium

vue3中使用cesium Cesium是一个开源的JavaScript库&#xff0c;专门用于创建3D地球和2D地图的Web应用程序。它提供了丰富的功能和工具&#xff0c;使得开发人员能够轻松地构建出高质量的地理空间可视化应用。 1. 安装cesium包 npm install cesium2. 复制node_modules中的Ces…...

arduino ide 开发esp8266注意事项

1.引脚序列号必须是常量来定义&#xff0c;否则会无限重启。 #define p2 2 const int Pin2p2; pinMode(Pin2, OUTPUT); 2.关于wifi的模式&#xff0c;ap,sta&#xff0c;apsta三种模式的初始化必须放在void set_up(){}这个函数里&#xff0c;不能额外搞个自定义函数&#xf…...

RTC协议与算法基础 - RTP/RTCP

首先&#xff0c;需要说明下&#xff0c;webrtc的核心音视频传输是通过RTP/RTCP协议实现的&#xff0c;源码位于src/modules/rtp_rtcp目录下&#xff1a; 下面让我们对相关的内容基础进行简要分析与说明&#xff1a; 一、TCP与UDP协议 1.1、TCP协议 TCP为了实现数据传输的可…...

c语言游戏实战(8):飞机大作战

前言&#xff1a; 飞机大作战游戏是一种非常受欢迎的射击类游戏&#xff0c;玩家需要控制一架战斗机在屏幕上移动&#xff0c;击落敌机以获得分数。本游戏使用C语言编写&#xff0c;旨在帮助初学者了解游戏开发的基本概念和技巧。 在开始编写代码之前&#xff0c;我们需要先了…...

docker 部署k8s相关命令操作

1.安装docket 可参考其他网站 2.docker ps 3.docker images 4.docker ps -all 5.docker pull openjdk:8 安装jdk8 6.docker load < jdk.tar 自己有jdk8 7.打包jar服务 &#xff0c;需要依赖一个打包文件Dockerfile&#xff0c;如下 文件内容如下 FROM openjdk:8u275-j…...

使用Tesseract识别中文 并提高精度

1. 使用中文训练数据 在使用pytesseract进行中文文本识别时&#xff0c;确保安装了中文的训练数据文件。在Tesseract的安装目录下的tessdata文件夹中应包含一个名为chi_sim.traineddata&#xff08;简体中文&#xff09;或chi_tra.traineddata&#xff08;繁体中文&#xff09…...

基于Jenkins + Argo 实现多集群的持续交付

作者&#xff1a;周靖峰&#xff0c;青云科技容器顾问&#xff0c;云原生爱好者&#xff0c;目前专注于 DevOps&#xff0c;云原生领域技术涉及 Kubernetes、KubeSphere、Argo。 前文概述 前面我们已经掌握了如何通过 Jenkins Argo CD 的方式实现单集群的持续交付&#xff0c…...

关于javascript数字精度丢失的解决办法

分析原因 众所周知&#xff0c;在JavaScript中计算两个十进制数的和&#xff0c;有时候会出现令人惊讶的结果&#xff0c;主要原因是计算机将数据存储为二进制所引起的&#xff0c;所以这并不是javascript存在的缺陷&#xff0c;而在其他语言中也有类似的问题。 例如下面的例子…...

每日一题 第二十一期 洛谷 组合的输出

组合的输出 题目描述 排列与组合是常用的数学方法&#xff0c;其中组合就是从 n n n 个元素中抽出 r r r 个元素&#xff08;不分顺序且 r ≤ n r \le n r≤n&#xff09;&#xff0c;我们可以简单地将 n n n 个元素理解为自然数 1 , 2 , … , n 1,2,\dots,n 1,2,…,n&a…...

JavaScript 面试题

问题 1 // 请解释什么是 JavaScript 中的原型继承&#xff0c;以及原型链的概念答案 1 原型继承是 JavaScript 中实现继承的一种方式&#xff0c;每个对象都有一个指向另一个对象的引用&#xff0c;这个对象就是原型。当访问对象的属性或方法时&#xff0c;如果对象本身没有该…...

java输入语句scanner

在Java中&#xff0c;Scanner 类是 java.util 包中的一个类&#xff0c;它用于获取用户的输入。要使用 Scanner 类&#xff0c;你首先需要导入这个类&#xff0c;然后创建一个 Scanner 对象&#xff0c;通常命名为 scanner。你可以使用这个对象来读取用户从键盘输入的数据。 以…...

Python从入门到精通秘籍十一

一、Python之自定义模块并导入 在Python中&#xff0c;我们可以自定义模块并将其导入到其他Python程序中使用。自定义模块可以包含函数、类、常量等&#xff0c;便于组织和重用代码。 下面是使用Python代码详细讲解自定义模块的创建和导入的例子&#xff1a; 假设我们有两个…...

WRF模型教程(ububtu系统)-WPS(WRF Pre-Processing System)概述

一、WPS简介 WRF 预处理系统 (WRF Pre-Processing System&#xff0c;WPS) &#xff0c;集成了基于Fortran和C编写的程序&#xff0c;这些程序主要用于处理输入到real.exe的数据。WPS主要有三个程序和一些辅助程序。 二、各程序介绍 主要的程序为geogrid.exe、ungrib.exe、met…...

C语言向C++过渡的基础知识(一)

目录 C关键字 C命名空间 命名空间的介绍 域作用限定符 命名空间的使用 C的输入以及输出 C中的缺省参数 缺省参数的介绍 缺省参数的使用 缺省参数的分类 全缺省参数 半缺省参数 C关键字 在C中&#xff0c;有63个关键字&#xff0c;而C语言只有32个关键字 asm do i…...

GEE遥感云大数据林业应用典型案例及GPT模型应用

近年来遥感技术得到了突飞猛进的发展&#xff0c;航天、航空、临近空间等多遥感平台不断增加&#xff0c;数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量猛增&#xff0c;遥感数据已经越来越具有大数据特征。遥感大数据的出现为相关研究提供了前所未有的机遇&#xf…...

macOS Ventura 13.6.5 (22G621) Boot ISO 原版可引导镜像下载

macOS Ventura 13.6.5 (22G621) Boot ISO 原版可引导镜像下载 3 月 8 日凌晨&#xff0c;macOS Sonoma 14.4 发布&#xff0c;同时带来了 macOS Ventru 13.6.5 和 macOS Monterey 12.7.4 安全更新。 macOS Ventura 13.6 及更新版本&#xff0c;如无特殊说明皆为安全更新&…...

数据结构面试常见问题之Insert or Merge

&#x1f600;前言 本文将讨论如何区分插入排序和归并排序两种排序算法。我们将通过判断序列的有序性来确定使用哪种算法进行排序。具体而言&#xff0c;我们将介绍判断插入排序和归并排序的方法&#xff0c;并讨论最小和最大的能区分两种算法的序列长度。 &#x1f3e0;个人主…...

perl 用 XML::LibXML 解析 Freeplane.mm文件,XML文件

Perl 官网 www.cpan.org 从 https://strawberryperl.com/ 下载网速太慢了 建议从 https://download.csdn.net/download/qq_36286161/87892419 下载 strawberry-perl-5.32.1.1-64bit.zip 约105MB 解压后安装.msi&#xff0c;装完后有520MB&#xff0c;建议安装在D:盘 在云计算…...

Spring Cloud Alibaba微服务从入门到进阶(七)(服务容错-Sentinel)

雪崩效应 我们把基础服务故障&#xff0c;导致上层服务故障&#xff0c;并且这个故障不断放大的过程&#xff0c;成为雪崩效应。 雪崩效应&#xff0c;往往是因为服务没有做好容错造成的。 微服务常见容错方案 仓壁模式 比如让controller有自己独立的线程池&#xff0c;线程池满…...

Arduino RP2040 + SSD1306 I2C OLED +LittleFS存储GBK字库实现中文显示

Arduino RP2040 + SSD1306 I2C OLED +LittleFS存储GBK字库实现中文显示 📌LittleFS插件安装,可以参考《Arduino RP2040 LittleFS的使用介绍》🎈相关内容《Arduino esp8266 软件I2C SSD1306 +LittleFS存储GBK字库实现中文显示》🔖基于Earle F. Philhower, III的核心固件开…...

DeepSeek-OCR-2参数详解:DeepEncoder V2架构与vLLM推理优化实践

DeepSeek-OCR-2参数详解&#xff1a;DeepEncoder V2架构与vLLM推理优化实践 1. 引言&#xff1a;重新定义OCR的智能视觉理解 如果你还在用传统的OCR工具&#xff0c;每次处理复杂文档时都要忍受识别不准、版面混乱的烦恼&#xff0c;那么今天介绍的DeepSeek-OCR-2可能会彻底改…...

面试官:聊聊Redis中RDBAOF持久化原理!

Redis 中数据的持久化前言我们知道 Redis 是内存数据库&#xff0c;所有操作都在内存上完成。内存的话&#xff0c;服务器断电&#xff0c;内存上面的数据就会丢失了。这个问题显然是需要解决的。Redis 中引入了持久化来避免数据的丢失&#xff0c;主要有两种持久化的方式 RDB …...

C# 实现Workstation相关功能

以下是实现Workstation相关功能的C#代码示例&#xff0c;包含基础框架和关键功能模块&#xff1a;基础类结构public class WorkstationManager {private List<Workstation> _workstations new List<Workstation>();public void AddWorkstation(string name, strin…...

保姆级教程:PVE/Proxmox VE拔掉独显后网络失联?一招搞定网卡名绑定(Debian系通用)

无显卡环境下PVE服务器网络修复实战指南 当一台原本配备独立显卡的Proxmox VE服务器突然移除了显卡&#xff0c;许多运维人员会遭遇一个令人困惑的现象——网络连接完全中断。这种情况在家庭实验室和小型企业环境中尤为常见&#xff0c;用户往往为了节能或简化硬件配置而选择移…...

C语言属于什么软件

c语言不属于任何软件&#xff01; C语言是一门通用计算机编程语言&#xff0c;应用广泛。C语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。 特有特点 C语言是一个有结构化程序设计、具有变量作用…...

大模型窗口越来越大,为什么 Agent 还是总会失控?

前端出身&#xff0c;跨进智能体这个坑已经有一段时间了。写这个系列&#xff0c;是想把自己摸索的过程留下来&#xff0c;不是教程&#xff0c;是记录。 很多刚开始接触 Agent 的人&#xff0c;都会有一个直觉&#xff1a; 现在模型的上下文窗口不是已经越来越大了吗&#x…...

Python如何计算移动平均值_Pandas实现滚动窗口函数应用

rolling()默认右对齐&#xff0c;前N?1行不足时返回NaN&#xff1b;需中心对齐用centerTrue&#xff1b;时间序列优先用rolling(5D)&#xff1b;min_periods1可首行出值但掩盖稀疏问题&#xff1b;apply()须返回标量&#xff0c;推荐lambda x: x.quantile(0.5)&#xff1b;ski…...

ROS牛耕法全覆盖规划:从算法原理到清洁机器人实战解析

1. ROS牛耕法全覆盖规划算法初探 第一次接触牛耕法&#xff08;Boustrophedon&#xff09;这个词时&#xff0c;我还以为是某种农业机械的控制方法。后来在开发清洁机器人路径规划时才发现&#xff0c;这其实是ROS中最经典的全覆盖路径规划算法之一。想象一下老黄牛在田里来回耕…...

手把手教学:用THE LEATHER ARCHIVE快速生成高级感皮革时尚图片

手把手教学&#xff1a;用THE LEATHER ARCHIVE快速生成高级感皮革时尚图片 关键词&#xff1a;AI时尚设计、皮革穿搭、AI图片生成、时尚杂志风格、一键部署 摘要&#xff1a;本文详细介绍如何使用THE LEATHER ARCHIVE镜像快速生成具有高级感的皮革时尚图片。从环境准备到实际生…...

视频合并工具多合一版使用说明:批量合并视频/自定义命名/片头片尾/转场/硬件加速与并行转码

【视频合并工具多合一版】基于 FFmpeg 实现视频合并与转码&#xff0c;支持拖拽导入、排序、批量合并&#xff08;按文件夹分组&#xff09;、片头片尾、转场效果&#xff08;含“保持原始时长”模式&#xff09;、GPU 硬件加速&#xff08;NVENC/QSV/AMF&#xff09;、并行转码…...