智能矿区 GIS 管理系统

!版本
!Vue
!Cesium
!Vite

基于 Vue 3 + Cesium + Element Plus 构建的三维矿区地理信息系统，提供矿区图层管理、巷道可视化、POI 标注、实体绘制、测量工具等功能。

---

📋 功能特性

$3

- 三维地图展示 - 基于 Cesium 的 3D 地球可视化
- 矿区管理 - 多矿区切换、矿区边界显示
- 图层管理 - WMS/WFS 图层加载、显隐控制、透明度设置
- 巷道显示 - 巷道面渲染、中心线显隐控制、动态标签
- 采空区管理 - 采空区多边形渲染、分级标签显示
- 中心线插值 - 🆕 在巷道中心线上两点间插值，生成采样点并保存到数据库

$3

- POI 点管理 - 添加/编辑/删除 POI 点、表单编辑
- 实体绘制 - 绘制点、线、面，临时实体管理
- 测量工具 - 距离测量、面积测量
- 实体选择 - 点击选择、属性查看编辑
- 坐标拾取 - 支持投影坐标 (EPSG:3857) 和经纬度 (EPSG:4326) 切换

$3

- GeoServer 集成 - WFS 服务对接、图层发布、属性查询
- 动态标签 - 基于相机高度/比例尺的智能标签缩放与显隐
- 相机约束 - 限制相机视角范围、灵敏度控制
- 渲染质量控制 - FXAA/MSAA 抗锯齿、分辨率缩放配置

---

🛠️ 技术栈

| 类别 | 技术 | 版本 |
|------|------|------|
| 前端框架 | Vue | 3.4.21 |
| 构建工具 | Vite | 5.2.7 |
| 3D GIS 引擎 | Cesium | 1.116.0 |
| UI 组件库 | Element Plus | 2.11.7 |
| HTTP 客户端 | Axios | 1.10.0 |
| 地理计算 | Turf.js | 7.2.0 |
| 坐标转换 | Proj4 | 2.19.5 |
| 字体解析 | OpenType.js | 1.3.4 |

---

🚀 快速开始

$3

- Node.js >= 16.0.0
- npm >= 8.0.0

$3

