cesium +vue3 +vite 实现点线面功能

news2024/11/16 19:58:45

第一步:搭建vue3项目

1、npm在相应文件夹下创建

npm create vite@latest

2、选择项目名称
在这里插入图片描述
3、选择vue
在这里插入图片描述
4、选择是否使用typescript 或者JavaScript
5、记得在终端npm install一下就可以启动项目了

第二步:引入cesiumJS

1、npm引入

npm i cesium vite-plugin-cesium vite -D

2、到官网去下载 https://www.cesium.com/ => Platform => CesiumJS;
点击 下载,下载完成后 解压,拷贝 Build 目录下的 Cesium 下的所有内容到项目的 public 目录下即可
在这里插入图片描述
以上两种方式任选一种安装即可

第三步:在vite.config.js里进行配置

在这里插入图片描述

第四步:在App.vue里面进行全局导入 (注:需要id为cesiumContainer的div挂载后再执行Cesium的代码)

在这里插入图片描述

第五步:npm run dev 运行可看到页面所示

在这里插入图片描述

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

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

相关文章

海康Visionmaster-VM2D,VM3D,VM深度学习对电脑配置要求

为确保VM算法平台能正常安装及运行,对PC配置有所要求。 第一:推荐配置: 操作系统:Windows7/10(64位中文操作系统) CPU:Intel Core i7-6700 3.4GHz 或以上(如需使用CPU相关深度学习…

32岁面试字节软件测试岗,想不到居然这么简单......

前段时间有个在小公司干了七八年的朋友离职了,想要拼一拼大厂,于是他选择了字节跳动。面试总共花费了 20 天左右,包含了 4 轮电话面试、1 轮笔试、1 轮主管视频面试、1 轮hr视频面试。 据他了解到的信息,其实去字节面试的人很多&…

爬虫(一)爬虫基本概念

爬虫概念网络爬虫 (网页蜘蛛, 网络机器人)爬虫就是模拟客户端发送网络请求, 接受请求对应的响应, 一种按照一定的规则,自动地抓取互联网信息的程序。理论上来说, 只要是用户通过客户端(浏览器)能够做到事情, 爬虫都能够去做。爬虫: 模拟客户端访问, 抓取数据。反爬: 保护重要数…

3、边界值分析

如何选定边界值 很难提供一份如何进行边界值分析的“详细说明”,因为这种方法需要一定程度的创造性,以及对问题采取一定程度的特殊处理办法。 但是可以提供一些通用指南: 如果输入条件规定了一个输入值范围,那么应针对范围的边…

WY49 数对

【答案解析】: 暴力破解:将 x 和 y 分别遍历 [1, n] ,进行判断当 x % y > k 时统计计数 count 即可,但是这样的话当 n 的值非常大 的时候循环次数将非常恐怖,需要循环 n^2 次。 更优解法: 假设输入 n10 , k3 &#…

QT/C++——对话框

一、标准对话框 #include "widget.h" #include <QVBoxLayout> #include <QHBoxLayout>Widget::Widget(QWidget *parent): QWidget(parent) {btcolor new QPushButton("setcolor");bterrm new QPushButton("errmsg");btfile new …

检索业务:构建结果数据与分析

明确返回的结果对象数据 结果对象 Data public class SearchResult {/*** 查到的所商品信息*/private List<SkuEsModel> products;private Integer pageNum;//当前页面private Long total;//总记录数private Integer totalPages;//总页码private List<CatalogVo&g…

linux安装python3.10.9

Linux系统安装python3.10.9Linux系统安装python3.10.9查看系统自带python信息python官网下载安装包解压安装包上传安装包到服务器解压安装包进入解压后的目录安装python使用的依赖安装python使用的依赖完成编译安装python设置软连接设置python软连接设置pip软连接配置环境变量使…

【Linux】线程概念 | 同步

除了线程互斥&#xff0c;我们还有线程同步&#xff0c;来康康吧 文章目录1.为什么需要同步2.生产消费模型2.1 生产者和消费者的关系2.2 以简单代码为例2.3 并发3.条件变量接口3.1 init/destroy3.2 pthread_cond_wait3.3 pthrea_cond_signal/broadcast3.4 代码示例3.4.1 小bug3…

Python数据可视化(三)绘制统计图形大全

3.1 柱状图以 Python 代码的形式讲解柱状图的绘制原理&#xff0c;这里重点讲解 bar()函数的使用方法。代码&#xff1a;import matplotlib as mpl import matplotlib.pyplot as plt mpl.rcParams["font.sans-serif"]["SimHei"] mpl.rcParams["axes.u…

JavaScript Hashmap散列算法

文章目录前言一、什么是散列表二、为何使用散列算法三、实现散列算法1.字典结构2.散列函数3.put 设置/更新4. 获取值四、使用HashMap处理冲突1.分离链接2.线性探查总结前言 一、什么是散列表 散列表是字典(Dictionary)的一种实现. 集合以[值, 值]形式存储, 字典则以[键, 值]对…

不让袁树雄上春晚,导演于蕾是真英明

自从央视兔年春晚结束后&#xff0c;互联网上面就出现各种吐槽声音&#xff0c;尤其是关于热歌《早安隆回》的话题。说起歌曲《早安隆回》&#xff0c;这是2022年最火的歌曲之一&#xff0c;民间的呼声也一直很高&#xff0c;都希望能够登上央视春晚舞台。 不过随着央视春晚的结…

在甲骨文云容器实例(Container Instances)上部署Alist

在甲骨文云容器实例上部署Oracle Linux 8 Desktop加强版创建容器实例查看容器实例的公共 IP 地址查看密码使用Alist甲骨文云推出了容器实例&#xff0c;这是一项无服务器计算服务&#xff0c;可以即时运行容器&#xff0c;而无需管理任何服务器。今天我们尝试一下通过容器实例部…

数据结构与算法(一)(Python版)

python基础知识整理二 文章目录算法分析运行时间检测大O表示法“变位词”判断问题解法一: O(logn)解法二&#xff1a;暴力法 O(n!)解法三 O(n)Python数据类型的性能示例判断是否是素数求素数个数基本结构——线性结构栈抽象数据类型以及Python实现用Python实现抽象数据结构栈栈…

HQChart实战教程58-K线主图仿tradingview

HQChart实战教程58-K线主图仿tradingview 需求效果图实现思路步骤1. 写透明成交量柱子指标2. 调整成交量柱子和K线图显示区域HQChart插件源码地址完整的demo例子需求 主图K线图和成交量柱子图在一个同窗口显示,柱子图高度为主图窗口高度的1/4,并且成交量柱子图使用透明色 效…

【论文翻译】Deep High-Resolution Representation Learningfor Visual Recognition

目录 摘要 介绍 2.相关工作 3 HIGH-RESOLUTION NETWORKS 3.1 并行多分辨率卷积 3.2 重复的多分辨率融合融合模块 3.3 表示头 3.4实例化 3.5分析 4 人体姿态估计 5语义分割 8.总结 摘要 高分辨率表示对于位置敏感的视觉问题是必不可少的&#xff0c;例如人体姿势估计…

垃圾收集器必问系列—G1

本文已收录至Github&#xff0c;推荐阅读 &#x1f449; Java随想录 人生下来不是为了拖着锁链&#xff0c;而是为了展开双翼。——雨果 文章目录基于Region的堆内存布局可预测的停顿时间模型跨Region引用对象对象引用关系改变运作过程CMS VS G1相关参数Garbage First&#xff…

重要的数据表

重要的数据表目录概述需求&#xff1a;设计思路实现思路分析1.-- 组织结构数据库.参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait for change,challeng…

51单片机学习笔记-6串口通信

6 串口通信 [toc] 注&#xff1a;笔记主要参考B站江科大自化协教学视频“51单片机入门教程-2020版 程序全程纯手打 从零开始入门”。 6.1 串口通信原理 串口是一种应用十分广泛的通讯接口&#xff0c;串口成本低、容易使用、通信线路简单&#xff0c;可实现两个设备的互相通…

层级选择器

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>层级选择器</title> <style type"text/css"> /*需求&#xff1a;需要选中前三个段落标签*/ /*下面两个选择器之间加…