npm package: @mapgis-zrzy/mapview-ui
Description: 自然资源三维立体一张图业务组件封装
Author: tqboss
Latest version: 1.2.0

<div align="center">
  MapGIS自然资源事业部业务组件库
</div>

[![npm][npm]][npm-url]
[![node][node]][node-url]
[![cover][cover]][cover-url]
[![chat][chat]][chat-url]
[![size][size]][size-url]

# @mapgis-zrzy/mapview-ui

组件库封装了“一张图”各业务组件，基于vue 2.X、vuex、ant-design-vue以及@mapgis/webclient-vue-mapboxgl、@mapgis/webclient-vue-cesium

仓库地址: <a>https://git.code.tencent.com/MapGisZrzy/BasicRD/MapGISGTKJ/mapview-ui.git</a>

## 开始

请先部署`国土空间基础信息平台后台服务`并安装依赖`@mapgis-zrzy/mapview-ui`:

```console
$ npm install @mapgis-zrzy/mapview-ui --save
```

or

```console
$ yarn add @mapgis-zrzy/mapview-ui --save
```

该组件库基于vue、vuex、ant-design-vue，请确保vue-cli工程中已安装此依赖

同时该组件库基于@mapgis/webclient实现了mapbox、cesium组件封装，因此需要安装webclient SDK包或模块依赖

`main.js`文件中引入

```js
import Vue from 'vue'
import store from './store'
import router from './router/routers'
import MapViewUI from '@mapgis-zrzy/mapview-ui'
import '@mapgis-zrzy/mapview-ui/dist/themes/mapview-ui.css'

Vue.use(MapViewUI)
MapViewUI.register(store)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
```

`modules`为vuex模块项，需要通过`MapViewUI.createStore`引入`mapViewUIState`模块

由于mapview-ui样式内含深色系、浅色系，开启样式需要在`body`上插入`class="theme-dark"`或者`class="theme-light`

## 已开发组件

|  组件   | 描述  |
|  ----  | ----  |
| TMapViewContainer  | 地图（支持二、三维切换） |
| TDataTree  | 资源目录组件 |
| TPreviewer | 文件预览组件 |
| TMetaData | 元数据预览组件 |
| TLegends | 图例组件 |
| TD3Cruise | 三维漫游 |
| TLayerStatistics | 统计分析参数设置组件 |
| TBigDataClipAnalysis | 大数据分析组件 |
| TClipAnalysis | 裁剪分析组件 |
| TLayerStatResultPanel | 统计分析查询展示面板 |
| TQueryResultPanel | 地图图层属性显示面板 |
| TLayerRecordPanel | 图层record显示面板 |
| TBigDataClipAnalysisPanel | 大数据分析结果展示面板 |
| TClipAnalysisResultPannel | 裁剪分析结果展示面板 |
| TDisplayPanel | 层级面板 |
| TLayerMeasurement | 图层测量 |
| TBackTraceTool | 专题回溯 |
| TOutMap | 出图 |
| TOutCoordinate | 导出坐标 |
| TLayerQuery | 属性查询参数面板 |

`mapRequest`支持操作

详情请参照`mapRequest`使用说明

示例：
```js
import MapViewUI from '@mapgis-zrzy/mapview-ui'
MapViewUI.mapRequest(this, { event: 'MEASURE_AREA' })
```

