Vue3项目中集成mars3D简单三部曲

Vue3项目中集成mars3D简单三部曲

这里是参考网址,大佬可以点击一件跳转

1.安装依赖

npm install vite-plugin-mars3d --save-dev

2.修改 vite.config.ts 配置文件

import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';

export default defineConfig({
  plugins: [mars3dPlugin()]
});

3. 新建DIV容器 + 创建地图

新建map.ts文件,以下代码闭眼直接copy

import * as mars3d from "mars3d"
import { Cesium } from "mars3d"

import "mars3d/dist/mars3d.css";
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
//必须有这两行css,否则地球出来了,样式还是乱的
export function initMap() {
  // 创建三维地球场景
  const map = new mars3d.Map("mars3dContainer", {
    scene: {
      center: { lat: 30.054604, lng: 108.885436, alt: 17036414, heading: 0, pitch: -90 },
      showSun: true,
      showMoon: true,
      showSkyBox: true,
      showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
      fog: true,
      fxaa: true,
      globe: {
        showGroundAtmosphere: false, // 关闭大气(球表面白蒙蒙的效果)
        depthTestAgainstTerrain: false,
        baseColor: "#546a53"
      },
      cameraController: {
        zoomFactor: 3.0,
        minimumZoomDistance: 1,
        maximumZoomDistance: 50000000,
        enableRotate: true,
        enableZoom: true
      },
      mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
      mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL// 2D下左右一直可以滚动重复世界地图
    },
    control: {
      baseLayerPicker: false, // basemaps底图切换按钮
      homeButton: false, // 视角复位按钮
      sceneModePicker: false, // 二三维切换按钮
      navigationHelpButton: false, // 帮助按钮
      fullscreenButton: true, // 全屏按钮
      contextmenu: { hasDefault: false } // 右键菜单
    },
    terrain: {
      url: "//data.mars3d.cn/terrain",
      show: true
    },
    basemaps: [
      {
        name: "天地图影像",
        icon: "img/basemaps/tdt_img.png",
        type: "tdt",
        layer: "img_d",
        show: true
      }
    ] as any,
  })

  // 打印测试信息
  console.log("mars3d的Map主对象构造完成", map)
  console.log("其中Cesium原生的Cesium.Viewer为", map.viewer)

  return map
}

vue文件引入map.ts,以下代码闭眼直接copy

<template>
  <div>
    <div id="mars3dContainer" class="mars3d-container"></div> //新建DIV容器
  </div>
</template>

<script setup lang="ts">

import { onMounted, ref } from 'vue';
import * as WorkerMap from "./map";
onMounted(async () => {
  WorkerMap.initMap();
});
</script>

<style scoped lang="scss">
</style>

在这里插入图片描述

快去试试吧~

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++ Qt开发:自定义Dialog对话框组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍自定义Dialog组件的常用方法及灵活运用。 在…

Stable-Diffusion|从图片反推prompt的工具:Tagger(五)

stable-diffusion-webui-wd14-tagger 前面几篇&#xff1a; Stable-Diffusion|window10安装GPU版本的 Stable-Diffusion-WebUI遇到的一些问题&#xff08;一&#xff09; 【Stable-Diffusion|入门怎么下载与使用civitai网站的模型&#xff08;二&#xff09;】 Stable-Diffusi…

QQ邮箱发送工具类的实现

我们在日常开发中&#xff0c;需要实现一个对邮箱的发送&#xff0c;今天就实现邮箱的发送工具类&#xff0c;只需要一些注册邮箱之后的配置即可&#xff0c;我这边使用的是qq邮箱 0.加上依赖 <!--邮箱--><dependency><groupId>org.springframework.boot&l…

DevOps常用工具全家桶,实现高效运维和交付

专栏集锦&#xff0c;大佬们可以收藏以备不时之需&#xff1a; Spring Cloud 专栏&#xff1a;http://t.csdnimg.cn/WDmJ9 Python 专栏&#xff1a;http://t.csdnimg.cn/hMwPR Redis 专栏&#xff1a;http://t.csdnimg.cn/Qq0Xc TensorFlow 专栏&#xff1a;http://t.csdni…

Linux:进程地址空间

目录 1.程序地址空间 2.进程地址空间 1.程序地址空间 我们在讲C/C语言的时候&#xff0c;32位平台下&#xff0c;我们见过这样的空间布局图 我们来验证一下这张图的正确性&#xff1a; int un_gval;int init_gval100;int main(int argc, char* argv[],char* env[]){//代码…

C语言之变量的存储方式和生存周期

一、变量的存储方式 C语言变量的存储有两种方式&#xff1a;静态存储方式和动态存储方式&#xff0c;相应的生产期也有两种&#xff1a;静态生存期和自动生存期。 ①静态存储方式&#xff1a;在程序运行前为变量内存分配内存&#xff0c;在程序结束后回收变量的内存。&#x…

java-sec-code中重定向

