矿产分布图

基于 Electron 运行时的鸿蒙桌面应用，一款专业的中国矿产资源分布可视化工具。

欢迎加入开源鸿蒙PC社区： https://harmonypc.csdn.net

重要提示：本应用需要 HarmonyOS API 23 及以上版本运行。

项目简介

矿产分布图应用帮助用户了解中国丰富的矿产资源分布情况，通过交互式地图展示煤炭、铁矿、铜矿、金矿、稀土和石油等主要矿产的分布位置，支持按类型筛选查看，点击标记可查看详细信息。

┌─────────────────────────────────────────────────────┐
│                    前端应用层                      │
│      (HTML/CSS/JavaScript + 地图可视化)          │
├─────────────────────────────────────────────────────┤
│              Electron + Preload 层                 │
│              (IPC 通信、API 暴露)                 │
├─────────────────────────────────────────────────────┤
│               HarmonyOS 原生层                      │
│         (libadapter.so + ETS Adapters)            │
└─────────────────────────────────────────────────────┘

功能特性

⛏️ 矿产分布图

• 中国地图可视化展示
• 15个主要矿产分布标记
• 脉冲动画效果标记点
• 按经纬度精准定位

🔍 类型筛选

• 全部矿产查看
• 煤炭资源筛选
• 铁矿资源筛选
• 铜矿资源筛选
• 金矿资源筛选
• 稀土资源筛选
• 石油资源筛选

📊 统计图表

• 各类矿产数量统计
• 可视化进度条展示
• 直观的数据对比

📋 详情面板

• 矿产名称和类型
• 储量信息
• 所在省份
• 矿产特点描述

📚 矿产知识

• 矿产资源定义
• 矿产分类知识
• 中国矿产特点
• 可持续发展理念
• 稀土资源介绍
• 资源保护知识

项目结构

electron-openharmony-vue3/
├── ohos_hap/
│   ├── electron/
│   ├── web_engine/
│   │   └── src/main/resources/resfile/resources/app/
│   │       ├── mineral_map.html           # 主页面
│   │       ├── mineral_map_style.css      # 样式文件
│   │       ├── main.js                   # Electron入口
│   │       └── js/
│   │           ├── mineral_map_data.js    # 数据文件
│   │           └── mineral_map_core.js   # 核心逻辑
│   ├── AppScope/
│   └── BUILD_OUTPUT.md
├── docs/
│   └── 矿产分布图技术实现详解.md
└── README.md

快速开始

环境要求

• Node.js 18+
• DevEco Studio 5.0+
• HarmonyOS SDK (API 23+) ⚠️
• Windows 10/11 或 macOS 10.14+

运行项目

在 DevEco Studio 中打开项目，直接运行即可。

构建 HAP

cd ohos_hap
hvigorw assembleHap

构建产物输出到 ohos_hap/build/outputs/hap/ 目录。

技术架构

核心模块

模块	文件	说明
视图层	mineral_map.html	页面结构和组件布局
样式层	mineral_map_style.css	绿色主题样式
数据层	js/mineral_map_data.js	矿产数据和配置
逻辑层	js/mineral_map_core.js	地图渲染和交互

技术亮点

• 地图坐标映射：经纬度到屏幕坐标的精确转换
• 动态标记渲染：脉冲动画效果增强视觉体验
• 类型筛选：交互式筛选各类矿产资源
• 响应式设计：适配多种屏幕尺寸

技术栈

类别	技术	说明
框架	HTML5	语义化页面结构
样式	CSS3	主题样式和动画
脚本	JavaScript ES6+	交互控制和计算
运行时	Electron	鸿蒙定制版

使用示例

查看矿产分布

1. 打开应用查看中国矿产分布图
2. 点击不同类型标签筛选矿产
3. 点击地图上的标记点查看详情

查看统计信息

1. 滚动到统计图表区域
2. 查看各类矿产的数量对比
3. 阅读矿产知识卡片

矿产数据

类型	数量	主要产地
煤炭	4	山西、内蒙古、陕西、新疆
铁矿	3	辽宁、河北、湖北
铜矿	2	江西、云南
金矿	2	山东、河南
稀土	2	内蒙古、江西
石油	2	黑龙江、新疆

相关文档

• BUILD_OUTPUT.md - 构建输出说明
• docs/矿产分布图技术实现详解.md - 详细技术文档

License

MIT

更新日志

v1.0.0 (2026)

• 初始版本发布
• 中国矿产分布图展示
• 6种矿产类型筛选
• 15个主要矿产数据
• 交互式详情面板
• 统计图表展示
• 矿产知识科普
• Electron + OpenHarmony 融合框架
• 需要 HarmonyOS API 23+
• 响应式设计支持