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

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

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

1.安装依赖

js 复制代码
npm install vite-plugin-mars3d --save-dev

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

js 复制代码
import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';

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

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

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

js 复制代码
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

js 复制代码
<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>

快去试试吧~

相关推荐
西凉河的葛三叔16 小时前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
xiaohuatu16 小时前
CSRF保护--laravel进阶篇
vue3·laravel·csrf
半度℃温热6 天前
ERROR TypeError: AutoImport is not a function
webpack·vue3·element-plus·插件版本·autoimport
朝阳396 天前
vue3 中直接使用 JSX ( lang=“tsx“ 的用法)
vue3·tsx·jsx
xcLeigh7 天前
VUE3实现简洁的特色美食网站源码
前端·源码·vue3
陈逸子风10 天前
(系列十一)Vue3框架中路由守卫及请求拦截(实现前后端交互)
vue3·webapi·权限·流程·表单
爱分享的Hayes小朋友11 天前
如何用post请求调用Server-Sent Events服务
前端·vue3·sse·post
Coisini_甜柚か13 天前
打字机效果显示
前端·vue3·antv
Modify_QmQ13 天前
初识Electron & 进程通信
electron·vue3·桌面端
Bessie23414 天前
实现 Nuxt3 预览PDF文件
pdf·vue3·nuxt3