|  操作   | event  |
|  ----  | ----  |
| `地图放大`  | `ZOOM_IN` |
| `地图缩小`  | `ZOOM_OUT` |
| `地图平移` | `RESET_MOUSE` |
| `地图复位` | `RESET_VIEW` |
| `面积测量` | `MEASURE_AREA` |
| `长度测量` | `MEASURE_LENGTH` |
| `绘制拉框` | `DRAW_RECT` |
| `绘制多边形` | `DRAW_POLYGON` |
| `绘制线` | `DRAW_LINE` |
| `点选操作` | `DRAW_POINT` |
| `添加图元` | `NEW_FEATURE` |
| `移动视角` | `FLY` |
| `清理缓存` | `CLEAR_LOCAL` |
| `引擎切换` | `CHANGE_MODE` |
| `初始化皮肤` | `LOAD_THEME` |
| `切换皮肤` | `CHANGE_THEME` |
| `监听后台分析任务` | `LISTEN_TASK_CHANGE` |
| `取消监听` | `CANCLE_TASK_LISTEN` |
| `删除分析任务缓存` | `DELETE_TASK` |
| `更新图层的筛选条件` | `UPDATE_FILTER` |
| `删除筛选图层` | `DELETE_FILTER_LAYERS` |
| `显示隐藏三维球体(三维)` | `CHANGE_GLOBE_SHOW` |
| `获取相机位置信息(三维)` | `GET_CAMERA_POSITION` |
| `切换索引图显示隐藏` | `SHOW_BOTTOM_LAYERS` |

### 配置
由于`mapview-ui`基于`国土空间基础信息平台服务`，每个组件都含有一个固定`config`属性,具体格式为：
``` json
{
  "appName": "自然资源三维立体一张图",
  "mode": "2D",
  "kkfileview": {
    "url": "http://192.168.23.199:8022/previe onlinePreview",
    "version": 4
  },
  "hadoop": {
    "cutServerUrl": "http://192.168.199.67:9381",
    "taskQueryUrl": "http://192.168.199.67:19001"
  },
  "layers": {
    "bottom": [
      {
        "id": "bottomlayer-1",
        "ip": "192.168.23.199",
        "port": "6163",
        "serverName": "INDEX_TDT",
        "layerType": "IGSTILED",
        "tileSize": 256
      }
    ],
    "top": []
  },
  "cesium": {
    "center": [121.1630,28.8827],
    "height": 5000
  },
  "mapbox": {
    "center": [121.1630,28.8827],
    "zoom": 12,
    "maxzoom": 18,
    "styles": {
      "version": 8,
      "name": "LndWebStyle",
      "sources": {},
      "sprite": "http://192.168.23.199:6163/igs/res mrms/vtiles/sprite",
      "glyphs": "http://192.168.23.199:6163/igs/res mrms/vtiles/fonts/{fontstack}/{range}.pbf",
      "layers": []
    }
  },
  "srefDatas": []
}
```
### 组件通用属性

| 属性名 | 描述  | 默认值 |
-|-|-
| `config`  | nacos基础配置 | 参上 |
| `token`  | 访问令牌，需要通过统一运维获取授权 | "" |
| `related` | 是否自动关联目录树 | true |
| `options` | 组件动态属性(related == true时有效) | {} |
| `showCloseButton` | 是否显示关闭按钮 | true |

mapview-ui组件支持两种模式
`当related为true时`，各个组件互相关联并通过全局状态共享信息，比如目录树选中元数据时，元数据组件自动同步元数据信息；
`如果related为false时`,则取消这种关联交互，业务逻辑需要使用者自行维护

示例：
`related等于true`
```html
<TMetaData :token="token" @close="close" />
```
`related等于false`
```html
<TMetaData map-key="f7faa785-3f25-46c8-bfcc-a2a7d9bf7a02" :related="false" :token="token" @close="close" />
```

同时组件写法稍有区别, 当related等于true时，组件属性从`options`获取，当related为false时，组件属性从特定prop获取。

``` txt
解释: 之所以这样是因为当related为true，则根本不需要传递特定prop属性，比如元数据组件预览的元数据guid，这些属性默认从内部全局状态获取，同时为了在使用动态组件时保持组件属性一致性，所有数据默认取options；但是如果related为false，则使用者需要传递对应的关键信息，则需要传递特定prop属性。
```


### 组件通用事件

|  事件   | 描述  |
|  ----  | ----  |
| `close`  | 关闭（地图组件除外） |
| `changed`  | 状态更改通知 |

`changed`事件返回的数据结构如下

|  属性   | 描述  |
|  ----  | ----  |
| `component`  | 来源组件 |
| `type`  | 状态类型 |
| `data`  | 消息数据 |

### provide

