1.widget说明

1.1 基本概念

Widget在Mars3D平台中是一个功能模块化的UI组件系统，它将特定的地图功能封装成独立的、可复用的组件单元。每个widget都是一个完整的功能模块，包含UI界面、业务逻辑和地图交互。

1.2 基本结构

• index.vue - UI界面和Vue逻辑，涉及 UI 层面、和地图无关的操作
• map.ts - 地图操作和业务逻辑，涉及地图业务的操作均写在 map.ts 中
• 

2.目录说明

2.1主要目录说明

 

mars3d-react-project
└───src                 主要项目代码
│   └───common          公共核心文件
│   └───components      公共组件
│   └───directive       指令
│   └───misc            ts模块定义
│   └───pages           页面入口
│   └───utils           工具方法
│   └───widget          功能相关的widget控件【重要】
│
└───public              静态资源
│   └───config          地图的配置文件等
│   └───img             图片资源
│
│─── .eslintrc.js        eslint配置文件
│─── package.json        项目配置信息
└─── vite.config.ts      vite 配置文件
└─── tsconfig.js         ts 配置文件
└─── *.html              各页面入口

2.2要用到的目录说明

2.2.1 src/common/store/widget.ts

包含关于widget加载和配置的相关代码，了解即可

2.2.1.1 activate方法能够激活widget组件(可在此加日志，查看widget是否加载成功)

// 激活指定 widget模块
    activate: (option: string | Widget | (string | Widget)[], reload = true) => {
      let widgets: (string | Widget)[] = []
      if (!Array.isArray(option)) {
        widgets.push(option)
      } else {
        widgets = option
      }
      widgets.forEach((widget) => {
        let params: any
        if (typeof widget === "string") {
          params = { reload, name: widget }
        } else {
          params = { reload, ...widget }
        }
        store.dispatch("activate", params)
        logInfo("激活了widget", params)
      })
    }

2.2.1.2 currentWidget能获取当前激活的widget

 currentWidget,
    // 获取指定的widget
    getWidget: (name: string) => {
      const widget = store.state.widgets.find((item: any) => item.name === name)
      if (!widget) {
        return null
      }

      return {
        ...widget,
        onUpdate(callback: EventCb) {
          if (widget) {
            widgetEvent.on(widget.name, callback)
          }
          onUnmounted(() => {
            widgetEvent.off(widget.name, callback)
          })
        }
      }
    },

2.2.2 src/widgets/demo/sample-dialog

p

基本的index.vue和map.ts代码格式可参考这个demo

2.2.3 src/pages/*/widget-store.ts

widget-store.ts的作用主要是挂载widget组件

2.2.4 src/widgets/basic(或者business或者data-show,最好在basic创建) 

创建widget组件的位置(包含index.vue 和 main.ts)

2.2.5 src/widgets/basic/toolbar/index.vue

工具栏板块，在这添加新功能的UI

3.创建步骤

3.1 在widgets的basic中创建最基本的界面index.vue(界面设计)和map.ts

3.1.1基本的Index.vue和map.ts示例

<!-- index.vue -->
<template>
  <mars-dialog title="功能名称">
    <!-- UI内容 -->
  </mars-dialog>
</template>

<script setup lang="ts">
import useLifecycle from "@mars/common/uses/use-lifecycle"
import { useWidget } from "@mars/common/store/widget"
import * as mapWork from "./map"

// 启用地图生命周期
useLifecycle(mapWork)

const { updateWidget } = useWidget()

// 组件卸载时清理
onUnmounted(() => {
  updateWidget("toolbar", "widget-name")
})
</script>

注意useLifecycle(mapWork)必须加，启用 map.ts 的生命周期，加上才能用地图的对象

// map.ts
import * as mars3d from "mars3d"

let map: mars3d.Map
let graphicLayer: mars3d.layer.GraphicLayer

// 初始化
export function onMounted(mapInstance: mars3d.Map) {
  map = mapInstance
  // 地图相关初始化
}

// 清理
export function onUnmounted() {
  // 清理地图资源
}

3.2 在主页面page的三个wid-store.ts中挂载注册刚刚创建的widget组件

注意:最好3个widget-store.ts都挂载,只挂载一个容易挂载失败

3.3 在widgets/basic/toolbar工具栏UI中添加该组件

注意:icon是图标，必须用已有的(复制一个)，不要用ai生成的

3.4 检查index.vue和map.ts(不要有爆红,一直有爆红可以用/* eslint-disable */)