mars3d使用
1、认识
👉认识Mars3D
Mars3D是火星科技研发的一款 基于 Web 的 3D 地理信息系统（GIS）库**，属于三维 GIS的一部分，适合城市和地理空间数据可视化，使用WebGL 技术可以将**城市地图、建筑物、道路网络等以 3D 形式展示。
Mars3D基于Cesium与B/S架构设计，轻量级高效能GIS开发平台，使用多种GIS数据和三维模型，呈现三维空间的可视化。
🍎主要功应用三维 GIS 场景
- 智慧城市（建筑物管理、地下管网、环境监测）
- 应急指挥（火灾模拟、洪水预警、无人机监控）
- 交通管理（轨迹回放、车流分析、航线规划）
- 国土资源（地质勘探、土壤分析）
- 虚拟仿真（游戏场景、元宇宙）
🍎扩展性
**数据支持 **GeoJSON、KML、CZML、3D Tiles 等
支持地图、地形、地表的渲染与交互
可以与地理信息系统、地图服务（如百度地图、高德地图等）进行集成
👉Mars3D的官网
javascript
// 官方网址
http://mars3d.cn/
// 开发教程
http://mars3d.cn/dev/
//开发文档
http://mars3d.cn/docs/
//API文档
http://mars3d.cn/api/
//开源地址
https://github.com/marsgis/mars3d👉Mars3D包含内容
javascript
Mars3D开发基础系列文档导航
三维场景 Map
地图控件
地图图层 Layer
加载DEM地形
栅格瓦片图层
坐标系及坐标变换
相机Camera及视角控制
时钟Clock及时序控制
事件机制
矢量图层Layer
矢量数据Graphic
Property属性机制
Material材质
glTF小模型
3DTiles三维模型
场景特效
管理及分析功能👉Mars3D的CDN部分
我们也可以使用CDN的方式进行使用
javascript
<!--引入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进行演示，这里我们主要先使用依赖包的方式进行
项目搭建使用
javascript
// 创建项目
npx create-vite@latest NexusAntd --template vue-ts
//依赖
yarn add vue-router@latest
yarn add antd🍎安装依赖（npm包方式）
接下来在项目之中引入使用mars3d部分
javascript
//安装mars3d主库，其中mars3d-cesium @turf/turf为依赖库
yarn add mars3d mars3d-cesium @turf/turf
//安装mars3d插件（按需安装）
yarn add mars3d-space --save🍎vite项目配置
- 安装依赖库
javascript
yarn add vite-plugin-mars3d --save-dev- 修改 vite.config.ts 配置文件
javascript
import { defineConfig } from "vite"
import { mars3dPlugin } from "vite-plugin-mars3d"
export default defineConfig({
plugins: [mars3dPlugin()]
})🍎项目使用
在我们项目之中进行使用，我们先采用官方的进行演示
javascript
<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了