# gis-base-sdk
**Repository Path**: sitdown-liu/gis-base-sdk
## Basic Information
- **Project Name**: gis-base-sdk
- **Description**: 作用于GISBase地理信息系统前端实现
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-08-18
- **Last Updated**: 2022-11-04
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## 一、加载地图资源
加载地图资源需要用到地图插件**"OL"**（openlayers v5.x），参考文档 [OpenLayers API Docs](https://openlayers.org/) 。
1. ### 初始化地图插件OL
HTML 示例
```html
```
JavaScript 示例
```javascript
//javascript
import Map from 'ol/Map';
import View from 'ol/View';
const map = new Map({
target: 'map',
view: new View({
center: [108.93, 34.27],
projection: "EPSG:4326",
zoom: 5,
}),
});
```
2. ### 查询可用的地图信息
按"GISBase服务端"API接口文档要求调用"/system/tile/list"。
> http://**{ host_name }**:**{ port_number }**/system/tile/list?pageNum=1&pageSize=10
返参示例
```json
//response body:
{
"code": 200,
"msg": "success",
"rows": [
{
"id": 1,
"mapname": "维基地形图2022",
"maptype": "wiki_terrain",
"isonlinemap": "N",
"bz": "维基地形图2022"
},
......
],
"total": 10,
}
```
返参说明
| 参数 | 说明 |
| ----------- | ------------------------ |
| id | 地图Tile资源id: 主键 |
| isonlinemap | 是否在线地图: Y=是, N=否 |
| mapname | 地图资源名称 |
| maptype | 地图资源类型 |
| bz | 备注 |
3. ### 序列化地图Tile资源
依赖地图插件OL序列化Tile资源, 并通过"GISBase服务端"提供的接口获取Tile资源: "/gis/map/indexTilesServlet"。
示例：
```javascript
//javascript
import Map from 'ol/Map';
import View from 'ol/View';
import { Tile as TileLayer } from 'ol/layer';
import XYZ from 'ol/source/XYZ';
// 初始化ol
const map = new Map({
target: 'map',
view: new View({
center: [108.93, 34.27],
projection: "EPSG:4326",
zoom: 5,
}),
});
// 初始化tile source: "id"需要设置为可用地图tile资源的id
const baseMapSource = new XYZ({
tileUrlFunction: (tileCoord) => {
let [zoom, row, col] = tileCoord;
col = col - 1;
col = 2 * (Math.pow(2, zoom - 1) - col) - 1 + col;
const baseUrl = 'http://{ host_name }:{ port_number }';
const path = '/gis/map/indexTilesServlet';
const url = `${baseUrl}${path}?mapid=${id}&row=${row}&col=${col}&zoom=${zoom}`;
return url;
}
});
// 初始化tile图层
const baseMapLayer = new TileLayer({ source: baseMapSource });
// 加载tile图层的地图资源
map.addLayer(baseMapLayer);
```
## 二、绘制矢量图形
1. 绘制矢量图形需要依赖插件**"GISPLOT"**, 这里以绘制"集结地"为例, 示例如下:
HTML 示例
```html
```
JavaScript 示例
```javascript
//javascript
import Map from 'ol/Map';
import View from 'ol/View';
import { Tile as TileLayer } from 'ol/layer';
import XYZ from 'ol/source/XYZ';
const map = new Map({
target: 'map',
view: new View({
center: [108.93, 34.27],
projection: "EPSG:4326",
zoom: 5,
}),
});
const baseMapSource = new XYZ({
tileUrlFunction: (tileCoord) => {
let [zoom, row, col] = tileCoord;
col = col - 1;
col = 2 * (Math.pow(2, zoom - 1) - col) - 1 + col;
const baseUrl = 'http://{ host_name }:{ port_number }';
const path = '/gis/map/indexTilesServlet';
const url = `${baseUrl}${path}?mapid=${id}&row=${row}&col=${col}&zoom=${zoom}`;
return url;
}
});
const baseMapLayer = new TileLayer({ source: baseMapSource });
map.addLayer(baseMapLayer);
//.....以上是加载地图及Tile资源的示例
import '/gis-plot/gis-plot.css';
import GisPlot from '/gis-plot/gis-plot.js';
// 初始化GISPLOT
const plot = new GisPlot(map, { zoomToExtent: true });
// 监听绘制完成
plot.plotDraw.on('drawEnd', (event) => {
console.log(event);
// "event.feature": 当前完成绘制的矢量图形实例
});
// 开始绘制
drawStart.onClick = () => {
plot.plotEdit.deactivate();
plot.plotDraw.active('GatheringPlace');
};
```
## 三、GISPLOT绘图插件API
1. 激活绘图工具
> GisPlot.plotDraw.active(type)
| type | 图形描述 |
| ----------------- | ------------------ |
| RectFlag | 矩形标志旗 |
| TriangleFlag | 三角标志旗 |
| CurveFlag | 曲线标志旗 |
| Polyline | 直线 |
| Curve | 曲线 |
| FreeHandLine | 自由线 |
| AttackArrow | 进攻方向 |
| TailedAttackArrow | 进攻方向（尾） |
| SquadCombat | 分队战斗行动 |
| TailedSquadCombat | 分队战斗行动（尾） |
| StraightArrow | 单直箭头（细） |
| AssaultDirection | 单直箭头（粗） |
| FineArrow | 单尖箭头（粗） |
| DoubleArrow | 双箭头 |
| GatheringPlace | 集结地 |
| RectAngle | 矩形 |
| Polygon | 多边形 |
| Circle | 圆形 |
| Ellipse | 椭圆形 |
| Sector | 扇形 |
| Lune | 弓形 |
| ClosedCurve | 闭合曲面 |
| FreePolygon | 自由面 |
2. 禁用绘图工具
> GisPlot.plotEdit.deactivate()
3. 方法
| 方法 | 参数 | 说明 |
| ----------------------------------- | ---------------- | ---------------------------- |
| GisPlot.plotUtils.getFeatures | | 序列化地图上所有矢量图形数据 |
| GisPlot.plotUtils.addFeatures | features : Array | 反序列化矢量图形数据 |
| GisPlot.plotUtils.removeAllFeatures | | 删除所有矢量图形数据 |
| GisPlot.plotUtils.getFeature | feature | 序列化单个矢量图形数据 |
| GisPlot.plotUtils.addFeature | feature | 反序列化单个矢量图形数据 |
4. 事件监听
| 事件名称 | 说明 |
| -------- | -------- |
| drawEnd | 绘制完成 |