# angular_ogms_ws

**Repository Path**: opengms/angular_ogms_ws

## Basic Information

- **Project Name**: angular_ogms_ws
- **Description**: 基于前端框架Angular、模型服务容器所开发，用于支撑tif、shp等地理数据的基本信息展示以及操作，包括要素的选中与导出、属性表的展示、调用动态配置的空间分析算法、要素标注样式的更改、tif数据显示所用色带的更改
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: version_1_0_1
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2017-11-01
- **Last Updated**: 2024-08-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OgmsWs

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.3.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build(一定加`--prod`,会有很大程度上的优化)

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

---------

---------

## Custom Document
#### Description

>In short, the project is `an application exploration of Model Service Container` that encapsulates a series of geospatial analysis methods into models that can then be invoked through this project and visualize input or output data of these models , similar to Arc Map, QGIS and so on.

>The project is a front-end and back-end separation project. The front end is developed based on the framework [Angular](https://angular.cn/) and the back end is developed based on `Spring Boot` (Java) (my scholar `Sun Lingzhi`).

>Geospatial analysis is the result of encapsulation of [GDAL](http://www.gdal.org/).

>Data visualization is achieved with [Openlayer 3](https://openlayers.org/).

#### Work Flow Chart

![Work Flow Chart](/src/assets/images/work_flow.png)
#### Main Dependencies
Angular CLI Version `1.6.3`

Angular Version `5.0.0`

angular-sortablejs`^2.5.0`

bootstrap`^3.3.7`

file-saver`^1.3.3`

jquery`^3.2.1`

jszip`^3.1.5`

ng-zorro-antd`^0.7.1`

ng2-toastr`4.1.2`

ng2-tree`2.0.0-alpha.10`

ngx-color-picker`^5.3.0`

ngx-uploader`^4.2.1`

openlayers`^4.6.4`

proj4`^2.4.4`

rxjs`^5.5.2`

sortablejs`^1.7.0`

xml2js`^0.4.19`

#### 主要功能

- 展示：支持shp、tiff等数据的展示，支持添加在线地图底图。

- 要素信息展示：支持要素按字段进行标注、支持简单修改要素的样式。

- 数据导入导出：tiff数据色带变换、shp、tiff等数据导出等。

- 支持缓冲区、反距离插值、叠加分析、泰森多边形等空间分析功能。

- 支持动态增加空间分析方法。

#### 功能详细介绍（2018.6.10版本）
> 主界面

菜单栏功能：添加数据、要素选中开关、缩放至选中图层、空间分析工具箱、空间分析方法配置选项、添加在线地图底图。  
主区域：左边为当前所加载的图层列表、远程数据列表、地图区域。  
状态栏：显示状态信息、鼠标当前坐标点、图层单位、当前视图投影坐标系、当前视图下载为图片。
![main](/screenshots/main.png)

> 基本操作

- 拖动：鼠标左键按住进行拖动。

- 缩放：鼠标滚轮缩放。

- 选中：在要素选中开关打开之后，鼠标单击为单选；左键按住拉框选中多选；按住Ctrl + 鼠标左键点选为多选。

- 添加数据：点击添加数据进行添加，目前只支持shp、tif的.zip压缩格式。

- 删除列表中的数据：选中，按键Delete,对于图层还可以点击每个图层列表项右边的`更多`里的`Remove`进行删除。

- 调整图层顺序： 鼠标左键点击图层名，并按住进行拖动调整。

- 矢量数据要素信息查看：选中工具栏`i`，选中将要查看的矢量数据图层，点击想要查看的要素，即可查看相应的字段信息，如图所示。


![toolConfig](/screenshots/identify.png)


> 空间分析工具的配置


![toolConfig](/screenshots/toolConfig.png)


- 添加工具：选中操作面板左边想要添加的位置（父位置）：如果是添加文件夹，则点击中间的`+`填写name，点击保存即可；如果是添加空间分析工具，则需要将模型服务容器中相应的空间分析工具的id填入（暂时未编写从模型服务容器中获取所有的空间分析方法并点选配置的功能，目前为手动填入），点击保存即可。
- 编辑工具：选中要进行编辑的条目，点击`铅笔图案`可修改name 和 id ,别忘记保存。

- 删除：选中，点击`-`进行删除。

>工具箱的使用

![spatialAnalysis](/screenshots/spatialAnalysis.png)

点击工具栏中`田`字形图标，如图所示，选中将要使用的分析工具，进行输入输出的配置（暂时未写手动输入参数的功能，这里既可以选择上传文件，也可以选择已经加载到图层列表中的数据），点击运行，等待模型运行结束。  

下图以反距离加权插值为例进行截图：

![idw](/screenshots/idw.png)

配置点数据、加权字段，例子中使用的字段为`Elevation`。
插值结果如图：

![idwResult](/screenshots/idwResult.png)

> 数据的导出

- 矢量数据要素选择导出： 打开要素选中开关，选中目标矢量图层,点选、或框选、或按住Ctrl+左键多选要素，选择完成之后，点击目标矢量图层右边的三个小点图标，选择Export Data ，如下图所示：

![exportFeature.png](/screenshots/exportFeature.png)

其中`Format`可选择`geojson` 以及`shpfile` 两种格式；`Export`可选择`All Feature` 和 `Selected Feature`，分别导出所有要素或者导出全部要素；`Data Name`指定导出数据的文件名。

- tiff 数据导出：同上，不过只有下载数据的功能。


> 数据可视化样式的修改

- 矢量数据样式的修改：点击将要修改样式的图层右侧的三点图标，打开`Properties`，其中`General`包含图层的名字、状态、类型、要素类型投影信息等等；`style`中包含目前支持的所有可修改的样式，包括填充色、边线色、线宽、透明度等。效果如下图所示：

![shpStyle.png](/screenshots/shpStyle.png)

- 矢量数据标注样式修改：

接着上面的操作，`Labels`为矢量数据标注样式的属性，包括标注字段、标注偏移量、基线、字体、字色、字体大小等等属性，效果如下图所示：

![shpLabel.png](/screenshots/shpLabel.png)

- tiff数据的样式设置：
 同上操作，只不过在`style`中包含色带变换、透明度等样式。效果如下图所示：

![colorband.png](/screenshots/colorband.png)