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

vue3+vite搭建第一个cesium项目详细步骤及环境配置(附源码)

文章目录

  • 1.创建vue+vite项目
  • 2.安装 Cesium
    • 2.1 安装cesium
    • 2.2 安装vite-plugin-cesium插件(非必选)
    • 2.3 新建组件页面map.vue
    • 2.4 加载地图
  • 3.完成效果图

1.创建vue+vite项目

打开cmd窗口执行以下命令:cesium-vue-app是你的项目名称

npm create vite@latest cesium-vue-app -- --template vue

创建完成后依次执行以下命令用于安装、启动项目:

cd cesium-vue-app
npm install
npm run dev

2.安装 Cesium

进入项目文件夹,打开cmd窗口执行:

2.1 安装cesium

npm install --save cesium

2.2 安装vite-plugin-cesium插件(非必选)

vite-plugin-cesium 是一个专门为 Vite 构建工具定制的插件,用于在 Vite 项目中轻松使用 Cesium 库。它简化了在 Vite 项目中集成 Cesium 的过程,并提供了一些额外的功能和配置选项。而直接安装 Cesium 库,你需要手动配置 Vite 项目以确保正确引入和使用 Cesium。这可能涉及到配置模块加载器、处理依赖关系、解决版本冲突等问题。相比之下,使用 vite-plugin-cesium 插件可以让这些步骤更加简单和方便;

  • cmd执行插件安装命令:
npm i vite-plugin-cesium vite -D
  • 配置vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'export default defineConfig({plugins: [vue(),cesium()],
})

2.3 新建组件页面map.vue

(1)引入cesium

<script setup>import { ref } from 'vue'import * as Cesium from 'cesium'
</script>

(2)创建一个div作为地图容器,并设置其id为“cesiumContainer”

  <div class="map-box" id="cesiumContainer"></div>

(3)设置地图容器样式的高度和宽度均为100%

  • 首先要将body的宽高设置为100vw和100vh;
body {margin: 0;display: flex;place-items: center;min-height: 100%;height: 100vh;width: 100vw;
}
  • 其次设置vue项目dom容器的宽高为100%;
#app {margin: 0 auto;text-align: center;height: 100%;width: 100%;
}
  • 最后设置地图容器的宽高
<style scoped>.map-box {height: 100%;width: 100%;}
</style>

2.4 加载地图

(1)申请token
首先登录网址https://cesium.com/ion/signin/tokens,在注册后申请token,然后创建一个cesium对象,并使用我们创建的div容器承载地图。
(2)编写代码脚本加载容器。

