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

vue3 + vite + ts 集成mars3d

vue3 + vite + ts 集成mars3d

文章目录

  • vue3 + vite + ts 集成mars3d
  • 前言
  • 一、创建一个vue3 + vite + ts项目
  • 二、引入mars3d相关依赖
  • 三、vite.config.ts 相关配置
  • 四、 新建DIV容器 + 创建地图


前言

使用mars3d过程中,需要集成mars3d到自己的项目中,mars3d开发教程中已经有集成好的项目模板
http://mars3d.cn/doc.html
项目模板gitte地址:https://gitee.com/marsgis/mars3d-vue-template/tree/master/mars3d-vue3-vite
如果不想用官方的模板就需要自己集成


一、创建一个vue3 + vite + ts项目

如何创建项目参考网上的教程,这里就不做详细的说明,我们直接步入正题。

二、引入mars3d相关依赖

这里使用npm的方式引用
1、引入mars3d

npm install mars3d --save

2、引入mars3d-cesium

npm install mars3d-cesium --save

到目前为止mars3d最主要的依赖库已经安装好了

三、vite.config.ts 相关配置

参考教程:安装mars3d vite插件库
具体配置如下
在这里插入图片描述
到这步基本配置就完成了

四、 新建DIV容器 + 创建地图

1、在app.vue中使用组件main-view
在这里插入图片描述
2、创建main-view组件

<template><div id="mars3dContainer" class="mars3d-container"></div>
</template><script lang="ts" setup>
import { onMounted,reactive } from "vue";
import * as mars3d from "mars3d";onMounted(() => {var mapOptions = {basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
};
var map = new mars3d.Map("mars3dContainer", mapOptions);});
};
</script><style lang="less" scoped>
</style>

到这步不出意外的话Mars3d地球已经出来了。

其它问题:
这是基本配置,可以在public文件夹下新建config文件,文件夹下新建config.json文件
http://mars3d.cn/config/config.json

main-view组件改动一下

<template><div id="mars3dContainer" class="mars3d-container"></div>
</template><script lang="ts" setup>
import { onMounted,reactive } from "vue";
import * as mars3d from "mars3d";onMounted(() => {const configUrl = `${process.env.BASE_URL}config/config.json`;mars3d.Util.fetchJson({ url: configUrl }).then((data) => {initMars3d(data.map3d);});
});// const router = useRouter()let map: any;
const initMars3d = (option: any) => {map = new mars3d.Map("mars3dContainer", option);// 开场动画// map.openFlyAnimation();// 针对不同终端的优化配置if (mars3d.Util.isPCBroswer()) {map.zoomFactor = 2.0; // 鼠标滚轮放大的步长参数// IE浏览器优化if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {map.viewer.targetFrameRate = 20; // 限制帧率map.scene.requestRenderMode = false; // 取消实时渲染}} else {map.zoomFactor = 5.0; // 鼠标滚轮放大的步长参数// 移动设备上禁掉以下几个选项,可以相对更加流畅map.scene.requestRenderMode = false; // 取消实时渲染map.scene.fog.enabled = false;map.scene.skyAtmosphere.show = false;map.scene.globe.showGroundAtmosphere = false;}// //二三维切换不用动画if (map.viewer.sceneModePicker) {map.viewer.sceneModePicker.viewModel.duration = 0.0;}
};
</script><style lang="less" scoped>
.mars3d-container {width: 100%;height: 100%;overflow: hidden;}
</style>

基本上一个炫酷的地球就完成了
如果控制台报 资源图片没有找到 404错误,就把官方示例下载下来 ,把public/img文件拷贝到 对应你的问夹下就可以了
附:整个项目结构目录
在这里插入图片描述

相关文章:

vue3 + vite + ts 集成mars3d

vue3 vite ts 集成mars3d 文章目录vue3 vite ts 集成mars3d前言一、创建一个vue3 vite ts项目二、引入mars3d相关依赖三、vite.config.ts 相关配置四、 新建DIV容器 创建地图前言 使用mars3d过程中&#xff0c;需要集成mars3d到自己的项目中&#xff0c;mars3d开发教程…...

