基于 Vue+Mapbox 的智慧矿山可视化功能的技术拆解

GIS遥遥

1242人浏览 · 2025-09-10 09:40:15

GIS遥遥 · 2025-09-10 09:40:15 发布

01、项目背景

在全球矿业加速向 “高端化、智能化、绿色化” 转型的浪潮下，传统矿业面临的深地开采难题、效率瓶颈与安全隐患日益凸显。

在矿业转型的迫切需求与政策、技术支撑的背景下依托 GIS 技术，开展了 “中国智矿” GIS 开发项目，旨在以技术创新推动矿产资源智能化建设。

点这里查看完整项目演示视频https://www.bilibili.com/video/BV16rYPz2E8b/

02、项目意义

智慧矿产项目通过多方面助力矿业发展：以传感器、智能监测设备及数据分析实现矿山安全与生态环境实时精准管控，提升安全生产水平、助力环境保护；引入自动化设备与优化调度减少人工干预，提高开采效率、降低企业运营成本；推动新一代信息技术与矿业深度融合促进产业升级，同时以智慧化手段提升资源利用效率，挖掘国内潜力、保障国家资源安全。

03、项目重点功能

导航功能

项目集成了专业的地图导航功能，为矿区内的人员和车辆提供精确的路径规划。该功能的核心技术实现如下：

引入核心库：

使用 @mapbox/mapbox-gl-directions 库作为导航功能的基础。

import Direction from "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.js";
import "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css";

该代码用于加载Mapbox Directions插件的核心功能和样式文件，使用前需确保已通过npm或yarn安装相关依赖：

npm install @mapbox/mapbox-gl-directions

实例化与挂载：

在组件挂载（onMounted）时，实例化 Direction 类，并将其生成的UI元素添加到页面指定容器中。

const directions = new Direction({
  accessToken: MAPBOX_ACCESS_TOKEN
});

directionsContainer.appendChild(
  directions.onAdd(map)
);

功能说明

该代码实现Mapbox Directions控件的初始化和挂载。通过Direction类创建方向查询实例，使用指定的MAPBOX_ACCESS_TOKEN进行认证。

创建实例后调用onAdd(map)方法生成UI元素，将其添加到指定的DOM容器directionsContainer中。map参数应为已初始化的Mapbox地图实例。

注意事项

MAPBOX_ACCESS_TOKEN需替换为有效的Mapbox访问令牌
directionsContainer需预先定义为页面上的DOM元素
map需提前初始化为Mapbox地图实例
需确保已正确加载Mapbox GL JS库和Direction插件

动态显隐控制：

通过监听父组件传递的属性（props.showNavigation），动态改变导航面板的 display 样式，实现功能的按需显示和隐藏。

watch(
  () => props.showNavigation,
  (newValue) => {
    directionsContainer.style.display = newValue ? 'block' : 'none';
  }
);

代码功能说明

这段代码使用 Vue 的 watch 函数监听 props.showNavigation 的变化。当该属性值发生变化时，回调函数会根据新的布尔值 newValue 来设置 directionsContainer 元素的显示状态。

代码解析

watch 是 Vue 的响应式 API，用于观察和响应数据变化
第一个参数是监听源，这里使用 getter 函数监听 props.showNavigation
第二个参数是回调函数，接收 newValue 参数
使用三元运算符根据 newValue 设置 display 样式属性
block 表示显示元素，none 表示隐藏元素

使用建议

确保 directionsContainer 在作用域内可访问如果使用 TypeScript，可以考虑添加类型注解可以考虑添加 immediate: true 选项来立即执行一次回调

04、矿产进口动态可视化

此功能旨在直观展示中国主要矿产资源的全球贸易流向，其核心亮点包括：

一键切换至全球贸易视角：点击功能按钮后，系统自动将地图从3D地球模式切换为2D平面模式，并聚焦于全球主要航运区域，为分析国际贸易流向提供最佳视图。

数据驱动的动态流向线：系统在地图上绘制出由数据驱动的动态流向线，生动地展示了铁矿、铜矿等关键矿产从澳大利亚、巴西等主要来源国到中国的宏观运输路径。

直观的动画模拟：流向线采用“光点流动”的动画效果，不仅清晰地指明了贸易方向，更直观地模拟了资源在广阔大洋上的运输轨迹，使数据“活”了起来。

多维信息联动分析：在此模式下，系统会同步加载矿产进口统计图表与重点海域气象信息面板，为用户从数据和环境等多个维度综合评估供应链稳定性，提供了一体化的决策支持界面。

05、其他核心功能

除上述功能外，项目还实现了公交路线查询和矿企信息查询等实用功能。这些功能在答辩中以效果图形式进行了展示，为用户提供了便捷的信息查询服务。

06、项目总结与展望

项目核心价值总结

“中国智慧矿山”项目以物联网、人工智能、大数据、5G等先进技术为支撑，构建了涵盖智能化生产、全方位安全监测、信息化管理以及高效通信网络的完整体系。在生产环节，智能开采设备、无人驾驶运输工具的应用，使矿山开采、运输等流程实现了自动化运转；在安全监测方面，通过遍布矿山的各类传感器和智能分析系统，能够实时捕捉安全隐患并及时处置；信息化管理平台则整合了生产、安全、设备等各类数据，为科学决策提供了有力支持。