mars3d使用

1、认识

👉认识Mars3D

Mars3D是火星科技研发的一款基于 Web 的 3D 地理信息系统（GIS）库**，属于三维 GIS的一部分，适合城市和地理空间数据可视化，使用WebGL 技术可以将**城市地图、建筑物、道路网络等以 3D 形式展示。

Mars3D基于Cesium与B/S架构设计，轻量级高效能GIS开发平台，使用多种GIS数据和三维模型，呈现三维空间的可视化。

🍎主要功应用三维 GIS 场景

• 智慧城市（建筑物管理、地下管网、环境监测）
• 应急指挥（火灾模拟、洪水预警、无人机监控）
• 交通管理（轨迹回放、车流分析、航线规划）
• 国土资源（地质勘探、土壤分析）
• 虚拟仿真（游戏场景、元宇宙）

🍎扩展性

**数据支持 **GeoJSON、KML、CZML、3D Tiles 等

支持地图、地形、地表的渲染与交互

可以与地理信息系统、地图服务（如百度地图、高德地图等）进行集成

👉Mars3D的官网

// 官方网址
http://mars3d.cn/

// 开发教程
http://mars3d.cn/dev/

//开发文档
http://mars3d.cn/docs/

//API文档
http://mars3d.cn/api/


//开源地址
https://github.com/marsgis/mars3d

👉Mars3D包含内容

Mars3D开发基础系列文档导航

三维场景 Map
地图控件
地图图层 Layer
加载DEM地形
栅格瓦片图层
坐标系及坐标变换
相机Camera及视角控制
时钟Clock及时序控制
事件机制
矢量图层Layer
矢量数据Graphic
Property属性机制
Material材质
glTF小模型
3DTiles三维模型
场景特效
管理及分析功能

👉Mars3D的CDN部分

我们也可以使用CDN的方式进行使用

<!--引入cesium基础lib-->
<link href="https://unpkg.com/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>
<script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript" ></script>

<!--引入mars3d库lib-->
<link href="https://unpkg.com/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mars3d/dist/mars3d.js" type="text/javascript" ></script>  


<!--引入mars3d库插件lib（按需引入）-->  
<script src="https://unpkg.com/mars3d-space/dist/mars3d-space.js" type="text/javascript" ></script> 

2、配置安装

🍎 新建项目

接下来我们在项目之中进行一下相关的安装以及使用，这里我搭建一个Vue3+TS+Antd进行演示，这里我们主要先使用依赖包的方式进行

项目搭建使用

// 创建项目
npx create-vite@latest NexusAntd --template vue-ts

//依赖
yarn add vue-router@latest
yarn add antd

🍎安装依赖（npm包方式）

接下来在项目之中引入使用mars3d部分

//安装mars3d主库，其中mars3d-cesium  @turf/turf为依赖库
yarn add mars3d mars3d-cesium  @turf/turf

//安装mars3d插件（按需安装）
yarn add mars3d-space --save

🍎vite项目配置

• 安装依赖库

yarn add vite-plugin-mars3d --save-dev

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

import { defineConfig } from "vite"
import { mars3dPlugin } from "vite-plugin-mars3d"

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

🍎项目使用

在我们项目之中进行使用，我们先采用官方的进行演示

<template>
  <div id="mars3dContainer" class="mars3d-container"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 引入 Mars3D 所需的 CSS 样式
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"

// v3.8.6及之前版本使用 import "mars3d/dist/mars3d.css";
import "mars3d/mars3d.css"

// 引入 Mars3D 主库
import * as mars3d from "mars3d"

// 使用 onMounted 来确保组件挂载时初始化地图
onMounted(() => {
  initMap();
})
const initMap = () =>  {
  const map = new mars3d.Map("mars3dContainer", {
    basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }]
  })
  return map
}
</script>
<style scoped>
/* 你可以根据需要自定义地图容器的样式 */
.mars3d-container {
  width: 1920px;
  height: 1080px; /* 根据需求调整高度 */
}
</style>

这个时候预览就可以发现我们项目已经显示出来

3、进一步使用

接下来就可以继续进一步使用mars3d了