mapview-ui的设计默认inject所属的外部变量，而不是整体安装或者单独打包，这样的好处是一方面减少dist体积，另一方面主框架可以选择性引入所属依赖。

默认主框架需要provide的全部变量为：
```js
provide() {
  return {
    mapbox: mapboxgl,
    Cesium: Cesium,
    CesiumZondy: window.CesiumZondy,
    Zondy: Zondy,
    echarts: echarts
  }
}
```
如果只想在二维mapbox下使用，则只需要提供`mapbox`、`Zondy`即可，`echarts`只和部分关联组件有关，比如统计分析结果展示，如果不需要该功能，移除echarts也可以


### TMapViewContainer

引入TMapViewContainer需要VUE提供器`provide`注入`Cesium`、`mapbox`、`CesiumZondy`、`Zondy`
参考以下代码示例
```js
provide() {
  return {
    mapbox: mapboxgl,
    Cesium: Cesium,
    CesiumZondy: window.CesiumZondy,
    Zondy: Zondy
  }
}
```
然后引入组件
```html
<TMapViewContainer :config="mapviewUIConfig" @loaded="loaded" />
```

属性(related = false)
|  属性名   | 默认值  | 描述 |
|  ----  | ----  | ---- |
| `layers`  | [] | 要显示的目录树图层 |

`changed`事件
|  type   | data  | 描述 |
|  ----  | ----  | ---- |
| `loaded`  | 无 | 地图加载完成 |



### `TDataTree`

```html
<TDataTree
  :options="{ title: '资源目录' }"
  :config="ncosConfig"
  :token="token"
  @close="close"
  @changed="componentStateChanged"
/>
```

属性(related = true)

| 属性名 | 默认值 | 描述 |
-|-|-|
| `options.title`  | "" | 目录树组件标题 |

属性(related = false)

|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | "" | 目录树组件标题 |


`changed`事件
|  type   | data  | 描述 |
-|-|-|
| `loaded` | Array | 请求数据完成后返回后台目录树数据 |
| `selected` | Object | 选中树节点时返回当前选中元数据 |
| `showLayers`  | Array | 目录树节点点击时返回要显示的图层数据 |
| `removeLayers`  | Array | 取消图层显示并返回取消图层数据 |
| `preview`  | String | 点击预览按钮并返回文件浏览地址 |
| `addCollect` | String | 收藏服务 |
| `cancleCollect` | String | 取消收藏服务 |
| `opcity` | Object | 修改图层透明度 |



### `TPreviewer`
```html
<TPreviewer :config="config" :token="token" @close="close"/>
```

属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `files`  | Array | 文件预览信息 |

### `TMetaData`
```html
<TMetaData :token="token" @close="close"/>
```
属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `metaKey`  | "" | 待预览的元数据guid |


### `TLegends`
```html
<TLegends :config="config" @close="close" @changed="componentStateChanged"/>
```
属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `layers`  | [] | 二维地图文档服务(需要的字段:layerType(IGSIMAGE)、ip、serverName、url) |

`changed`事件
|  type   | data  | 描述 |
-|-|-|
| `changeLayer` | Object | 切换图层图例 |

### `TD3Cruise`
```html
<TD3Cruise :config="config" @close="close"/>
```

属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.title`  | '' | 标题 |
| `options.glb` | '' | 模型文件 |

属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | '' | 标题 |
| `glb` | '' | 模型文件 |

### TLayerStatistics

统计分析参数设置组件

```html
<TLayerStatistics 
  :config="config" 
  :token = "token"
  :options="{ 
    title: '统计分析'
  }"
  @close="close" />
```

属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.title`  | "" | 标题名 |


属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | "" | 标题名 |
| `layers` | [] | 统计图层 |

`changed`事件
|  type   | data  | 描述 |
-|-|-|
| `stat` | Object | 统计参数设置完毕 |

### TBigDataClipAnalysis

大数据分析组件, 浏览器需要支持`IndexDB`

