@mapgis-zrzy/mapview-ui v1.2.0

@mapgis-zrzy/mapview-ui

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

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

开始

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

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

or

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

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

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

main.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

已开发组件

mapRequest支持操作

详情请参照mapRequest使用说明

示例：

import MapViewUI from '@mapgis-zrzy/mapview-ui'
MapViewUI.mapRequest(this, { event: 'MEASURE_AREA' })

配置

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

{
  "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": []
}

组件通用属性

mapview-ui组件支持两种模式 当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属性。

组件通用事件

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

provide

mapview-ui的设计默认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)

属性(related = false)

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)

属性(related = false)

该组件最重要的属性为panels, 同时根据panels的首个组件确定其他属性，比如 TQueryResultPanel 组件需要geojson属性进行查询，则 TDisplayPanel 也需要该属性, 同时子组件的change事件自动向上暴露给TDisplayPanel

属性(related = true) | 属性名 | 默认值 | 描述 | -|-|-| | options.title | "" | 标题 | | options.panels | [] | 面板列表 |

由于Panels类型定义不同，有不同分组，根据业务关联，在传递panels属性时只能为以下组合：

TLayerMeasurement

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

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

属性(related = true)

属性（related = false）

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

功能函数

register

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

import Vue from 'vue'
import Vuex from 'Vuex'
import MapViewUI from '@mapgis-zrzy/mapview-ui'

const store = MapViewUI.createStore(Vue, Vuex)

或者

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根据当前场景相应请求的操作

示例：

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

MapViewUI.mapRequest(this, {
  event: 'DRAW_RECT',
  onFinished: this.drawFinishedHandle
})

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

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

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

推荐写法：

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

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

event事件说明

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

优化建议

以webpack打包为例，针对SPA应用建议开启GZIP压缩以及代码分割，由于mapview-ui工程较大，为防止最终打包项目过大，可以如下操作：

单独打包

配置webpackoptimization, chunk mapview-ui

optimization: {
  splitChunks: {
    cacheGroups: {
      mapviewui: {
        test: /[\\/]node_modules[\\/]@zrzy[\\/]mapview-ui[\\/]/,
        priority: 1,
        minChunks: 1,
        name: 'mapview-ui',
        reuseExistingChunk: true,
        enforce: true,
        chunks: 'all'
      }
    }
  }
}

启用gzip压缩

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  plugins: [new CompressionPlugin()],
};

如果站点部署在nginx，需要在配置文件开启gzip_static on

License

MIT