重定向 状态码3xx 存在问题的代码段 GetMapping("/redirect") public String redirect(RequestParam("url") String url) {return "redirect:" url; }用户访问/redirect路径时&#xff0c;redirect方法会获取web请求中的url参数内容&#xff0…

文化传媒企业网站建设的效果如何

文化传媒业可以细分为多个类目&#xff0c;如企业营销宣传、明星包装、主播打造、马戏团、动漫等&#xff0c;这些都有很高的市场需求度&#xff0c;尤其近些年互联网深入各个行业&#xff0c;线上发展尤为重要&#xff0c;也促进了文化传媒业的发展。 同时该行业需求者&#…

React脚手架搭建

React脚手架 脚手架&#xff1a;可以快速构建项目的基本架构。 脚手架安装命令 可全局安装脚手架 创建项目 来到当前目录下 create-react-app 项目名&#xff08;不要大写字母&#xff09; 运行项目 进到项目里&#xff0c;在项目目录下&#xff0c;执行 npm start &#xff…

FC-13A(用于汽车应用的kHz范围晶体单元,低轮廓贴片)

FC-13A晶体非常适合用在汽车导航系统设计中的应用&#xff0c;是一种具有优异的频率性能和AEC-Q200标准认证的汽车工业级高精度晶体,FC-13A是一款尺寸为3.2 1.5 0.9mm&#xff0c;频率范围32.768KHz耐高温晶振&#xff0c;频率温度系数仅为-0.04ppm/℃&#xff0c;并且其老化…

总结一些vue3小知识2

1.el-tree-select和el-tree组件报错&#xff08;有的下拉选项选择不了&#xff0c;一点击就报错&#xff0c;但是有的却能选择&#xff0c;不会报错&#xff09; 原因:就如同v-for一样&#xff0c;需要添加key才不会出现渲染错误&#xff0c;而el-tree-select和el-tree组件需要…

Python数据科学视频讲解:Python集合

2.14 Python集合 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解2.14节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学应用的全流程&#xff0c;包括数据科学应用…

基于YOLOv8深度学习的西红柿成熟度检测系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

【后端学前端】第四天 css动画 垂直轮播效果(css变量、位移缩放动画、动画延迟)

1、学习信息 视频地址&#xff1a;css动画 垂直轮播效果&#xff08;css变量、位移缩放动画、动画延迟&#xff09;_哔哩哔哩_bilibili 2、源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title…

Java基础语法之抽象类和接口

抽象类 什么是抽象类 并不是所有的类都是用来描述对象的&#xff0c;这样的类就是抽象类 例如&#xff0c;矩形&#xff0c;三角形都是图形&#xff0c;但图形类无法去描述具体图形&#xff0c;所以它的draw方法无法具体实现&#xff0c;这个方法就可以没设计成抽象方法&…

【漏洞复现】Node.js 目录穿越漏洞(CVE-2017-14849)

文章目录 1.1、漏洞描述1.2、影响版本1.3、漏洞复现1、基础环境2、漏洞验证3、漏洞分析 1.4、参考 1.1、漏洞描述 原因是 Node.js 8.5.0 对目录进行normalize操作时出现了逻辑错误&#xff0c;导致向上层跳跃的时候&#xff08;如../../../../../../etc/passwd&#xff09;&am…

闲人闲谈PS之四十九——PLM和SAP集成常见的问题

惯例闲话&#xff1a;天气突变&#xff0c;没想到珠三角也骤降了10几度&#xff0c;昨晚还吹风扇模式&#xff0c;早上起来一下子感觉丝丝凉意。闲人还是喜欢冬天&#xff0c;冷&#xff0c;能让人思维清晰&#xff0c;提高工作效率。趁着天气适宜&#xff0c;赶紧加班擦屁股去…

关于pycharm无法进入base界面的问题

问题&#xff1a;terminal输入activate无法进入base 解决方案 1.Cortana这边找到Anaconda Prompt右击进入文件所在位置 2. 右击进入属性 3. 复制cmd.exe开始到最后的路径 cmd.exe "/K" C:\ProgramData\anaconda3\Scripts\activate.bat C:\ProgramData\anaconda3 …

Python语言学习笔记之八(文件IO)

本课程对于有其它语言基础的开发人员可以参考和学习&#xff0c;同时也是记录下来&#xff0c;为个人学习使用&#xff0c;文档中有此不当之处&#xff0c;请谅解。 1、什么是文件I/O 在Python中&#xff0c;文件IO&#xff08;输人/输出)是指与文件进行交互的过程。这包括读…

JMESPath语言

JMESPath&#xff08;JSON Matching Expression Path&#xff09; 一种查询语言。 主要用于从JSON文档中检索和过滤数据。 通过写表达式提取和处理JSON数据&#xff0c;而无需编写复杂的代码。 功能&#xff1a;数据提取、过滤、转换、排序。 场景&#xff1a;处理API响应…