```html
<TBigDataClipAnalysis 
  :config="config" 
  :token = "token"
  :options="{ 
    title: '裁剪分析'
    ext: {...}
  }"
  @close="close" />
```

属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.title`  | "" | 标题名 |


属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | "" | 标题名 |

组件需要额外配置项`options.ext`, 用于分析设置，目前由于IGS-X缺少必要服务接口，目录树数据源以及图层都由配置文件提供

`ext`属性示例：
```json
{
  "selectTree": {
    "name": "192.168.199.67:9091",
    "value": "http://192.168.199.67:9091",
    "scopedSlots": { "title": "ds" },
    "selectable": false,
    "children": [
      {
        "name": "mongodb",
        "value": "http://192.168.199.67:9091datastore/rest/dataset/mongodb",
        "selectable": false,
        "scopedSlots": { "title": "ds" }
      },
      {
        "name": "pg",
        "value": "http://192.168.199.67:9091datastore/rest/dataset/pg",
        "selectable": false,
        "scopedSlots": { "title": "ds" }
      },
      {
        "name": "hn",
        "value": "http://192.168.199.67:9091datastore/rest/dataset/pg/service/hn",
        "selectable": false,
        "scopedSlots": { "title": "ds" },
        "children": [
          {
            "name": "hn",
            "value": "http://192.168.199.67:9091datastore/rest/dataset/pg/service/hn/hn",
            "selectable": false,
            "scopedSlots": { "title": "ds" },
            "children": [
              {
                "name": "d430923dc2015gdltb_jwd",
                "value": "http://192.168.199.67:9091datastore/rest/dataset/pg/service/hnhn/d430923dc2015gdltb_jwd",
                "scopedSlots": { "title": "data" }
              },
              {
                "name": "testframe",
                "value": "http://192.168.199.67:9091datastore/rest/dataset/pg/service/hnhn/testframe",
                "scopedSlots": { "title": "data" }
              }
            ]
          }
        ]
      }
    ]
  },
  "selectDataset": {
    "name": "192.168.199.67:9091",
    "value": "http://192.168.199.67:9091",
    "scopedSlots": { "title": "ds" },
    "children": [
      {
        "name": "mongodb",
        "value": "http://192.168.199.67:9091datastore/rest/dataset/mongodb",
        "scopedSlots": { "title": "ds" }
      },
      {
        "name": "pg",
        "value": "http://192.168.199.67:9091datastore/rest/dataset/pg",
        "scopedSlots": { "title": "ds" }
      },
      {
        "name": "hn",
        "value": "http://192.168.199.67:9091datastore/rest/dataset/pg/service/hn",
        "scopedSlots": { "title": "ds" },
        "children": [
          {
            "name": "hn",
            "value": "http://192.168.199.67:9091datastore/rest/dataset/pg/service/hn/hn",
            "scopedSlots": { "title": "ds" }
          }
        ]
      }
    ]
  }
}
```

### TClipAnalysis

裁剪分析组件

```html
<TClipAnalysis 
  :config="config" 
  :token = "token"
  :options="{ 
    title: '分析'
    ext: {...}
  }"
  @close="close" />
```

属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.title`  | "" | 标题名 |


属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | "" | 标题名 |
| `layersList` | [] | 分析范围->提取数据->选择图层选项 |

`changed`事件
|  type   | data  | 描述 |
-|-|-|
| `rangeFrom` | String | 选择一种分析范围获取方法后返回值(file-导入文件，drawing-自由绘制，data-提取数据) |
| `analysis`  | Object | 点击开始分析后返回请求时提交的参数值 |
| `stat` | Object | 分析完成后返回分析结果 |

```



### TLayerStatResultPanel

统计分析结果查询展示组件

```html
<TLayerStatResultPanel 
  :config="config" 
  :token = "token"
  :options="{ 
    title: '统计结果'
  }"
  @close="close" />
```

属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.title`  | "" | 标题名 |


属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | "" | 标题名 |
| `params` | {} | 统计参数 |



### TQueryResultPanel
显示目录树最近勾选节点的属性查询结果,适用于拉框查询、属性查询的结果列表展示，由于查询的底图可能有多个图层，默认根据reg、pnt、line图元类型进行展示

