mars3d基于react版本的widget使用

 

       如果大家和mars3d已经有了一段时间的接触，应该已经了解过一个概念叫widget。widget并不是mars3d本身sdk中的内置模块，而是火星科技基于一个相似的标准，在原生js、vue3.0、react或者未来还有其他一些技术栈上的一个解决方案。

      widget主要就是为了快速实现gis项目中常见的一些工具面板。满足定制化开发的需求，这里我们就来了解一下 在react技术栈下的使用。

       为了方便大家更好的学习，可以先去github上下载开源的react基础项目，这里主要先介绍使用，不过多设计widge资源的导入了。

1. widget-state.ts

widget-state.ts 是统一的配置文件，位于 src/widget-state.ts。会默认导出一个对象，接口定义如下：

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

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

export interface WidgetState {
  widgets?: Widget[]

  openAtStart?: string[]

  defaultOption?: DefaultOption
}

最需要关注的是 widgets字段，这里存放的就是所有可用的widget。具体配置参考注释和项目代码。openAtStart 中可以用来配置默认显示的widget。这样配置完成之后，我们就可以在页面进来之后直接看到这些面板。

2.动态交互

常用的动态交互函数如下：

// 隐藏
export const disable: (widget: string | string[]) => any
// 激活
export const activate: (widget: Widget | string, reload?: boolean) => any
// 全部隐藏
export const disableAll: (force?: boolean) => any
// 更新widget的data数据
export const updateWidget: (widget: string, data: any) => void
// 是否被激活
export const isActive: (widget: string) => any

3.currentWidget

不同于vue版本需要通过useWidget来获取当前的widget，react版本可以直接通过props获取