跨境卖家必看的沃尔玛Walmart商家入驻教程

沃尔玛Walmart作为作为全球连锁超市的鼻祖&#xff0c;有不可比拟的知名度。当沃尔玛从线下延伸到线上后&#xff0c;就成为一个自带IP与流量的线上平台&#xff0c;在全世界都拥有数量庞大的消费者群体。所以龙哥就结合自己注册Walmart的过程给大家详细讲解一下。 Walmart卖家…...

【GANs】什么是饱和损失函数 Non-Saturating LossFunction

Saturating VS Non-Saturating Loss functions in GANs【GANs】什么是饱和损失函数 Non-Saturating LossFunctionSaturating VS Non-Saturating Loss functions in GANs 饱和Loss 普通GAN loss是生成器希望最小化被判断为假的概率。x取值范围是[0,1]&#xff0c;所以图中函数…...

USB接口虚拟网卡

1 基本概念 1.1 USB转以太网 - ASIX 4-byte length header before every ethernet packet. - Microchip LAN7800 128x32 bit Descriptor RAM, 32 bits DP_DATA address offset 030h for Descriptor RAM access. - Windows CMD参数格式&#xff1a; route /? -> Linux -h …...

基于SpringBoot的外卖项目的优化

基于SpringBoot的外卖项目的优化1、缓存优化1.1、缓存短信验证码问题分析代码改造1.2、缓存菜品数据实现思路1.3、Spring Cache介绍常用注解CachePutCacheEvictCacheable使用方式1.4、缓存套餐数据实现思路代码改造2、读写分离2.1、主从复制存在的问题介绍配置配置主库--master…...

Ubuntu20.04/22.04 ESP32 命令行开发环境配置

ESP32 芯片系列 ESP32分三个系列 ESP32-S ESP32-S3: Xtensa 32位 LX7 双核 240 MHz, 384KB ROM, 512KB SRAM, QFN7x7, 56-pin, 2.4G Wi-Fi BTESP32-S2: Xtensa 32位 LX7 单核 240 MHz, 128KB ROM, 320KB SRAM, QFN7x7, 56-pin, 2.4G Wi-Fi ESP32-C ESP32-C3: RISC-V 32位 单…...

Kali Linux使用Metasploit生成木马入侵安卓系统

额&#xff0c;这是我最后一篇文章了&#xff0c;周一我们开学了 文章目录前言一、Metasploit是什么&#xff1f;演示环境二、生成可执行木马文件1.生成2.运行命令并生成木马配置参数入侵安卓手机命令1.查看对方手机系统信息查看对方手机安装哪些app文件总结前言 前言&#xf…...

数据库复习1

一. 简答题&#xff08;共1题&#xff0c;100分&#xff09; 1. (简答题) 存在数据库test&#xff0c;数据库中有如下表&#xff1a; 1.学生表 Student(Sno,Sname,Sage,Ssex) --Sno 学号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 主键Sno 2.教师表 Teacher(Tno,Tname) --T…...

18. linux系统基础

shell 命令解析器 命令解析器作用&#xff1a; 他把在终端上输出的命令 给你解析成内核可以识别的指令&#xff0c;内核 是经过命令解析器的加工 shell在找命令的时候&#xff0c;所包含的路径&#xff0c;就是在这些路径里去 找 找到就执行 找不到就报错 报错 要么 这个命…...

ssh远程登录报错:kex_exchange_identification: Connection closed by remote host

基本信息系统&#xff1a;MacOS Catalina 10.15.7报错信息&#xff1a;终端登录远程服务器时报错&#xff1a;kex_exchange_identification: Connection closed by remote host复制然而服务商的一键登录或VNC登录正常。解决方案首先使用以下命令debug登录过程&#xff0c;以便定…...

Quartus II 的入门级使用