```html
<TQueryResultPanel 
  :config="config" 
  :options="{ 
    title: '图元列表', 
    geojson: { 
      type: 'Polygon', 
      coordinates: [[[x1,y1],...]]
    }, 
    where: '1=1' 
  }"
  @close="close" />
```
属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.layers` | [] | 查询图层(默认取目录树顶层Layer) |
| `options.title`  | "" | 标题 |
| `options.geojson` | {} | 查询图形(取交集、geojson对象) |
| `options.where` | '1=1' | '查询条件' |

属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `layers` | [] | 外部传递查询地图 |
| `title`  | "" | 标题 |
| `geojson` | {} | 查询图形(取交集、geojson对象) |
| `where` | '1=1' | '查询条件' |

通常查询条件比如geojson由其他对象传进来，可以使用`sendRequest`获取交互图形然后传递参数

`changed`事件
|  type   | data  | 描述 |
-|-|-|
| `detail` | Array | 点击记录详情返回单行字段详情信息 |
| `changeLayer` | String | 修改查询图层 |


### TLayerRecordPanel

属性详情展示面板

```html
<TLayerRecordPanel 
  :config="config" 
  :options="{ 
    title: '名称', 
    fields: [
      { name: 'name1', value: 'value1' }，
      { name: 'name2', value: 'value2' }
    ]
  }"
  @close="close" />
```

属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.title`  | "" | 标题 |
| `options.fields` | [] | 字段信息 |

属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | "" | 标题 |
| `fields` | [] | 字段信息 |

### TBigDataClipAnalysisPanel

大数据分析组件展示组件, 需要echart
inject: ['echart']

```html
<TBigDataClipAnalysisPanel 
  :config="config" 
  :token = "token"
  :options="{ 
    title: '统计结果',
    task: { layer: 'cut20220408120202' },
    statParams: { statTblName: 'TDLYXZSTATTABLE' }
  }"
  @close="close" />
```

属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.title`  | "" | 标题名 |
| `options.task`  | "" | 大数据分析任务对象,必要含有图层字段 |
| `options.statParams`  | "" | 必要包含统计表字段 |


属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | "" | 标题名 |
| `task`  | "" | 大数据分析任务对象,必要含有图层字段 |
| `statParams`  | "" | 必要包含统计表字段 |



### TClipAnalysisResultPannel

裁剪分析结果查询展示组件

```html
<TClipAnalysisResultPannel 
  :config="config" 
  :token = "token"
  :options="{ 
    title: '分析结果'
  }"
  @close="close" />
```

属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.title`  | "" | 标题名 |


属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | "" | 标题名 |
| `params` | {} | 分析结果 |


### TDisplayPanel

层级面板，该组件为功能组件，主要为了对Panel类型组件进行组合嵌套调用，比如我们在使用 `TQueryResultPanel`时，当点击某一行的记录后自动调用`TLayerRecordPanel`组件，同时提供必要的返回按钮且保持之前的Panel状态，则此场景下适用于该组件,同时推荐在related=true下使用该组件

```html
<TDisplayPanel
  :options="{
    title: '查询结果',
    panels: ['TQueryResultPanel', 'TLayerRecordPanel'],
    geojson: { 
      type: 'Polygon', 
      coordinates: [[[x1,y1],...]]
    }, 
    where: '1=1' 
  }"
  :config="cpnfig"
  :token="token"
  @close="close"
/>
```

### `TBackTraceTool`
```html
<TBackTraceTool :config="config" :option="{title:'专题回溯'}"  @close="close"/>
```

属性(related = true)

| 属性名 | 默认值 | 描述 |
-|-|-|
| `options.title`  | "" | 目录树组件标题 |

属性(related = false)

|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | "" | 目录树组件标题 |

该组件最重要的属性为panels, 同时根据panels的首个组件确定其他属性，比如 `TQueryResultPanel` 组件需要geojson属性进行查询，则 `TDisplayPanel` 也需要该属性, 同时子组件的change事件自动向上暴露给`TDisplayPanel`

