@mapgis-zrzy/mapview-ui3

组件库封装了“一张图”各业务组件，基于vue 3.X、vite、pinia、ant-design-vue以及@mapgis/webclient-vue-mapboxgl、@mapgis/webclient-vue-cesium

仓库地址: https://git.code.tencent.com/MapGisZrzy/BasicRD/MapGISGTKJ/mapview-ui3.git

开始

请先部署国土空间基础信息平台后台服务并安装依赖@mapgis-zrzy/mapview-ui3:

$ npm install @mapgis-zrzy/mapview-ui3 --save

or

$ yarn add @mapgis-zrzy/mapview-ui3 --save

该组件库基于vue3、pinia、ant-design-vue，请确保vite工程中已安装此依赖

同时该组件库基于@mapgis/webclient实现了mapbox、cesium组件封装，因此需要安装webclient SDK包或模块依赖

main.ts文件中引入

import { createApp } from 'vue'
import App from './App.vue'

import MapViewUI from '@mapgis-zrzy/mapview-ui3'
import '@mapgis-zrzy/mapview-ui3/dist/themes/mapview-ui3.css'

const app = createApp(App)
app.use(MapViewUI) // 注册全局 MapViewUI
app.mount('#app', true)


由于mapview-ui3样式内含深色系、浅色系，开启样式需要在`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 | 属性查询参数面板 |
| TDataImport | 导入、绘制地块 |


`mapRequest`支持操作,事件响应

详情请参照`mapRequest`使用说明

示例：
```js
import MapViewUI from '@mapgis-zrzy/mapview-ui3'
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 | | 调整三位模型高度(三维) | CHANGE_MODEL_HEIGHT |

配置

由于mapview-ui3基于国土空间基础信息平台服务，每个组件都含有一个固定config属性,具体格式为：

{
  "appName": "自然资源三维立体一张图",
  "hadoop": {
    "cutServerUrl": "http://192.168.199.67:9381",
    "taskQueryUrl": "http://192.168.199.67:19001"
  }
}

组件通用属性

| 属性名 | 描述 | 默认值 | -|-|- | config | nacos基础配置 | 参上 | | token | 访问令牌，需要通过统一运维获取授权 | "" | | related | 是否自动关联目录树 | true | | options | 组件动态属性(related == true时有效) | {} | | showCloseButton | 是否显示关闭按钮 | true |

mapview-ui3组件支持两种模式 当related为true时，各个组件互相关联并通过全局状态共享信息，比如目录树选中元数据时，元数据组件自动同步元数据信息； 如果related为false时,则取消这种关联交互，业务逻辑需要使用者自行维护

示例： related等于true

<TMetaData :token="token" @close="close" />

related等于false

<TMetaData map-key="f7faa785-3f25-46c8-bfcc-a2a7d9bf7a02" :related="false" :token="token" @close="close" />

同时组件写法稍有区别, 当related等于true时，组件属性从options获取，当related为false时，组件属性从特定prop获取。

解释: 之所以这样是因为当related为true，则根本不需要传递特定prop属性，比如元数据组件预览的元数据guid，这些属性默认从内部全局状态获取，同时为了在使用动态组件时保持组件属性一致性，所有数据默认取options；但是如果related为false，则使用者需要传递对应的关键信息，则需要传递特定prop属性。

组件通用事件

| 事件 | 描述 | | ---- | ---- | | close | 关闭（地图组件除外） | | changed | 状态更改通知 |

changed事件返回的数据结构如下

| 属性 | 描述 | | ---- | ---- | | component | 来源组件 | | type | 状态类型 | | data | 消息数据 |

provide

mapview-ui3的设计默认inject所属的外部变量，而不是整体安装或者单独打包，这样的好处是一方面减少dist体积，另一方面主框架可以选择性引入所属依赖。

默认主框架需要provide的全部变量为：

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 参考以下代码示例

provide() {
  return {
    mapbox: mapboxgl,
    Cesium: Cesium,
    CesiumZondy: window.CesiumZondy,
    Zondy: Zondy
  }
}

然后引入组件

<TMapViewContainer :config="mapviewUIConfig" @loaded="loaded" />

属性(related = false) | 属性名 | 默认值 | 描述 | | ---- | ---- | ---- | | layers | [] | 要显示的目录树图层 |

changed事件 | type | data | 描述 | | ---- | ---- | ---- | | loaded | 无 | 地图加载完成 |

TDataTree

<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

<TPreviewer :config="config" :token="token" @close="close"/>

属性(related = false) | 属性名 | 默认值 | 描述 | -|-|-| | files | Array | 文件预览信息 |

TMetaData

<TMetaData :token="token" @close="close"/>

属性(related = false) | 属性名 | 默认值 | 描述 | -|-|-| | metaKey | "" | 待预览的元数据guid |

TLegends

