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,一经查实,立即删除!

相关文章

简单方便的录屏软件kazam

Kazam 是一个简单的屏幕录制程序&#xff0c;它将捕获屏幕内容并录制一个视频文件&#xff0c;该文件可以由任何支持 VP8/WebM 视频格式的视频播放器播放。 GitHub - henrywoo/kazam: Kazam - Linux Desktop Screen Recorder and Broadcaster 安装 Linux下安装 sudo apt in…

flutter 单列选择器

引入 flutter_pickers: ^2.1.9 import package:flutter_pickers/pickers.dart; import package:flutter_pickers/style/default_style.dart; import package:flutter_pickers/style/picker_style.dart;List<String> _numberList [99,98,97,96,95,94,93,92,91,90,89,88,…

pstree 进程树

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

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

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

Linux 一点查询资料

Linux 一点查询资料 Linux101 Linux入门教程 鸟哥的Linux私房菜 Harley Hahn’s Guide to Unix and Linux 文件管理 - cd, pwd, mkdir, rmdir, ls, cp, rm, mv, tar 文件检索 - cat, more, less, head, tail, file, find 输入输出控制 - 重定向, 管道, tee, xargs 文本处理 -…

他转行软件测试,一周已经拿了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;我会有一种…

2024年千万不要错过的创业项目,绝对可以改变你的生活!

现在的年轻人都比较喜欢创业&#xff0c;主要是因为这几年大环境不好。 钱不好挣了&#xff0c;打工挣的辛苦费无法满足日常的生活需求。 不仅要忍受无休止的加班&#xff0c;还要随时担心自己会不会被辞退。 所以创业就成了很多人想要改变现状最好的方法了。 其实很多人想…

Thinkphp+workman+redis实现多进程异步任务处理

前言 PHP本身并不直接支持多线程编程&#xff0c;因为PHP的设计初衷是作为一个脚本语言&#xff0c;主要面向的是Web开发。不过我们可以使用一些扩展和库来实现多进程的功能&#xff0c;提高系统性能&#xff0c;比如workerman和swoole。通过多进程异步执行任务。 安装workman…

Java-常见面试题收集(三)

八 集合 1 List,Set,Map 是否继承自 Collection 接口 List,Set 接口继承于 Collection 接口   Map 没有继承于 Collection 接口 2 List,Set,Map 三者的区别 ① List、Set 都是继承自 Collection 接口&#xff0c;Map 则不是 ② List 特点&#xff1a;元素有放入顺序&#x…

【C#】Conventions(惯例)最佳实践和准则

在C#中,Conventions(惯例)是指编写代码时的一套最佳实践和准则。这些惯例旨在提高代码的可读性、一致性和可维护性。虽然这些惯例不是语言的强制规则,但遵循它们可以使你的代码更加清晰和专业。 以下是一些常见的C#编码惯例: 命名约定: 使用有意义的、描述性的名称。类名和公…

P8711 [蓝桥杯 2020 省 B1] 整除序列 存疑解决篇 Python

[蓝桥杯 2020 省 B1] 整除序列 题目描述 有一个序列&#xff0c;序列的第一个数是 n n n&#xff0c;后面的每个数是前一个数整除 2 2 2&#xff0c;请输出这个序列中值为正数的项。 输入格式 输入一行包含一个整数 n n n。 输出格式 输出一行&#xff0c;包含多个整数…

Zinx框架的高级用法

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

Mysql2-sql语句

一、MySQL数据库表操作 MySQL表的基本概念 在windows中有个程序叫做excel. 而Excel文件中存在了如sheet1、sheet2、sheet3的表, 所有的sheet都存储在这个Excel文件中, 在某个sheet中有相应的数据. 回到数据库和表的关系上来说, 这个Excel文件就是一个数据库, 所有的sheet就是…

基于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;而且对于计算能力要求也比较高。初学者肯定是不…

C语言经典面试题目(二十六)

1、解释一下C语言中的函数原型及其作用。 函数原型是指在函数定义之前声明函数的参数类型、返回类型和函数名称的一种声明方式。函数原型的作用包括&#xff1a; 编译器检查&#xff1a;函数原型能够告诉编译器函数的返回类型和参数类型&#xff0c;从而能够在编译阶段检查函…