属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.title`  | "" | 标题 |
| `options.panels` | [] | 面板列表 |

由于Panels类型定义不同，有不同分组，根据业务关联，在传递panels属性时只能为以下组合：

|  一级Panel   | 二级Panel  |
-|-|-|
| `TQueryResultPanel`  | `TLayerRecordPanel` |
| `TLayerStatistics` | `TLayerStatResultPanel` |

### TLayerMeasurement

图层测量的组件，主要集成了绘制距离，绘制面积，对图层的测量。

```html
<TLayerMeasurement :config="config" :option="{title:'图层测量'}"  @close="close"/>
```

属性(related = true)

| 属性名          | 默认值 | 描述 |
| --------------- | ------ | ---- |
| `options.title` | ""     | 标题 |

属性（related = false）

| 属性名  | 默认值 | 描述 |
| ------- | ------ | ---- |
| `title` | ""     | 标题 |


### `TOutMap`
```html
<TOutMap 
:config="config" :option="{ext:{...}}"  @close="close"/>
```

### `TOutCoordinate`
```html
<TOutCoordinate
  :config="config"
  :token = "token"
  :options="{ 
    title: '导出坐标'
  }"
  @close="close" />
```

属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.title`  | "" | 标题名 |


属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | "" | 标题名 |
| `params` | {} | 分析参数以及分析结果 |

```

### TLayerQuery

统计分析参数设置组件

```html
<TLayerQuery 
  :config="config" 
  :token = "token"
  :options="{ 
    title: '属性查询'
  }"
  @close="close" />
```

属性(related = true)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `options.title`  | "" | 标题名 |


属性(related = false)
|  属性名   | 默认值  | 描述 |
-|-|-|
| `title`  | "" | 标题名 |
| `layers` | [] | 查询图层 |

`changed`事件
|  type   | data  | 描述 |
-|-|-|
| `stat` | Object | 查询参数设置完毕 |



## 功能函数

|  函数   | 描述  |
|  ----  | ----  |
| register  | 注册mapViewUIState模块 |
| createStore  | 创建包含mapViewUIState模块的vuex实例 |
| mapRequest  | 请求绘制相关 |

### register

```js
import Vue from 'vue'
import Vuex from 'vuex'
import MapViewUI from '@mapgis-zrzy/mapview-ui'

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    /*custom modules defined*/
  }
})
const store = MapViewUI.register(store)
```

### createStore

```js
import Vue from 'vue'
import Vuex from 'Vuex'
import MapViewUI from '@mapgis-zrzy/mapview-ui'

const store = MapViewUI.createStore(Vue, Vuex)
```
或者
```js
import Vue from 'vue'
import Vuex from 'Vuex'
import MapViewUI from '@mapgis-zrzy/mapview-ui'

const modules = {
  modules: {
    /*custom modules defined*/
  }
}
const store = MapViewUI.createStore(Vue, Vuex, modules)
```

### mapRequest
地图消息请求：用于绘制点、线、区以及拉框等操作
解析：`mapRequest`会发送事件消息给`TMapViewContainer`组件，`TMapViewContainer`根据当前场景相应请求的操作

示例：
```js
import MapViewUI from '@mapgis-zrzy/mapview-ui'

MapViewUI.mapRequest(this, {
  event: 'DRAW_RECT',
  onFinished: this.drawFinishedHandle
})
```

|  参数   | 类型  | 描述 |
|-|-|-|
| component  | Vue组件 | 一般传递this |
| events  | Array、Object | 事件集合,每个对象的通用属性为：`event`、`onFeature`、`data` |

如果是多次调用，比如清除历史数据后再新增要素，不要这样写：

```js
import MapViewUI from '@mapgis-zrzy/mapview-ui'

MapViewUI.mapRequest(this, { event: 'CLEAR_LOCAL' })
MapViewUI.mapRequest(this, { event: 'NEW_FEATURE', data: { geojson: ... } })
```

推荐写法：
```js
import MapViewUI from '@mapgis-zrzy/mapview-ui'

