本篇是3dtubetilecreater 系列技术文章的第三篇，基于项目真实源码 （Gitee：https://gitee.com/rzcgis/3dtubetilecreater），深度拆解项目**前后端分离架构** 、目录设计、核心模块实现、通信逻辑。
本文不空谈理论，所有代码、配置、模块均对应项目实际文件，帮助你彻底理解这款管线3D Tiles工具的底层架构设计，为二次开发、功能扩展打下基础。
一、项目整体架构设计
1. 架构定位
项目采用纯前后端分离架构，无服务端渲染，职责清晰：
- 前端：负责UI交互、配置输入、Cesium三维预览
- 后端：负责数据库交互、命令行工具调用、任务调度、文件生成
- 数据层：PostGIS 存储三维管线/设施空间数据
- 转换引擎：pg2b3dm + i3dm.export 生成3D Tiles
2. 核心技术栈（官方真实选型）
| 分层 | 技术 | 核心作用 |
|---|---|---|
| 前端 | Vue2 + ElementUI | 页面搭建、表单配置 |
| 三维引擎 | CesiumJS | 3D Tiles加载、管线预览 |
| 后端 | Node.js + Express | HTTP服务、接口开发 |
| 数据库 | PostgreSQL + PostGIS | 空间数据存储与查询 |
| 转换工具 | pg2b3dm / i3dm.export | 空间数据 → 3D Tiles |
| 工程化 | Concurrently | 同时启动前后端服务 |
3. 数据流转链路（核心逻辑）
前端配置参数 → 后端API → PostGIS查询空间数据 → 调用转换工具 → 生成3D Tiles → 前端Cesium加载预览二、前端架构深度解析（client/ 目录）
前端代码位于项目根目录 client/，基于 Vue2 + ElementUI 开发，轻量化、易扩展。
1. 前端完整目录结构（真实项目结构）
client/
├── public/ # 静态资源
├── src/
│ ├── components/ # 业务组件
│ │ ├── ConfigPanel.vue # 数据库/转换参数配置面板
│ │ ├── CesiumViewer.vue # Cesium三维预览容器
│ │ └── TaskList.vue # 转换任务列表
│ ├── utils/ # 工具函数
│ ├── api/ # 后端接口请求
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── vue.config.js # 项目配置+跨域代理
└── package.json # 前端依赖2. 核心配置文件：vue.config.js
项目真实代码，负责端口、跨域代理、静态资源配置：
javascript
// client/vue.config.js
module.exports = {
// 前端服务端口
devServer: {
port: 8080,
// 跨域代理：转发 /api 请求到后端 3000 端口
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
// 关闭eslint校验
lintOnSave: false
}作用：解决前端访问后端接口的跨域问题，是前后端通信的核心配置。
3. 核心组件：CesiumViewer.vue（三维预览）
项目集成 CesiumJS 加载3D Tiles瓦片，核心代码简化版：
vue
<!-- client/src/components/CesiumViewer.vue -->
<template>
<div id="cesiumContainer"></div>
</template>
<script>
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
export default {
name: 'CesiumViewer',
mounted() {
this.initCesium()
},
methods: {
initCesium() {
// 初始化Cesium场景
this.viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
})
},
// 加载生成的3D Tiles
loadTileset(url) {
this.viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({ url })
)
}
}
}
</script>4. 前端架构亮点
- 组件化拆分：配置、预览、任务分离，维护成本极低
- 代理转发：无需后端配置CORS，开发更便捷
- 轻量渲染：仅保留核心三维能力，无冗余依赖
三、后端架构深度解析（server/ 目录）
后端是项目的核心大脑 ，基于 Express 构建，负责数据库连接、工具调用、文件生成，代码位于 server/。
1. 后端完整目录结构（真实项目结构）
server/
├── config.json # 核心配置文件（数据库/端口/工具路径）
├── index.js # 服务入口 + 路由注册
├── routes/ # 接口路由
│ └── tile.js # 3D Tiles生成接口
├── db/ # 数据库连接模块
├── utils/ # 工具函数（执行命令、文件处理）
└── package.json # 后端依赖2. 核心配置文件：config.json
项目真实配置，所有环境参数统一管理：
json
// server/config.json
{
"server": {
"port": 3000
},
"database": {
"host": "localhost",
"port": 5432,
"user": "postgres",
"password": "123456",
"database": "pipeline_3d"
},
"tool": {
"pg2b3dm_path": "pg2b3dm",
"i3dm_export_path": "i3dm.export"
}
}作用：集中管理端口、数据库、转换工具路径，无需硬编码。
3. 服务入口文件：index.js
项目真实启动代码，初始化Express、注册路由、监听端口：
javascript
// server/index.js
const express = require('express')
const cors = require('cors')
const config = require('./config.json')
const tileRouter = require('./routes/tile')
const app = express()
// 中间件
app.use(cors()) // 跨域
app.use(express.json())// 解析JSON
app.use(express.urlencoded({ extended: true }))
// 注册核心接口
app.use('/tile', tileRouter)
// 健康检查接口
app.get('/', (req, res) => {
res.json({ status: 'ok', message: '3dtubetilecreater 服务运行正常' })
})
// 启动服务
app.listen(config.server.port, () => {
console.log(`后端服务运行在 http://localhost:${config.server.port}`)
})4. 核心业务：3D Tiles 生成接口（tile.js）
后端最核心代码 ，通过 child_process 调用系统命令，执行 pg2b3dm/i3dm.export 生成瓦片：
javascript
// server/routes/tile.js
const express = require('express')
const router = express.Router()
const { exec } = require('child_process')
const config = require('../config.json')
// 生成管线3D Tiles（b3dm）
router.post('/create-pipe', (req, res) => {
const { table, geom, height } = req.body
// 拼接pg2b3dm命令
const cmd = `${config.tool.pg2b3dm_path} -h ${config.database.host} -d ${config.database.database} -U ${config.database.user} -p ${config.database.port} -t ${table} -c ${geom} -o ./output/pipe`
// 执行命令生成瓦片
exec(cmd, (error, stdout, stderr) => {
if (error) {
return res.json({ code: 500, msg: '生成失败', error: stderr })
}
res.json({ code: 200, msg: '生成成功', path: '/output/pipe/tileset.json' })
})
})
module.exports = router技术关键点：
- 使用 Node.js 原生
child_process调用外部命令行工具 - 异步执行，不阻塞 Express 主线程
- 直接读取 config.json 配置，动态生成命令
5. PostGIS 数据库连接
后端通过 pg 模块连接 PostGIS，查询空间数据结构：
javascript
// server/db/connection.js
const { Pool } = require('pg')
const config = require('../config.json')
const pool = new Pool({
host: config.database.host,
port: config.database.port,
user: config.database.user,
password: config.database.password,
database: config.database.database
})
module.exports = pool四、前后端通信规范
项目采用RESTful API 进行前后端交互，统一接口格式：
1. 请求基础地址
前端请求：/api/tile/create-pipe
实际转发：http://localhost:3000/tile/create-pipe2. 统一响应格式
json
{
"code": 200, // 200成功 500失败
"msg": "提示信息",
"data": {} // 业务数据
}3. 核心接口列表
| 接口 | 作用 |
|---|---|
| POST /tile/create-pipe | 生成管线b3dm瓦片 |
| POST /tile/create-facility | 生成设施i3dm瓦片 |
| GET /tile/status | 查询任务状态 |
五、项目架构设计亮点
结合项目源码，总结4个核心设计优势：
- 配置中心化
所有参数收敛到server/config.json，修改无需改动业务代码 - 职责极致分离
前端只管交互/预览，后端只管数据/转换，无耦合 - 工具无侵入
直接调用开源 pg2b3dm/i3dm.export，不修改源码，兼容性强 - 轻量化部署
纯 Node.js 环境，无需Java/.NET，一键启动 - 扩展友好
新增接口/组件只需对应目录添加文件，架构无侵入
六、常见架构问题（避坑指南）
- 跨域失败
→ 检查vue.config.js代理地址与后端端口一致 - 后端无法调用转换工具
→ 检查config.json中工具路径是否配置正确 - PostGIS连接失败
→ 验证数据库配置、服务状态、PostGIS扩展是否启用 - 瓦片生成后前端无法加载
→ 检查文件输出路径、Cesium加载地址是否正确
七、总结与下篇预告
本篇总结
- 3dtubetilecreater 采用 Vue+Express 前后端分离架构
- 前端负责交互与三维预览，后端负责数据与瓦片生成
- 核心依赖
child_process调用开源转换工具，架构轻量易扩展 - 所有配置、接口、组件均对应项目真实源码，可直接二次开发
下篇预告
第4篇：核心功能深挖｜管线数据→3D Tiles转换原理与代码实现
将深度解析：
- PostGIS 空间数据格式要求
- pg2b3dm / i3dm.export 命令参数详解
- 瓦片生成完整代码逐行讲解
项目信息
- Gitee 仓库：https://gitee.com/rzcgis/3dtubetilecreater
- 系列文章：持续更新 GIS 三维可视化、3D Tiles 实战干货
- 适用场景：市政管线、地下管网、Cesium 三维可视化项目