<TLegends :config="config" @close="close" @changed="componentStateChanged"/>

属性(related = false) | 属性名 | 默认值 | 描述 | -|-|-| | layers | [] | 二维地图文档服务(需要的字段:layerType(IGSIMAGE)、ip、serverName、url) |

changed事件 | type | data | 描述 | -|-|-| | changeLayer | Object | 切换图层图例 |

TD3Cruise

<TD3Cruise :config="config" @close="close"/>

属性(related = true) | 属性名 | 默认值 | 描述 | -|-|-| | options.title | '' | 标题 | | options.glb | '' | 模型文件 |

属性(related = false) | 属性名 | 默认值 | 描述 | -|-|-| | title | '' | 标题 | | glb | '' | 模型文件 |

TLayerStatistics

统计分析参数设置组件

<TLayerStatistics 
  :config="config" 
  :token = "token"
  :options="{ 
    title: '统计分析'
  }"
  @close="close" />

属性(related = true) | 属性名 | 默认值 | 描述 | -|-|-| | options.title | "" | 标题名 |

属性(related = false) | 属性名 | 默认值 | 描述 | -|-|-| | title | "" | 标题名 | | layers | [] | 统计图层 |

changed事件 | type | data | 描述 | -|-|-| | stat | Object | 统计参数设置完毕 |

TBigDataClipAnalysis

大数据分析组件, 浏览器需要支持IndexDB

<TBigDataClipAnalysis 
  :config="config" 
  :token = "token"
  :options="{ 
    title: '裁剪分析'
    ext: {...}
  }"
  @close="close" />

属性(related = true) | 属性名 | 默认值 | 描述 | -|-|-| | options.title | "" | 标题名 |

属性(related = false) | 属性名 | 默认值 | 描述 | -|-|-| | title | "" | 标题名 |

组件需要额外配置项options.ext, 用于分析设置，目前由于IGS-X缺少必要服务接口，目录树数据源以及图层都由配置文件提供

ext属性示例：

{
  "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

裁剪分析组件

<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图元类型进行展示

<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

属性详情展示面板

<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']

<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

裁剪分析结果查询展示组件

<TClipAnalysisResultPannel 
  :config="config" 
  :token = "token"
  :options="{ 
    title: '分析结果'
  }"
  @close="close" />

属性(related = true) | 属性名 | 默认值 | 描述 | -|-|-| | options.title | "" | 标题名 |

属性(related = false) | 属性名 | 默认值 | 描述 | -|-|-| | title | "" | 标题名 | | params | {} | 分析结果 |

TDisplayPanel

层级面板，该组件为功能组件，主要为了对Panel类型组件进行组合嵌套调用，比如我们在使用 TQueryResultPanel时，当点击某一行的记录后自动调用TLayerRecordPanel组件，同时提供必要的返回按钮且保持之前的Panel状态，则此场景下适用于该组件,同时推荐在related=true下使用该组件

<TDisplayPanel
  :options="{
    title: '查询结果',
    panels: ['TQueryResultPanel', 'TLayerRecordPanel'],
    geojson: { 
      type: 'Polygon', 
      coordinates: [[[x1,y1],...]]
    }, 
    where: '1=1' 
  }"
  :config="cpnfig"
  :token="token"
  @close="close"
/>

TBackTraceTool

<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

图层测量的组件，主要集成了绘制距离，绘制面积，对图层的测量。

<TLayerMeasurement :config="config" :option="{title:'图层测量'}"  @close="close"/>

属性(related = true)

| 属性名 | 默认值 | 描述 | | --------------- | ------ | ---- | | options.title | "" | 标题 |

属性（related = false）

| 属性名 | 默认值 | 描述 | | ------- | ------ | ---- | | title | "" | 标题 |

TOutMap

<TOutMap 
:config="config" :option="{ext:{...}}"  @close="close"/>

TOutCoordinate

<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 | 查询参数设置完毕 |

功能函数

| 函数 | 描述 | | ---- | ---- | | mapRequest | 请求绘制相关 |

mapRequest

地图消息请求：用于绘制点、线、区以及拉框等操作 解析：mapRequest会发送事件消息给TMapViewContainer组件，TMapViewContainer根据当前场景相应请求的操作

示例：

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 |

如果是多次调用，比如清除历史数据后再新增要素，不要这样写：

import MapViewUI from '@mapgis-zrzy/mapview-ui3'

MapViewUI.mapRequest(this, { event: 'CLEAR_LOCAL' })
MapViewUI.mapRequest(this, { event: 'NEW_FEATURE', data: { geojson: ... } })

推荐写法：

import MapViewUI from '@mapgis-zrzy/mapview-ui3'

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 | 获取相机位置信息 | 无 |

默认清除操作使用CLEAR_LOCAL事件即可，CLEAR_GLOBAL场景需要针对options特殊设置

License

MIT