@mapgis/web-app-widgets-vue3

@mapgis/web-app-widgets-vue3

MapGIS Web App Platform 的公开微件集合包。本文档面向二次开发者，说明如何开发、构建和在应用中使用微件。

包定位

该包负责集中注册内置公开微件。入口 index.ts 会自动收集每个微件的安装函数，并在应用执行 app.use(MapGISWebAppWidgets) 时统一注册。

安装使用

在业务应用中安装并注册：

import MapGISWebAppWidgets from '@mapgis/web-app-widgets-vue3'
import '@mapgis/web-app-widgets-vue3/dist/index.css'

app.use(MapGISWebAppWidgets)

微件运行依赖 vue，并依赖 @mapgis/web-app-framework-vue3 提供的微件生命周期、地图上下文、面板和配置管理能力。

目录说明

• index.ts：微件集合入口，自动注册所有微件。
• index.css：集合包样式入口。
• packages/：公开微件源码目录，每个子目录是一个独立微件。
• vite.es.config.ts：集合包构建配置。

单个微件通常包含：

• resources/manifest.json：微件清单，声明名称、组件名、图标、资源文件和行为属性。
• resources/config.json：默认配置，可选。
• widget/：微件主界面和业务逻辑。
• setting/：微件配置界面，可选。
• index.ts：单微件安装入口。
• vite.config.ts：单微件构建配置。

开发微件

推荐使用微件脚手架创建基础结构：

pnpm cw

也可以手工新增微件目录，但必须保证：

• 微件目录有 resources/manifest.json。
• manifest.json 中的 component 与微件主组件注册名一致。
• properties.jsFile、properties.cssFile 与构建产物匹配。
• 如果启用设置页，hasSettingPage、settingUiComponent、settingJsFile、settingCssFile 要同时配置。
• 微件组件使用 widgetDefaultProps 接收框架注入属性，并通过 useWidget 获取生命周期和地图上下文。

构建

在当前项目目录执行：

pnpm build

该命令会先构建集合包，再构建内置微件资源，输出到：

• dist/：集合包产物。
• dist-widgets/：微件运行资源。