好久没有用VHDL写东西了&#xff0c;今天需要完成一个项目&#xff0c;重新复习一下新建工程新建工程file-->New Project Wizard, next, 选择存放的路径名字&#xff08;projecttop-level 名字要相同&#xff09;&#xff0c;next&#xff0c;File name名字同上&#xff0c;…...

Java EE|TCP/IP协议栈之TCP协议工作机制上

文章目录前言一、确认应答二、超时重传三、连接管理三次握手四次挥手前言 前边&#xff0c;我们已经大概交代了TCP的报文结构。但是仍有一些字段我们不确定到底怎么理解&#xff0c;这里就分析TCP的内部工作机制了。 TCP的内部很复杂&#xff0c;有很多机制&#xff0c;这里我们…...

智能化人机协作 遮挡情况下准确识别目标信息

研究背景 废旧产品&#xff08;end-of-life products&#xff09;的拆卸是工程全生命周期管理的一个基本步骤。在减少资源消耗和温室气体排放的同时&#xff0c;回收可重复使用的部件可能创造相当的经济价值&#xff0c;同时也能推动碳中和目标的实现。 但目前EoL的拆卸仍然严…...

React(一):初识React、类组件、jsx的基础语法

React&#xff08;一&#xff09;一、初识React1.简单介绍2.React的三个依赖3.Hello React案例二、类组件1.定义类组件并渲染2.绑定事件函数&#xff08;奇怪的this问题&#xff09;3.数组形式数据的展示&#xff08;电影案例&#xff09;4.计数器案例三、jsx语法详解1.jsx的书…...

2023-2-24 刷题情况

获取单值网格的最小操作数 题目描述 给你一个大小为 m x n 的二维整数网格 grid 和一个整数 x 。每一次操作&#xff0c;你可以对 grid 中的任一元素 加 x 或 减 x 。 单值网格 是全部元素都相等的网格。 返回使网格化为单值网格所需的 最小 操作数。如果不能&#xff0c;返…...

测试员拿到新项目怎么着手测试?不要慌,照做准没错

一、目标 结合公司现有的项目情况制定合理规范的测试流程&#xff0c;提高测试效率和产品质量&#xff0c;尽可能减少客户对产品的问题反馈&#xff0c; 核心还是要加强项目组成员之间的工作交流和沟通&#xff0c;保证整个项目的高效率的按质按量的交付。 二、测试流程说明…...

通过cfssl自签证书https证书

背景 公司内部自建Web服务&#xff0c;通过自签CA&#xff0c;然后签发https证书 工具地址: GitHub - cloudflare/cfssl: CFSSL: Cloudflares PKI and TLS toolkit 使用步骤: 1. 在release页面中下载最新的二进制包&#xff0c;我使用的是1.5的解压并重命名二进制文件 tar…...

openEuler部署Ceph集群(块存储)

openEuler部署Ceph集群1 目标2 环境2.1 服务器信息2.2 软件信息3 部署流程3.1 获取系统镜像3.2 创建虚拟机3.3 配置虚拟机3.3.1 配置互信3.3.2 关闭防火墙3.3.3 配置免密登录3.3.4 配置NTP3.3.4.1 安装NTP服务3.3.4.2 配置NTP服务端3.3.4.3 配置NTP客户端3.3.4.4 启动NTP服务3.…...

npm install vue2-ace-editor 安装报错

npm install vue2-ace-editor 安装报错&#xff0c;如下图 目录 npm install vue2-ace-editor 安装报错&#xff0c;如下图 &#x1f9e8;&#x1f9e8;&#x1f9e8;解决方法&#xff1a;在命令后面加上 神秘代码 npm install vue2-ace-editor --save --legacy-peer-deps &a…...

【PyQt5图形界面编程(2)】:创建工程

创建工程 一、创建工程二、开始开发1、运行Qt5Designer,创建QT窗口2、运行pyUIC,转换xx.ui成xx.py3、main.py中引用xx.py中的类4、打包main.py成main.exe来发布5、执行终端报警处理方法三、其他(如果涉及)1、配置环境变量一、创建工程 采用虚拟环境来创建工程 相关的paka…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...