``bash
npm install
`

$3

`bash
npm run dev
`

启动后自动打开浏览器访问 http://localhost:5173

$3

`bash
npm run build
`

构建产物输出到 dist/ 目录

$3

`bash
npm run preview
`

---

⚙️ 配置说明

配置文件位于 public/config/index.js，主要配置项：

`javascript
window.config = {
// Cesium Ion 令牌（必须配置）
cesiumIonToken: "your_cesium_ion_token",

// GeoServer 配置
geoserver: {
url: "/geoserver", // GeoServer 服务地址
workspace: "mining_gis", // 工作空间名称
username: "admin", // 用户名
password: "geoserver", // 密码
namespaceUri: "http://..." // 命名空间 URI
},

// 数据库配置（PostgreSQL）
database: {
host: "localhost",
port: 5432,
database: "mining_gis",
username: "mining_user",
password: "your_password"
},

// 渲染质量配置
render: {
fxaa: false, // FXAA 抗锯齿开关
msaa: 8, // MSAA 采样数：2/4/8/16
resolutionScale: null // 分辨率缩放：null=跟随系统DPI
}
}
`

---

📁 项目结构

`
mk-gis-map-master/
├── index.html # HTML 入口
├── package.json # 项目配置
├── vite.config.js # Vite 构建配置（含 GeoServer 代理）
├── README.md # 项目说明
│
├── public/ # 静态资源
│ ├── config/
│ │ └── index.js # 全局配置文件 ⭐
│ └── fonts/ # 字体文件
│
└── src/ # 源代码
├── App.vue # 根组件
├── main.js # 应用入口
├── style.css # 全局样式
│
└── test2/ # 核心 GIS 模块 ⭐
├── components/
│ └── IntegratedGISMap.vue # 集成 GIS 地图组件
└── lib/
└── integrated-gis-manager.js # GIS 管理器核心类
`

$3

| 文件 | 说明 |
|------|------|
| IntegratedGISMap.vue | 主地图组件，包含 UI 界面、图层控制、绘制工具、测量工具等 |
| integrated-gis-manager.js | GIS 管理器类，封装 Cesium 操作、图层管理、实体绘制、WFS 交互等核心逻辑 |

---

🔧 开发环境配置

$3

- VS Code + Vue - Official

$3

开发环境通过 Vite 代理访问 GeoServer：

`javascript
// vite.config.js
proxy: {
'/geoserver': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
`

---

📝 NPM 脚本

| 命令 | 说明 |
|------|------|
| npm run dev | 启动开发服务器 |
| npm run build | 构建生产版本 |
| npm run preview | 预览构建产物 |

---

📦 NPM 包使用

$3

`bash
npm install integrated-gis-manager

安装 peerDependencies

npm install cesium vue element-plus @element-plus/icons-vue cesium-navigation-es6
`

$3

`javascript
import { IntegratedGISManager } from 'integrated-gis-manager'

// 创建实例
const gisManager = new IntegratedGISManager('#cesiumContainer', {
geoServerUrl: '/geoserver',
workspace: 'mining_gis',
username: 'admin',
password: 'geoserver',
debug: true
})

// 初始化
await gisManager.init()
`

$3

| 配置项 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| geoServerUrl | string | /geoserver | GeoServer 服务地址 |
| workspace | string | mining_gis | 工作空间名称 |
| username | string | admin | GeoServer 用户名 |
| password | string | geoserver | GeoServer 密码 |
| debug | boolean | true | 调试模式 |
| wfsVersion | string | 1.1.0 | WFS 版本 |
| vectorLabelBaseFontSize | number | 12 | 矢量标签基础字体大小 |
| tunnelPolygonVisibilityThreshold | number | 1000 | 巷道面显示高度阈值(米) |

$3

#### 初始化与销毁

`javascript
await gisManager.init() // 初始化地图
gisManager.viewer.destroy() // 销毁实例
`

#### 图层操作

`javascript
// 加载单个图层
await gisManager.loadLayer(miningAreaId, layerTypeId)

// 加载矿区所有图层
await gisManager.loadAllLayersForArea(miningAreaId)

// 获取所有可用图层
const layers = await gisManager.getAllLayers()

// 设置图层可见性
gisManager.setLayerVisibility(miningAreaId, layerTypeId, true)

// 清除所有图层
gisManager.clearAllLayers()

// 刷新图层
await gisManager.refreshLayer(miningAreaId, layerTypeId)
`

#### 飞行与定位

`javascript
// 飞行到矿区
await gisManager.flyToMiningArea(miningAreaId)

// 设置默认视图
gisManager.setDefaultView()

// 设置相机约束
gisManager.setupCameraConstraints(bounds, multiplier)
`

#### 绘制工具

`javascript
// 绘制点
gisManager.startDrawingPoint()

// 绘制线
gisManager.startDrawingLine()

// 绘制面
gisManager.startDrawingPolygon()

// 绘制 POI 点
gisManager.startDrawingPOI()

// 停止绘制
gisManager.stopDrawing()
`

#### 测量工具

`javascript
// 距离测量
gisManager.startMeasureDistance()

// 面积测量
gisManager.startMeasureArea()

// 清除测量结果
gisManager.clearMeasure()
`

#### 实体管理

`javascript
// 获取临时实体
const entities = gisManager.getTemporaryEntities()

// 删除临时实体
gisManager.removeTemporaryEntity(entityId)

// 清除所有临时实体
gisManager.clearTemporaryEntities()
`

#### 中心线控制

`javascript
// 获取中心线可见性
const visible = gisManager.getCenterlineVisibility(miningAreaId)

// 设置中心线可见性
gisManager.setCenterlineVisibility(miningAreaId, true)

// 切换中心线显隐
gisManager.toggleCenterlineVisibility(miningAreaId)

// 获取中心线数量
const count = gisManager.getCenterlineCount(miningAreaId)
`

#### 中心线插值 (新增功能)

在巷道中心线上选择两点，按指定间隔生成插值点，并保存到数据库。

`javascript
// 1. 获取所有中心线坐标
const centerlines = gisManager.getAllCenterlineCoordinates(miningAreaId)

// 2. 执行插值计算
const pointA = { name: '起点A', coordinates: [108.123, 34.456] }
const pointB = { name: '终点B', coordinates: [108.234, 34.567] }
const interval = 10 // 插值间隔（米）

const result = gisManager.interpolateCenterline(
pointA,
pointB,
centerlines[0].coordinates,
interval
)

// result 包含:
// - success: boolean 是否成功
// - points: Array 插值点数组
// - geometry: Object MultiPoint GeoJSON 几何对象
// - totalDistance: number 总距离（米）

// 3. 预览插值点（可选）
const previewIds = gisManager.previewInterpolationPoints(result, {
pointColor: Cesium.Color.LIME,
pointSize: 8,
showLabels: true
})

// 4. 清除预览
gisManager.clearInterpolationPreview(previewIds)

// 5. 保存到数据库
await gisManager.saveInterpolationPoints(result, miningAreaId)

// 6. 交互式选点模式
const controller = gisManager.startCenterlinePointSelection(
miningAreaId,
(pointInfo, index) => {
console.log(已选择第 ${index} 个点:, pointInfo)
},
(allPoints) => {
console.log('选点完成:', allPoints)
}
)

// 取消选点
controller.cancel()
`

#### 连接诊断

`javascript
// 测试 GeoServer 连接
const result = await gisManager.testConnection()

// 诊断连接问题
const diagnosis = await gisManager.diagnoseGeoServerConnection()
`

$3

`javascript
// 实体创建回调
gisManager.onEntityCreated = (entityData) => {
console.log('新实体创建:', entityData)
}

// 实体选择回调
gisManager.onEntitySelected = (entity) => {
console.log('选中实体:', entity)
}

// 临时实体添加回调
gisManager.onTemporaryEntityAdded = (entity) => {
console.log('临时实体已添加')
}

// 坐标轴顺序解析回调
gisManager.onAxisOrderResolved = (axisOrder) => {
console.log('坐标轴顺序:', axisOrder)
}
`

$3

`vue



``