GIS 组件配置说明文档

使用方法

插件引入

需要注入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属性运算