GIS 地图组件

从悟空平台实践中提取出的GIS组件，包括二、三维地图、图层实现，以及基于悟空基础组件库stonemonkey的地图、图层配置面板。

使用

安装：

yarn add egova-map-components

引入组件

全量引入

import Vue from "vue";
import EgovaMapComponents from "egova-map-components";
import "egova-map-components/dist/map.css";

Vue.use(EgovaMapComponents);

局部导入组件

后面引用方式可能会变

import Vue from "vue";
import { MapPanel, Map2d } from "egova-map-components"; // 引入组件
import "egova-map-components/dist/map.css";

// 单个组件
Vue.component("map-panel", MapPanel);

// 地图及图层组件
const { Map , BaseGraphic2d } = Map2d;

Vue.component('graphic2d', {
    components: {
        "BaseGraphic2d": BaseGraphic2d
    },
    template: '<BaseGraphic2d :layerName="base" />'
})

地图配置面板

可视化配置面板主要为：

• MapPpanel: 地图配置面板
• LayerPanel: 图层配置面板，悟空平台设计：样式、数据、交互，本组件默认仅包含样式组件。
  • LayerStylePanel: 图层样式面板

地图配置面板和图层面板分开使用，一般情况下只展示一个，即在地图图层列表和图层定义之间跳转。图层配置面板包含样式、数据、交互三部分，图层样式面板内置其中，数据和交互部分提供对应的插槽，便于各业务线自己定制。如果想自己定制图层显示面板，也可以自行引用LayerStylePanel。

内部实现

为保证灵活性，配置面板组件均为骨架组件，没有实际的内容。使用时根据面板设计，构造所需的面板JSON，然后面板组件内部遍历JSON，使用 Vue 的 <component :is="componentName"> 动态渲染组件。组件值发生变化会触发change事件。

用于面板配置的样式style定义都有以下结构（与悟空一致）:

{
    "base": {
        "moduleName": "Map2d",
        "version": "v0.0.1",
        "developer": "",
        "moduleText": "二维地图",
        "type": "map"
    },
    "configuration": []
}

base为组件的定义，configuration为填充配置面板的JSON。

地图组件

地图组件提供地图本身所需的dom容器，构造地图对象，并渲染图层。地图组件对外提供了该地图支持的图层类型，以及一个用于放置自定义地图元素的插槽。

图层组件

每个地图都有对应的图层。图层组件为状态组件，通过传入的prop来触发更新。每个图层只负责纯粹的GIS功能，对于数据处理和外部交互，需要开发人员二次开发，因此所有图层组件命名都以Base开头。

使用

配置面板组件和地图组件分开使用。

配置面板组件用于生成样式配置，也预留了扩展的插槽，用于业务系统混入自己处理逻辑，例如处理数据、扩展配置、处理交互等。

地图和图层组件用于将配置转换为地图或图层的配置、图层的数据，最终渲染出地图。

地图组件

每个组件都有默认的配置，图层类还有默认数据，这些都在组件类的静态属性上，分别为：

• staticConfig: 样式配置
• staticData: 默认数据
• getConfigs: 样式配置转为对应配置的方法（多为内部使用）
• layers: 图层列表，地图组件独有

在业务app中引入地图组件，如果只使用一种地图可以直接写对应的组件，如果是多种都需要也可以用动态组件。

首先通过地图组件的 staticConfig 获取地图配置，该配置也会用到配置面板中。也可以在地图配置中添加业务配置，最少实现一个地图列表和选择图层类型组件，用于添加图层以及生成图层样式。

没有内置的图层选择组件，因为基本的地图图层无法满足业务的丰富需求，所有图层需要业务端自己二次开发，混入自己的数据和交互处理逻辑。GIS图层组件只接受最终的样式和数据prop。

添加图层后，同样通过staticConfig 获取图层默认样式配置，用staticData获取默认数据或者通过业务逻辑拿到数据。

配置面板

配置面板同样接受上面的样式、数据prop，配置面板嵌入到业务端后，业务端组件处理配置面板的数据更新，经过处理或保存，传递新的值给地图组件，地图组件完成渲染。

示例

库代码位于 lib。src 下为测试环境代码。

可参考 test 组件的代码，仿照了真实的使用场景。运行本代码可进行测试。

组件API参考

目前仅二维的点组件完成了改造。可参考API文档。