CSKUI 配置说明文档

更新日志

0.2.15

1. crud组件完善支持增删改查所有功能
2. 移除无效打印
3. 注记优化xmmc=>xmjc tj=>jh
4. 增加富文本编辑功能 @vueup/vue-quill

0.2.14

1. bug修复
2. 优化部分样式

0.2.13

1. 调整专题/图层控制弹窗的大小和位置(动态获取容器宽度,动态设置)
2. 添加图例
3. 添加过滤条件回显,支持动态关闭并重新绘制
4. 调整高亮图层渲染方式 => 气泡窗
5. 调整综合查询相关类型的位置
6. 综合查询上线: 百科查询(矿权/物探/圈闭/储量都已实现,探井和规划还不支持),数据查询(数据库表查询),文档查询(目前不支持预览和下载),图件查询(图层查询和地图查询)

0.2.12

1. 天地图改在线服务
2. 部分样式调整

0.2.11

1. 添加全局导出函数getGlobConf,用于获取全局配置

const app = getGlobConf()
//       请求,    事件总线,  配置,    工具函数, 类,    ol, 当前专题图层索引
const { $axios, $eventBus, $config, $utils, $Class, $ol, $currentIndex } = app

0.2.10

1. 添加生命周期onBeforeMount生命周期,在组件挂载前调用,onUnmounted生命周期,在组件卸载后调用
2. 添加全局配置currentIndex,默认值为kq_,用于显示默认专题图层为矿权, 其他值根据专题配置设置,默认['kq_','cl_','tj_','wt_','qb_','gh_']
3. 优化部分样式和层级
4. 添加专题过滤功能
5. 添加初始化配置功能

0.2.9

过渡版本

0.2.8

1. 添加onMounted生命周期,在地图加载完成后调用
2. vite.config添加关于vue打包的配置
3. 优化图层层级
4. 扩展请求表格数据后的处理逻辑,支持flat
5. 调整部分样式

0.2.7

1. 添加显隐配置
   • hideTools: true, // 隐藏工具栏
   • hideNavbar: true, // 隐藏导航栏
2. 添加代理配置trapManage
3. 探井点击表格发起新的请求,获取详细信息后展示到propver上
4. 添加整体配置文件导出功能,供用户直接引入配置，修改后覆盖默认配置
5. 添加整体utils导出功能，供用户直接引入utils
6. 优化弹窗默认大小,让可伸缩的弹窗默认大小更合理
7. 修正探井类圆点点击不到的bug
8. 开始更新日志文档
9. 移除无用打印,现有的替换为debug
10. 修正csk-table组件的插槽问题
11. 添加class类导出功能
12. 添加新组件CskDialog
13. 添加ol导出功能
14. 优化图层查找方法和代码,递归查找,查到终止
15. 调整物探绘制,原数据格式调整,重新适配

使用方法

插件引入

需要注入axios和eventBus，具体配置如下
import CskUi from "@src/utils/cskUi.js";
import { eventBus } from "@src/assets/core/index";
import { axios } from "@src/assets/core";

app.use(CskUi, {
  axios,
  eventBus,
});

组件引入

<Map :config="config" ref="gisRef"></Map>

import Map from './components/map.vue'
import { ref, onMounted } from 'vue'

const gisRef = ref(null)

// config 什么都不配置，一个空对象，表示使用默认配置，导航，六大模块搜索，绘制图形，表单，专题图层，天地图，打印，工具。等功能全部拥有
const config = {}
onMounted(() => {
    tools: {}, // 没有工具栏，具体配置如下
    special: [] // 没有专题图层，具体配置如下
    navbar: {
        tabsData: []  // 没有导航
    },
    hideTable: false, // 隐藏查询结果表格
    performance: {  // 默认没有性能分析
        performance: true, // 开启内存监控
        layerMonitor: true // 开启图层监控
    },
})

map 配置

默认不配置，使用默认地图。

// 地图配置路径default/map.js
{
    center: [106.54, 33.19],
    zoom: 4.5,
    showZoom: false,
    projection: "EPSG:4326",
    multiWorld: true,
    type: 'tile'
}

target 无需设置，强制使用 map 组件的 target，避免出现多个地图实例时造成冲突。

tools 配置

默认不配置，使用默认工具。全部展示，如果不需要显示某个工具，设置对应工具为{}即可。工具方法为内部方法，尽量避免直接调用内部方法

// 配置路径default/tools.js
{
    zoomIn: {},
    zoomOut: {},
    identify: {},
    fullExtent: {},
    layerControl: {
        name: "layerControl",
        title: "图层控制",
        icon: "fas fa-layer-group",
        visible: true,
        dropdownItems: [],
    },
    specialLayer: {},
    plot: {},
    print: {},
    tool: {},
}

天地图配置

// 配置路径default/tianditu.js

专题图层配置

// 配置路径default/special.js

绘制图形配置

// 配置路径default/draw.js

表单配置

// 配置路径default/form.js

导航配置

// 配置路径default/navbar.js
// 如果只需要查看矿权的，只需要引入navbar后，设置show为['kq']即可。
navbar.show = ['kq']

// 如果请求路径、方式全都和默认配置不一样，则需要自己放在navbar的写法重新配置

其他配置

    // 暴露给父组件的点击事件
    mapClick: (feature) => {
        console.log('map click', feature)
    },
    // 暴露给父组件的选中事件   
    mapChecked: (features) => {
        console.log('map checked', features)
    },
    // 暴露给父组件的切换导航事件
    changeNavbarTab: (tab) => {
        console.log('changeNavbarTab', tab)
    },
    // 其他具体配置可以参考 CskMap.vue 中的各种computed属性运算