mengtx-report v0.0.3

API 文档

文档地址 (进入后左侧下拉框选择 ldb)

独立图表渲染组件

代码地址

该项目主要是为了创建一个报告展示组件，能够在第三方项目中使用 ldb 配置好的图表。

• 项目中的 widgets 直接拷贝 ldb 的 src/views/report/components/widgets
• 项目中的 app/Widget.vue 直接拷贝 ldb 的 src/views/report/app/Widget.vue
• 项目中的 app/Viewer.vue 参照 ldb 的 src/views/report/app/Viewer.vue

发布组件到组件库

npm publish

图表设计思路

一个报告会包含多个图表，这里我们统称为 widget。每个 widget 都是一个独立的组件。

报告编辑器包含

- widget 选取区域 (头部)
- 拖拽区域        (左侧)
- widget 配置区域 (右侧)

操作流程:

- 点击头部 widget 
- addWidget (`app/App.vue:addWidget`) 
- 根据 widget 类型,从 (`config`) 中选取对应初始配置初始化 widget
    > `config` 中不但配置了 widget 的初始参数，还配置了控制每个参数该用的配置组件(`settigns`)
- 点击拖拽区域的 widget 激活 widget 以配置

图表相关组件都在 src/views/report/components 文件夹下

├── app      // 图表编辑页面
├── common   // 通用组件
├── config   // 各 widget 的初始配置
├── settings // 控制 widget 配置的组件单元
└── widgets  // 所有支持的 widget 注意：这里的 widget 不要 import 到 widgets 文件夹外面的东西，因为该文件夹会在另一个项目中独立出去，所以要保持其独立性。

地图相关

• 地图前端渲染用的 leaflet 库
• 前后端交互地理信息数据使用 geoJSON 格式
• 瓦片图服务使用 GeoServer 的 WMS 服务
• 底图服务使用 Leaflet.ChineseTmsProviders
• SLD 样式配置 SLD
• 演示配置参考 github