智能矿区 GIS 管理系统

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

📋 功能特性

🗺️ GIS 核心功能

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

🖱️ 交互功能

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

⚙️ 高级功能

• 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 |

🚀 快速开始

环境要求

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

安装依赖

npm install

启动开发服务器

npm run dev

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

构建生产版本

npm run build

构建产物输出到 dist/ 目录

预览生产版本

npm run preview

⚙️ 配置说明

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

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 管理器核心类

核心文件说明

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

🔧 开发环境配置

推荐 IDE

• VS Code + Vue - Official

GeoServer 代理

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

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

📝 NPM 脚本

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

📦 NPM 包使用

安装

npm install integrated-gis-manager

# 安装 peerDependencies
npm install cesium vue element-plus @element-plus/icons-vue cesium-navigation-es6

基础使用

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()

配置项

| 配置项 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | 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 | 巷道面显示高度阈值(米) |

API 方法

初始化与销毁

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

图层操作

// 加载单个图层
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)

飞行与定位

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

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

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

绘制工具

// 绘制点
gisManager.startDrawingPoint()

// 绘制线
gisManager.startDrawingLine()

// 绘制面
gisManager.startDrawingPolygon()

// 绘制 POI 点
gisManager.startDrawingPOI()

// 停止绘制
gisManager.stopDrawing()

测量工具

// 距离测量
gisManager.startMeasureDistance()

// 面积测量
gisManager.startMeasureArea()

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

实体管理

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

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

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

中心线控制

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

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

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

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

中心线插值 (新增功能)

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

// 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()

连接诊断

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

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

事件回调

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

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

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

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

Vue 组件示例

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { IntegratedGISManager } from 'integrated-gis-manager'

const gisManager = ref(null)

onMounted(async () => {
  gisManager.value = new IntegratedGISManager('#cesiumContainer', {
    geoServerUrl: '/geoserver',
    workspace: 'mining_gis'
  })
  
  // 设置回调
  gisManager.value.onEntityCreated = (data) => {
    console.log('创建实体:', data)
  }
  
  await gisManager.value.init()
})

onUnmounted(() => {
  if (gisManager.value?.viewer) {
    gisManager.value.viewer.destroy()
  }
})
</script>