《Mars2D 快速上手，从零搭建三维 GIS 项目》

前言

做 Web 三维 GIS 开发，原生 Cesium 配置繁琐、API 厚重，开发效率低。Mars2D 是基于 Cesium 封装的国产 WebGIS 三维地图开发平台，简化了三维场景、图层、标绘、分析等能力，降低三维可视化开发门槛。

本文基于 Vue3 + Mars2D，从零搭建可运行三维 GIS 项目，手把手完成地图加载、要素渲染，看完即可落地项目。

一、技术栈与环境准备

技术栈

框架：Vue3（也支持 Vue2，代码差异很小）
GIS 库：Mars2D
构建工具：Vite
底图：天地图、高德、OSM 等

1. 创建 Vite 项目

javascript 复制代码

# 创建vue3项目
npm create vite@latest mars2d-demo -- --template vue
cd mars2d-demo
npm install

安装 Mars2D 依赖

javascript 复制代码

npm install mars2d

说明：Mars2D 内部封装 Cesium，不需要单独引入 Cesium，安装完成后直接使用。

二、基础三维地图初始化

新建 src/components/MarsMap.vue

javascript 复制代码

<template>
  <div id="mars-container" style="width:100%;height:80vh;"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import * as mars2d from "mars2d"

let map = null

onMounted(() => {
  // 初始化三维地图
  map = new mars2d.Map("mars-container", {
    // 三维场景配置
    scene: {
      camera: {
        center: { lat: 34.27, lng: 108.95, alt: 2500000, heading: 0, pitch: -90 }
      }
    },
    // 底图图层
    basemaps: [
      {
        name: "天地图影像",
        type: "tdt",
        layer: "img_d",
        key: "你的天地图key",
        show: true
      }
    ]
  })
})

onUnmounted(() => {
  // 销毁地图实例，防止内存泄漏
  if(map){
    map.destroy()
  }
})
</script>

修改 App.vue 引入组件，启动项目 npm run dev，浏览器就能看到三维地球。

⚠️ 注意：天地图需要自己去申请 key，否则底图无法加载。

三、常用功能实操（项目高频）

3.1 添加点位 Marker 标记

javascript 复制代码

// 点位
const point = new mars2d.graphic.Point({
  lat: 34.27,
  lng: 108.95,
  style: {
    color: "#ff0000",
    pixelSize: 12
  },
  attr: { name: "西安市" }
})
map.graphicLayer.addGraphic(point)

3.2 点击弹出信息弹窗

javascript 复制代码

point.on(mars2d.EventType.click, function(e){
  map.openPopup(e.graphic.attr.name, e.graphic.position)
})

3.3 视角飞行定位

javascript 复制代码

// 飞向指定坐标
map.flyToPoint({
  lng:108.95, lat:34.27, alt:5000,
  duration:2
})

3.4 添加矢量面（行政区 / 地块）

javascript 复制代码

const polygon = new mars2d.graphic.Polygon({
  positions: [
    [108.8,34.2],
    [109.1,34.2],
    [109.1,34.4],
    [108.8,34.4]
  ],
  style: {
    fillColor: "#00ffff",
    fillOpacity:0.3
  }
})
map.graphicLayer.addGraphic(polygon)

四、Mars2D 核心能力介绍

多源底图：天地图、高德、百度、OSM、离线瓦片、ArcGIS 服务一键接入
三维模型：支持 glTF/GLB 模型加载，倾斜摄影模型（OSGB）接入
标绘组件：点线面、圆、矩形、箭头、动态轨迹
空间分析：距离面积测量、缓冲区、空间查询、等高线
工具面板：自带测量、图层管理、视角导航、卷帘对比，开箱即用
兼容二维 + 三维：同一套 API，支持 2D 平面地图、3D 地球切换

五、开发踩坑总结（CSDN 读者最关心）

容器必须固定宽高 ：地图容器不能height:100%无父容器，会渲染失败；推荐vh单位
页面销毁一定要 destroy，Vue 组件复用极易内存泄漏
天地图 Key 限制域名，本地开发可以先开启白名单
大量要素渲染：海量点位不要循环 addGraphic，使用mars2d.layer.GeoJsonLayer
倾斜摄影：OSGB 数据需要转换服务，不能直接前端加载大模型

六、学习资源推荐

Mars2D 官网：示例中心有上千个可直接复制的在线 demo
官方文档：API 文档、开发手册、项目模板
开源项目：可下载完整 Vue2/Vue3 项目模板直接二次开发

七、总结

Mars2D 把 Cesium 复杂底层封装起来，让前端开发者不用深耕原生 Cesium，快速交付三维 GIS 可视化项目。适合智慧城市、水利、地质、园区、管线等可视化项目。

掌握基础地图初始化、图层、标绘、弹窗、飞行定位，就能完成 80% WebGIS 业务需求。后续可以继续学习倾斜摄影、空间分析、轨迹动画。

你在三维 GIS 项目中遇到过哪些瓦片加载性能问题？欢迎评论探讨