mars3d基于vue3.0的widget使用

mars3d在vue3.0生态上开发了两个gis相关开源项目 mars3d-vue-example 和 mars3d-vue-project，在这两个项目中widget都是非常重要的一个模块。通过widget可以在复杂的场景下非常清晰的管理功能模块之间的互斥关系，管理内存，完成不同的功能模块之间的解耦，并且可以实现功能模块之间的交互。下面就来介绍一下，widget模块的使用。

前置依赖：使用widget模块，则必须依赖vuex，通过vuex实现widget管理、交互等。

widget相关的代码一般会被放置在`src/widgets`目录下，按照功能或者业务来新建子目录管理widget代码，一般每个目录下的 index.vue 就是此widget的入口，通常也会包括一个map.ts文件用于编写地图相关代码。在某些特殊的场景下，也会将多个vue文件放置在同一个widget目录下，方便共享map.ts的命名空间，后面会针对这些特殊场景具体介绍。下面是一个标准的widget目录位置和结构

创建好widget之后，下面就应该来配置widget，标准写法是在入口main.ts 同级新建widget-store.ts 文件，下面这个示例演示了这个文件的基本结构和一个widget的配置

import { defineAsyncComponent, markRaw } from "vue"
import { WidgetState } from "@mars/common/store/widget"
import { StoreOptions } from "vuex"

const store: StoreOptions = {
  state: {
    // 自定义widget的默认值
    defaultOption: {},
    // widgets 配置列表
    widgets: [
      {
        // required widget使用的异步组件
        component: markRaw(defineAsyncComponent(() => import("@mars/widgets/demo/menu/index.vue"))),
        // required widget的唯一标识
        name: "menu",
        // 是否可以被自动关闭 default true
        autoDisable: false,
        // 此widget打开时，是否自动关闭其他可关闭的widget default true
        disableOther: false,
        /*
         * widget分组, widget打开时会强制关闭所有同组的其他widget
         * 优先级高于 disableOther autoDisable
        */ 
        group: "demo"
      }
    ],
    // 默认打开的widget
    openAtStart: ["menu"]
  }
}

export default store

WidgetState接口定义如下

// 为 store state 声明类型
export interface DefaultOption {
  autoDisable?: boolean
  disableOther?: boolean | string[]
  group?: string // group相同的widget一定是互斥的
  meta?: any // 额外参数 不会在每次关闭后清除
}

export interface Widget {
  name: string // 唯一标识
  key?: string // 作为vue diff 环节的key，用于控制组件重载
  component?: any // widget关联的异步组件
  autoDisable?: boolean // 是否能够被自动关闭
  disableOther?: boolean | string[] // 是否自动关闭其他widget,或通过数组指定需要被关闭的widget
  group?: string // group相同的widget一定是互斥的
  visible?: boolean // 显示隐藏
  data?: any //