egova-map-components v1.1.4
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文档。
4 months ago
4 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago