# PepperFrontend

**Repository Path**: hwc0632/PepperFrontend

## Basic Information

- **Project Name**: PepperFrontend
- **Description**: 大前端框架的前端，采用angular框架
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2025-07-28
- **Last Updated**: 2025-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PepperGIS

<p align="center">
   <img src="./src/assets/images/markdown/pepper-gis.png" />
</p>

<h2 align="center">
  <strong>  
     致力于打造面向GIS与遥感领域的功能最全面、最强大的开源大前端平台 
   </strong>
</h2>
<br/>

PepperGIS 是一个面向 GIS 与遥感业务领域的大前端平台，包括 Web 网站、微信小程序以及跨平台移动 APP，目前，项目仅包含网站，仍在不断完善中，后续会加入微信小程序和跨平台移动端。

PepperGIS 大前端平台的网站前端采用最新的 Angular 框架，地图功能兼容 Leaflet、Mapbox GL JS 以及 ArcGIS Javascript API。网站后端采用 Flask Restful API 框架。数据库采用 PostgreSQL，空间数据库采用 PostGIS 扩展或 ArcSDE 扩展。地图服务采用 GeoServer 或 ArcGIS Server。

PepperGIS 大前端平台包括以下项目库：

- 网站前端(**_本项目库_**)：[PepperFrontend](https://gitee.com/FuXinLe/PepperFrontend)
- 网站后端: [PepperBackend](https://gitee.com/FuXinLe/PepperBackend)
- 微信小程序：[PepperWebchatApplet](https://gitee.com/FuXinLe/PepperWechatApplet)
- 跨平台移动端：[PepperMobile](https://gitee.com/FuXinLe/PepperMobile)

<br/>

# PepperFrontend

## 概述

<br/>

<p align="center">
   <img  width="80%" src="./src/assets/images/markdown/pepperfront-overview.png" />
</p>

<br/>

网站前端采用最新的 Angular 框架，地图功能兼容 Leaflet、Mapbox GL JS 以及 ArcGIS Javascript API，样式采用 BoostStrap 5 作为基础样式库，充分利用 CSS Variable 实现不同项目不同主题实时任意切换。网站预览请点击下面链接：

- 网站预览: [PepperGIS](https://gitee.com/FuXinLe/PepperBackend)

<br/>

## 框架特色

<br/>

> - 现代 UI 设计 简洁清爽

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/ui-show.gif" />
</p>

> - CSS 变量 多种风格主题实时切换

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/theme-switch.gif" />
</p>

> - Layout 布局 多种 Header 和 Sidebar 实时切换

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/layout-switch.gif" />
</p>

> - 可视化的流程设计工具

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/flow.gif" />
</p>

> - 可视化的表单设计工具

> - 业务流程零代码配置

> - Web 实现 ArcGIS Model Builder 构建地理处理模型

> - 基于 Angular 组件的理念 设计若干自定义组件

- > > > 1.tree

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/tree.png" />
</p>

- > > > 2.tree-select

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/tree-select.png" />
</p>

- > > > 3.用户角色权限

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/user-role-authorize.png" />
</p>

- > > > 4.用户日志

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/user-log.png" />
</p>

- > > > 5.PDF 阅读

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/pdf-view.png" />
</p>

- > > > 6.图片滤镜

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/image-filter.png" />
</p>

> - 天地图、高德、谷歌等底图一键切换

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/basemap-switch.gif" />
</p>

> - 地图二三维一体化

利用 Leaflet、Mapbox GL JS 以及 ArcGIS Javascript API 进行二维地图展示与操作，Cesium 进行三维地图的展示与操作。

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/two-tree-d.gif" />
</p>

> - Prettier 工具代码格式统一化，统一美化

参考项目目录下的 **_.prettierignore_**、**_.prettierrc_**、**_.prettierrc.js_** 文件。

Prettier 官网：[Prettier](https://prettier.io/)

> - ESLint Javascript 代码规则检查

参考项目目录下的 **_.eslintrc.js_** 文件。

ESLint 官网：[ESLint](https://eslint.org/)

> - StyleLint SCSS/CSS 代码规则检查

参考项目目录下的 **_.stylelintrc.js_** 文件。

StyleLint 官网：[StyleLint](https://stylelint.io/)

> - Docker 跨平台一键式环境隔离部署

参考项目目录下的 **_Dockerfile_** 、**_.dockerignore_** 文件。

> - 完善的开发文档

参考项目 document 目录下的 **_前端开发手册.docx_** 文档。

> -

<br/>

## 框架功能

<br/>

目前，PepperFrontend 前端框架上已经开发集成了 **_开发展示系统_** 、 **_遥感影像智能解译平台_** 以及 **_防火应急指挥平台_** 三个系统，面向测绘生产的 **_信息化测绘生产管理系统_** 与 **_实景三维倾斜模型展示与分析平台_** 正在研发过程中，其他若干系统在计划中...

> - 开发展示系统

开发展示系统显示 PepperGIS 框架结构、基本 Ui 控件设计样式、自定义的功能组件、CSS 特效集合、地图 widget 组件。

基本 Ui 控件设计样式以 Bootstrap 5 作为基础样式库，利用 CSS Variables 实现控件主题样式定制。

自定义的功能组件包含 tree、tree-select、流程组件、表单组件、用户角色权限组件等数十种自定义的功能组件。

地图组件包含二维地图和三维地图，遵循 widget 的理念设计地图小组件，每个地图功能封装为一个 widget 小组件。二维地图支持 Leaflet、Mapbox GL JS 和 ArcGIS JavaScript API 三种客户端 JS，三维地图采用 Cesium 实现。

- > > > 1.主页

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/development-home.png" />
</p>

- > > > 2.基本 Ui 控件设计样式

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/development-style-component.png" />
</p>

- > > > 3.自定义的功能组件

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/development-customize-component.png" />
</p>

- > > > 4.CSS 特效集合

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/development-css-trick.png" />
</p>

- > > > 5.地图 widget 组件

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/development-map-scene-widget.png" />
</p>

> - 遥感影像智能解译平台

遥感影像智能解译平台包含统计信息主页、遥感影像智能解译案例展示、样本数据集管理、模型训练、基于 Web 遥感影像实时解译以及用户角色权限管理、帮助手册等系统功能。

主页显示统计信息，包括样本数量、影像数量、模型数量以及系统的 GPU、CPU、磁盘等监控信息。

遥感影像智能解译案例展示显示利用本系统进行的一些遥感影像解译案例。

样本数据集管理对样本进行查询、导入、删除、更新等基本操作管理，并在地图上集中可视化展示。

模型训练是基于 Web 页面的在服务器上样本训练，显示训练进度以及训练指标等信息。

基于 Web 遥感影像实时解译选择遥感影像进行解译，实时显示进度以及解译的结果。

- > > > 1.主页

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/images-ai-home.png" />
</p>

- > > > 2.遥感影像智能解译案例展示

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/images-ai-case-show.png" />
</p>

- > > > 3.样本数据集管理

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/images-ai-data-manage.png" />
</p>

- > > > 4.模型管理

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/images-ai-model-manage.png" />
</p>

- > > > 5.模型训练

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/images-ai-model-training.png" />
</p>

- > > > 6.基于 Web 遥感影像实时解译

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/images-ai-model-interpretation.png" />
</p>

> - 防火应急指挥平台

防火应急指挥平台是一个大屏展示平台，包含面向领导展示统计信息的主页、灾害救援数据一张图显示、指挥决策灾害救援分析以及灾害点监测预警。

主页显示了承灾体、重点隐患、减灾资源以及历史灾害等统计信息。

数据一张图在地图上显示灾害资源、减灾资源以及承灾体等灾害救援数据。

指挥决策功能可以标记灾害点，对灾害点进行缓冲区分析，找出救灾资源以及救灾路线、模拟灾害救灾情况。

灾害点监测预警对火点信息、雨情站进行实时监测预警，以及借助无人机、视频进行监控。

- > > > 1.主页

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/emergency-command-leader-show.png" />
</p>

- > > > 2.数据一张图

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/emergency-command-one-map.png" />
</p>

- > > > 3.指挥决策

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/emergency-command-command-decision.png" />
</p>

- > > > 4.灾害点监测预警

<p align="center">
   <img width="80%"  src="./src/assets/images/markdown/emergency-command-monitor-warning.png" />
</p>

> - 信息化测绘生产管理系统

> - 实景三维倾斜模型展示与分析平台

> - 自然资源督察成果管理系统

<br/>

## 合作

<br/>

> - 合作方式

- 开源代码库，成为一名代码贡献者！

- 邀请框架开发者免费讲解框架，在框架基础上开发自己的项目！

- 单位/公司商业合作！

> - 联系方式

<p align="center">
   <img width="300px" src="./src/assets/images/markdown/qq-group.jpg" />
</p>

<br/>