MapViewUI.mapRequest(this, [ 
  { event: 'CLEAR_LOCAL' },
  { event: 'NEW_FEATURE', data: { geojson: ... } }
])
```

`event事件说明`


| event | 描述 | data参数 |
|-|-|-|
| `DRAW_RECT`  | 绘制矩形,仅交互一次 | 无 |
| `DRAW_POLYGON`  | 绘制多边形 | multiple: true/false 是否绘制多次 |
| `DRAW_POLYGON` | 绘制线 | continues: true/false 是否每次点击都响应回调 |
| `DRAW_POINT`  | 点选，多次交互，右键结束 | 无 |
| `NEW_FEATURE` | 新增GEOJSON对象,自动根据properties添加标记 | geojson、titleCallback |
| `FLY` | 地图跳转 | geojson |
| `ZOOM_IN` | 地图拉框放大 | 无 |
| `ZOOM_OUT` | 地图拉框缩小 | 无 |
| `RESET_MOUSE` | 地图平移，清除之前地图交互事件 | 无 |
| `RESET_VIEW` | 地图复位，不会清除之前交互事件 | 无 |
| `MEASURE_AREA` | 面积量算 | titleCallback: 自定义展示文本 |
| `MEASURE_LENGTH` | 长度量算 | titleCallback: 自定义展示文本 |
| `CLEAR_LOCAL`  | 清除历史数据 | 无 |
| `CLEAR_GLOBAL` | 清除全局数据 | 无 |
| `CHANGE_MODE` | 切换地图引擎(mapbox、cesium) | 无 |
| `LOAD_THEME` | 初始化皮肤(深色系) | 无 |
| `CHANGE_THEME` | 切换皮肤 | 无 |
| `UPDATE_FILTER` | 更新图层的筛选条件 | layers |
| `DELETE_FILTER_LAYERS` | 删除筛选图层 | 无 |
| `CHANGE_GLOBE_SHOW` | 显示隐藏三维球体 | true/false |
| `CHANGE_MODEL_HEIGHT` | 调整三位模型高度 | layer, distance |
| `GET_CAMERA_POSITION` | 获取相机位置信息 | 无 |
| `SHOW_BOTTOM_LAYERS` | 控制索引图显示隐藏 | 无 |


默认清除操作使用`CLEAR_LOCAL`事件即可，`CLEAR_GLOBAL`场景需要针对options特殊设置


## 优化建议
以webpack打包为例，针对SPA应用建议开启GZIP压缩以及代码分割，由于`mapview-ui`工程较大，为防止最终打包项目过大，可以如下操作：

### 单独打包
配置webpack`optimization`, chunk `mapview-ui`
```js
optimization: {
  splitChunks: {
    cacheGroups: {
      mapviewui: {
        test: /[\\/]node_modules[\\/]@zrzy[\\/]mapview-ui[\\/]/,
        priority: 1,
        minChunks: 1,
        name: 'mapview-ui',
        reuseExistingChunk: true,
        enforce: true,
        chunks: 'all'
      }
    }
  }
}
```

### 启用gzip压缩

```js
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  plugins: [new CompressionPlugin()],
};
```

如果站点部署在nginx，需要在配置文件开启`gzip_static on`

## License

[MIT](./LICENSE)

[npm]: https://img.shields.io/npm/v/uglifyjs-webpack-plugin.svg
[npm-url]: https://npmjs.com/package/uglifyjs-webpack-plugin
[node]: https://img.shields.io/node/v/uglifyjs-webpack-plugin.svg
[node-url]: https://nodejs.org
[cover]: https://codecov.io/gh/webpack-contrib/uglifyjs-webpack-plugin/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/uglifyjs-webpack-plugin
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
[chat-url]: https://gitter.im/webpack/webpack
[size]: https://packagephobia.now.sh/badge?p=uglifyjs-webpack-plugin
[size-url]: https://packagephobia.now.sh/result?p=uglifyjs-webpack-plugin