huweili-cesium 1.1.2 → 1.1.3

package/README.md

@@ -84,7 +84,68 @@ export default defineConfig({
 | `mapId` | `string` | `'default'` | 多地图实例 ID，与 `mapStore` 对应 |
 | `options` | `object` | — | 覆盖/合并 `MapConfig` 的配置 |
 
-事件：`@onload`，参数 `{ map, center }`（`map` 为 Cesium `Viewer` 实例）。
+事件：`@onload`，参数 `{ map, center, mapId, toolbar }`（`map` 为 Cesium `Viewer` 实例；`toolbar` 可在加载后动态增删按钮）。
+
+### 各项目自定义工具栏
+
+**方式 1：组件 props（推荐）**
+
+```vue
+<CesiumMap
+  map-id="default"
+  :show-default-toolbar="true"
+  :extra-toolbar-buttons="myExtraButtons"
+/>
+```
+
+```js
+import { useEventBus } from 'huweili-cesium/utils/useEventBus'
+
+const { emit } = useEventBus()
+
+const myExtraButtons = [
+  {
+    title: '导出',
+    text: '导',
+    onClick: () => emit('exportMap', {}),
+  },
+]
+```
+
+完全不用内置默认按钮、自己定义一整组：
+
+```vue
+<CesiumMap :toolbar-buttons="myToolbarButtons" />
+```
+
+**方式 2：`@onload` 里动态添加**
+
+```js
+function onMapLoad({ map, toolbar }) {
+  const btn = toolbar.addToolbarButton({
+    title: '测距',
+    iconSrc: '/images/ruler.svg',
+    onClick: (viewer) => { /* ... */ },
+  })
+}
+```
+
+**方式 3：不用 `CesiumMap`，自行拿 npm JS API**
+
+```js
+import { createCustomToolbarButtons } from 'huweili-cesium/customToolbarButtons'
+import { useMapStore } from 'huweili-cesium/stores/mapStore'
+
+const mapStore = useMapStore()
+const { addToolbarButtons } = createCustomToolbarButtons()
+const viewer = mapStore.getMap('default') // 以你项目 mapStore API 为准
+
+addToolbarButtons(viewer, [
+  { title: '自定义', text: 'A', onClick: () => {} },
+])
+```
+
+内置默认按钮里的图标路径使用宿主项目的 `import.meta.env.BASE_URL`（如 `/images/new/tj.svg`），请在宿主 `public/images/new/` 放置对应资源；业务按钮（如「机型统计」）通过 `useEventBus` 发事件，宿主需自行 `on('toggleBarChartControl', ...)` 监听。
 
 ## 可选业务钩子
 

package/index.vue

@@ -22,7 +22,27 @@ import { createCustomToolbarButtons } from './js/customToolbarButtons.js'
 
 const { merge } = objectUtils()
 const { mouseController, applyOrthographicFrustum, restorePerspectiveFrustum } = basicConfig()
-const { addToolbarButtons, removeToolbarButtons, createDefaultToolbarButtons } = createCustomToolbarButtons()
+const {
+  addToolbarButton,
+  addToolbarButtons,
+  removeToolbarButtons,
+  createDefaultToolbarButtons,
+} = createCustomToolbarButtons()
+
+/** 根据 props 组装最终要渲染的工具栏按钮配置 */
+function resolveToolbarButtonConfigs() {
+  if (props.toolbarButtons?.length) {
+    return props.toolbarButtons
+  }
+  const configs = []
+  if (props.showDefaultToolbar) {
+    configs.push(...createDefaultToolbarButtons({ mapId: props.mapId }))
+  }
+  if (props.extraToolbarButtons?.length) {
+    configs.push(...props.extraToolbarButtons)
+  }
+  return configs
+}
 
 // 获取store实例，保持响应性
 const mapStore = useMapStore()
@@ -39,6 +59,24 @@ const props = defineProps({
   mapId: {
     type: String,
     default: 'default'
+  },
+  /** 是否挂载 npm 包内置的默认工具栏按钮 */
+  showDefaultToolbar: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 完全自定义工具栏按钮配置（传入后不再使用内置默认按钮）
+   * 项格式同 createCustomToolbarButtons 的 addToolbarButton options
+   */
+  toolbarButtons: {
+    type: Array,
+    default: undefined
+  },
+  /** 在默认按钮之后追加的额外按钮（各项目可在此扩展） */
+  extraToolbarButtons: {
+    type: Array,
+    default: () => []
   }
 })
 
@@ -199,18 +237,25 @@ const initCesium = async () => {
     // 初始化半球区域
     const center = mapOptions.scene.center || {}
  
-    // 在主页按钮附近添加自定义按钮
-    customButtons = addToolbarButtons(map, createDefaultToolbarButtons({
-      mapId: props.mapId
-    }))
+    // 在主页按钮附近添加工具栏按钮（默认 + 项目扩展，或完全自定义）
+    const toolbarConfigs = resolveToolbarButtonConfigs()
+    if (toolbarConfigs.length) {
+      customButtons = addToolbarButtons(map, toolbarConfigs)
+    }
 
     // 设置地图加载状态为已加载
     mapStore.setMapLoadSta(MapLoadStatus.LOADED, props.mapId)
 
     console.log(`Cesium 地图加载成功，mapId: ${props.mapId}`)
     emit("onload", {
-      map: map,
-      center: center
+      map,
+      center,
+      mapId: props.mapId,
+      toolbar: {
+        addToolbarButton: (opt) => addToolbarButton(map, opt),
+        addToolbarButtons: (opts) => addToolbarButtons(map, opts),
+        removeToolbarButtons,
+      },
     })
 
     // 添加持续渲染循环，避免浏览器进入节能模式

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huweili-cesium",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
   "type": "module",
   "main": "./index.js",