@vtx/cs-map/README.md

React components for Vortex

# cs-map

基于 cesium 封装的地图库

## 整体思路

## 组件列表

- 地图 Map
  - 底图切换
    - 天地图-矢量
    - 天地图-卫星
  - 绘制 Draw
    - 点
    - 线
    - 面
    - 圆
  - 图层 Layer
    - 图形图层
    - 影像图层
- 工具栏
  - 搜索
  - 工具
    - 测距
    - 测面
    - 框选
    - 圈选
    - 多边形选择
    - 地图书签
    - 地图下载
    - 地图打印
    - 空间定位查询
    - 比例尺
    - 鹰眼
  - 视图
    - 默认视角
    - 放大
    - 缩小
  - 分析
    - 管网基础分析
      - 缓冲区分析
      - 联通性分析
      - 流向性分析
      - 横截面分析
      - 纵断面分析
    - 管网结构智能诊断
      - 爆管关阀分析
      - 消防栓分析
      - 纳污范围分析
      - 污染源分析
      - 大口径分析
    - 管网智能分析
      - 孤立区域诊断
      - 环状管网诊断
      - 逆坡识别诊断
      - 流向异常诊断
      - 大管套小管诊断
  - 图层
    - 全选
    - 行政区划
    - ......

### 地图

#### method

| 方法                          | 作用              |
|-----------------------------|-----------------|
| getLayerByFeature(feature)  | 通过图形查询所属图层      |
| getLayerByKey(keys)         | 根据 keys 查找展示的图层 |
| getVisibleLayersByKeys(key) | 根据 keys 查找展示的图层 |
| showTip(content)            | 展示提示            |
| hideTip()                   | 隐藏提示            |
| showModal(params)           | 展示弹窗            |

### FeatureLayer 图形图层

#### 示例
```jsx
// 加载 geoserver
let layer = new FeatureLayer({
  url: '/geoserver/zhsw/wms',
  params: {
    service: 'WFS',
    version: '1.0.0',
    request: 'GetFeature',
    maxFeatures: 99999,
    outputFormat: 'application/json',
    typeName: 'zhsw:putian_network_access_enterprise',
    QUERY_LAYERS: 'zhsw:putian_network_access_enterprise',
    ...params,
  },
  style: 'RWQY',
  zIndex: 5,
  key: 'SS_RWQY',
  name: '入网企业',
  autoRefresh: true,
  template: feature => {
    return <div>{feature.values_.name}</div>;
  }
});

map.addLayer(layer);
```

```jsx
// 加载 接口
let layer = new FeatureLayer({
  url: '/cloud/zhsw-jcss/api/device/list',
  params: {
    deviceTypeId: 'WATER_METER',
  },
  style: 'YWJ',
  zIndex: 5,
  key: 'SB_YWJ',
  name: '液位计',
  labelField: 'deviceFactoryName',
  autoRefresh: true, // 自动刷新
  template: feature => {
    return <PopupTemplate feature={feature} map={map} />;
  },
});

map.addLayer(layer);
```

```jsx
// 加载 数据
let layer = new FeatureLayer({
  data: {name: 'xxx液位计', geometryInfo: {coordType: "wgs84", type: 'point', lngLats: '119.0248,25.6389'}}, // []
  style: 'YWJ',
  zIndex: 5,
  key: 'SB_YWJ',
  name: '液位计',
  labelField: 'name',
  autoRefresh: true, // 自动刷新
  template: feature => {
    return <PopupTemplate feature={feature} map={map} />;
  },
});

map.addLayer(layer);
```

#### api

| 参数            | 说明                                                | 类型        | 是否必填 |
|---------------|---------------------------------------------------|-----------|------|
| url           | 图层接口                                              | string    | 否    |
| method        | 请求方式                                              | string    | 否    |
| params        | 请求参数                                              | object    | 否    |
| sourceOptions | 数据源图层其他参数                                         | object    | 否    |
| data          | 直接通过 json 数据渲染，可忽略上面的请求，但注意必须包含 `geometryInfo` 字段 | object    | 否    |
| features      | 直接通过图形数据渲染，可忽略上面的请求                               | object    | 否    |
| key           | 图层标识                                              | string    | 是    |
| name          | 图层名称                                              | string    | 是    |
| labelField    | 标签取值字段                                            | string    | 是    |
| style         | 图层样式，传入字符串时会直接从 MapIcon 中加载                       | string    | 是    |
| template      | 缩略看板                                              | ReactNode | 否    |
| autoRefresh   | 自动刷新标识                                            | string    | 否    |

#### method

| 方法                                   | 说明          |
|--------------------------------------|-------------|
| refresh()                            | 刷新图层        |
| loadData(data)                       | 加载数据        |
| loadUrlData(url, params, method)     | 通过接口请求加载数据  |
| loadFeatures(features)               | 加载图形        |
| getFeatureByFieldValue(field, value) | 通过字段及内容查找图形 |

#### geometryInfo 说明

| 字段        | 说明                                                               | 类型     | 是否必填 |
|-----------|:-----------------------------------------------------------------|--------|------|
| type      | 图形类型: `point`、`polyline`、`polygon`                               | string | 是    |
| lngLats   | 经纬度: "119.0248,25.6389", 多个: "119.0248,25.6389;119.0248,25.6389" | string | 是    |
| coordType | 坐标系: `wgs84`、`bmap`、`amap`                                       | string | 是    |

### ImageLayer 图像图层

#### api

| 参数            | 说明        | 类型        | 是否必填 |
|---------------|-----------|-----------|------|
| url           | 图层接口      | string    | 否    |
| method        | 请求方式      | string    | 否    |
| params        | 请求参数      | object    | 否    |
| sourceOptions | 数据源图层其他参数 | object    | 否    |
| key           | 图层标识      | string    | 是    |
| name          | 图层名称      | string    | 是    |
| labelField    | 标签取值字段    | string    | 是    |
| template      | 缩略看板      | ReactNode | 否    |

#### method

| 方法                         | 说明           |
|----------------------------|--------------|
| getFeatureInfo(event, map) | 获取鼠标点击时的图形信息 |


### Util 工具类