<script setup>import {ref,onMounted} from 'vue'import * as Cesium from 'cesium'onMounted(() => {Cesium.Ion.defaultAccessToken = "your cesium token"const viewer = new Cesium.Viewer('cesiumContainer', {geocoder: true, // 是否显示位置查找工具(true表示是,false表示否)homeButton: true, // 是否显示首页位置工具sceneModePicker: true, //是否显示视角模式切换工具baseLayerPicker: true, //是杏显示默认图层选择工具navigationHelpButton: true, //是否显示导航帮助工具animation: true, //是杏显示动画工具timeline: true, //是否显示时间轴工具fullscreenButton: true, //是否显示全屏按钮工具})});
</script>

3.完成效果图

在这里插入图片描述

相关文章:

vue3+vite搭建第一个cesium项目详细步骤及环境配置(附源码)

文章目录 1.创建vuevite项目2.安装 Cesium2.1 安装cesium2.2 安装vite-plugin-cesium插件&#xff08;非必选&#xff09;2.3 新建组件页面map.vue2.4 加载地图 3.完成效果图 1.创建vuevite项目 打开cmd窗口执行以下命令&#xff1a;cesium-vue-app是你的项目名称 npm create…...

LiteOS增加执行自定义源码

开发过程注意事项&#xff1a; 源码工程路径不能太长 源码工程路径不能有中文 一定要关闭360等杀毒软件&#xff0c;否则编译的打包阶段会出错 增加自定义源码的步骤: 1.创建源码目录 2. 创建源文件 新建myhello目录后&#xff0c;再此目录下再新建源文件myhello_demo.c 3. 编…...

《Nature》文章:ChatGPT帮助我学术写作的三种方式

图片翻译 ** 文章内容** 忏悔时间&#xff1a;我使用生成式人工智能&#xff08;AI&#xff09;。尽管在学术界关于聊天机器人是积极力量还是消极力量的争论不休&#xff0c;但我几乎每天都使用这些工具来完善我所写论文中的措辞&#xff0c;并寻求对我被要求评估的工作进行替…...

防火墙安全策略与用户认证综合实验

一、实验拓扑 二、实验需求 1.DMZ区内的服务器&#xff0c;办公区仅能在办公时间内<9:00-18:00>可以访问&#xff0c;生产区的设备全天可以访问 2.办公区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网 3.办公区设备10.0.2.10不充许访问DMZ区的FTP服务器和HT…...

vue学习day05-watch侦听器(监视器)、Vue生命周期和生命周期的四个阶段、、工程化开发和脚手架Vue cli

13、watch侦听器&#xff08;监视器&#xff09; &#xff08;1&#xff09;作用&#xff1a;监视数据变化&#xff0c;执行一些业务逻辑或异步操作 &#xff08;2&#xff09;语法&#xff1a; 1&#xff09;简写语法——简单数据类型&#xff0c;直接监视 ① Watch:{ 数…...

数字人+展厅互动体验方案:多元化互动方式,拓宽文化文娱新体验

数字化创新已成为推动展厅可持续发展&#xff0c;创造全新消费体验&#xff0c;满足游客多元化需求的关键力量。 “数字人数字互动展厅”可以适应年轻一代的文化传播与多媒体互动新体验趋势&#xff0c;打造新生代潮玩聚集地&#xff0c;促进文化创意传播与互动体验场景创新&a…...

在Spring Boot项目中集成监控与报警

在Spring Boot项目中集成监控与报警 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. 引言 在当今的软件开发中&#xff0c;监控和报警系统是保证系统稳定性和可靠性的重要组成部分。Spring Boot…...

opencv实现目标检测功能----20240704

早在 2017 年 8 月,OpenCV 3.3 正式发布,带来了高度改进的“深度神经网络”(dnn)模块。 该模块支持多种深度学习框架,包括 Caffe、TensorFlow 和 Torch/PyTorch。这次我们使用Opencv深度学习的功能实现目标检测的功能,模型选用MobileNetSSD_deploy.caffemodel。 模型加载…...

音视频解封装demo:使用libmp4v2解封装(demux)出mp4文件中的h264视频数据和aac语音数据

1、README 前言 本demo是使用的mp4v2来将mp4文件解封装得到h264、aac的&#xff0c;目前demo提供的.a静态库文件是在x86_64架构的Ubuntu16.04编译得到的&#xff0c;如果想在其他环境下测试demo&#xff0c;可以自行编译mp4v2并替换相应的库文件&#xff08;libmp4v2.a&#…...

手撸俄罗斯方块(一)——简单介绍

手撸俄罗斯方块 简单介绍 《俄罗斯方块》&#xff08;俄语&#xff1a;Тетрис&#xff0c;英语&#xff1a;Tetris&#xff09;&#xff0c;是1980年末期至1990年代初期风靡全世界的电脑游戏&#xff0c;是落下型益智游戏的始祖&#xff0c;电子游戏领域的代表作之一&a…...

构建LangChain应用程序的示例代码:61、如何使用 LangChain 和 LangSmith 优化链

本示例介绍如何使用 LangChain 和 LangSmith 优化链。 设置 我们将为 LangSmith 设置环境变量&#xff0c;并加载相关数据 import osos.environ["LANGCHAIN_PROJECT"] "movie-qa" # 设置 LANGCHAIN_PROJECT 环境变量为 "movie-qa"import pan…...

Android系统通过属性设置来控制log输出的方案

Android系统通过属性设置来控制log输出的方案 背景 项目中经常需要在针对性的模块或者文件&#xff0c;分析问题的时候输出Log&#xff0c;但问题分析完成后&#xff0c;又由于性能问题&#xff0c;需要关闭这些log输出。当前大多数情况下是控制整个系统的log等级来实现&#…...

JavaDoc的最佳实践

文章目录 一、JavaDoc 使用说明1.1 什么是 JavaDoc1.2 文档注释结构1.3 常见的 Javadoc 标签 二、文档最佳实践2.1 注释原则2.2 实际案例 参考资料 一、JavaDoc 使用说明 1.1 什么是 JavaDoc JavaDoc 是一款能根据源代码中的文档注释来产生 HTML 格式的 API 文档的工具。 Jav…...

数字力量助西部职教全面提升——唯众品牌大数据、人工智能系列产品中标甘肃庆阳职院数字经济人才培养基地!

近日&#xff0c;唯众品牌凭借在大数据和人工智能领域深耕多年的技术积累和卓越产品&#xff0c;成功中标庆阳职业技术学院全国一体化算力网络国家枢纽节点数字经济人才培养基地项目&#xff0c;标志着唯众在助力西部职业教育与数字经济融合发展的新征程上迈出了坚实的一步。 …...

Swagger的原理及应用详解(四)

本系列文章简介: 在当今快速发展的软件开发领域,特别是随着微服务架构和前后端分离开发模式的普及,API(Application Programming Interface,应用程序编程接口)的设计与管理变得愈发重要。一个清晰、准确且易于理解的API文档不仅能够提升开发效率,还能促进前后端开发者之…...

Elasticsearch7.10集群搭建

Elasticsearch详细介绍&#xff1a; Elasticsearch 是一个分布式、RESTful 风格的搜索和分析引擎。它的核心基于 Apache Lucene&#xff0c;能够处理海量的数据&#xff0c;并支持实时的全文搜索。以下是关于 Elasticsearch 的详细介绍。 一、基本概念 索引&#xff08;Index…...

SMU Summer 2024 Contest Round 3

A.Hcode OnlineJudge 先用欧拉筛把质数预处理出来&#xff0c;然后枚举左端点的质数&#xff0c;只需要询问右端点是不是质数并取差值的min就行了 #include<bits/stdc.h> #define endl \n #define mk make_pair #define int long long using namespace std; typedef lon…...

uniapp 封装瀑布流组件

思路&#xff1a; 1.coulumns&#xff1a;需要分成几列 2.如何分布数据 3.计算每列的宽度 4.图片进行高度自适应 <template><view :style"{ margin: boxM }"><view class"flex flex-justify-start bg-red" style"background-colo…...

pd虚拟机去虚拟化是什么意思?pd虚拟机去虚拟化教程 PD虚拟机优化设置

Parallels Desktop for Mac&#xff08;PD虚拟机&#xff09;去虚拟化是指在虚拟机&#xff08;Virtual Machine&#xff0c;简称 VM&#xff09;中禁用或减少虚拟化层的影响&#xff0c;使其表现更接近于物理机。这种操作通常用于提高虚拟机的性能或解决某些软件兼容性问题。具…...

低代码研发项目管理流程优化:提效与创新的双重驱动

随着信息技术的迅猛发展&#xff0c;软件项目的规模和复杂度日益增加&#xff0c;传统的软件开发方式已经难以满足快速迭代和高效交付的需求。在这一背景下&#xff0c;低代码平台应运而生&#xff0c;以其高效、灵活、易用的特点&#xff0c;迅速成为软件行业的新宠。然而&…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

LangChain 中的文档加载器(Loader)与文本切分器(Splitter)详解《二》

&#x1f9e0; LangChain 中 TextSplitter 的使用详解&#xff1a;从基础到进阶&#xff08;附代码&#xff09; 一、前言 在处理大规模文本数据时&#xff0c;特别是在构建知识库或进行大模型训练与推理时&#xff0c;文本切分&#xff08;Text Splitting&#xff09; 是一个…...

在Spring Boot中集成RabbitMQ的完整指南

前言 在现代微服务架构中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件&#xff0c;支持多种消息协议&#xff0c;具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...