huweili-cesium 1.3.0 → 1.3.2

package/README.md

@@ -1,315 +1,315 @@
-# huweili-cesium
-
-基于 Cesium 的地图工具库。所有 **JS 模块** 位于包内 `js/` 目录（含 `toolbar`、`stores`、`utils`、`config`、`api` 子目录）；根目录保留 `index.js`（npm 主入口）与 `index.vue`（地图组件）。
-
-## 安装
-
-```bash
-npm install huweili-cesium
-```
-
-### 对等依赖（需在项目中已安装）
-
-- `cesium` 1.136.0
-- `vue` ^3.3
-- `pinia` ^2 或 ^3
-- `mitt` 3
-- `qrcode` 1.5
-
-## 使用前准备
-
-1. 在 HTML 中加载与宿主项目一致的 `constants.js`（定义 `window.DroneStatus`、`window.MapInstanceIds` 等），或自行赋值这些全局变量。
-2. 在 Vue 应用中 `app.use(pinia)`，地图组件初始化后调用各 `*Config()` 工厂函数。
-
-## 引入示例
-
-### JS 模块
-
-```js
-// 主入口同时支持：默认导出组件 + 命名导出 JS 模块
-import CesiumMap, { basicConfig, setPoint, movePointConfig } from 'huweili-cesium'
-
-// 仅 JS 模块（不含 Vue 组件）可用子路径
-import { basicConfig } from 'huweili-cesium/js'
-
-// 或按文件引入
-import { basicConfig } from 'huweili-cesium/basis'
-import { hemisphereConfig } from 'huweili-cesium/hemisphere'
-import { createCustomToolbarButtons } from 'huweili-cesium/customToolbarButtons'
-```
-
-### Vue 地图组件（开箱即用）
-
-```vue
-<template>
-  <div class="map-page">
-    <CesiumMap map-id="default" @onload="onMapLoad" />
-  </div>
-</template>
-
-<script setup>
-// 推荐：包主入口默认导出组件
-import CesiumMap from 'huweili-cesium'
-// 等价写法：
-// import CesiumMap from 'huweili-cesium/index.vue'
-// import CesiumMap from 'huweili-cesium/CesiumMap'
-
-function onMapLoad({ map, center }) {
-  console.log('地图已加载', map, center)
-}
-</script>
-
-<style scoped>
-.map-page {
-  width: 100%;
-  height: 100vh;
-}
-</style>
-```
-
-**Vite 宿主项目**需在 `vite.config` 中允许编译该依赖（否则 `.vue` 可能无法处理）：
-
-```js
-export default defineConfig({
-  optimizeDeps: {
-    include: ['huweili-cesium'],
-  },
-})
-```
-
-组件 props：
-
-| prop | 类型 | 默认 | 说明 |
-|------|------|------|------|
-| `mapId` | `string` | `'default'` | 多地图实例 ID，与 `mapStore` 对应 |
-| `options` | `object` | — | 覆盖/合并 `MapConfig` 的配置 |
-
-事件：`@onload`，参数 `{ map, center, mapId, toolbar }`（`map` 为 Cesium `Viewer` 实例；`toolbar` 可在加载后动态增删按钮）。
-
-### 为何不用 Cesium 内置 2D 模式
-
-Viewer 固定为 `SCENE3D`，业务上的「2D」是 **正交相机 + 俯视**（`basis.js` / `cameraInteraction.js`），不切换 `SCENE2D` / `COLUMBUS_VIEW`。简要优点：
-
-- **2D/3D 切换更顺**：无场景变形（morph），透视与正交互换，缩放与锚点更易对齐（含工具栏切换、RTK 跟飞）。
-- **渲染一致**：无人机、轨迹、围栏等与 3D 同一套规则，少踩 2D 投影下的显示差异。
-- **交互可控**：2D 可锁定俯视、自定义滚轮缩放（正交宽度），避免与内置 2D 控制器行为不一致。
-- **语义清晰**：`mapStore` 的 `2D`/`3D` 表示业务视角，不与 Cesium `SceneMode` 枚举混用。
-
-配置里 `scene.sceneMode: '2D'` 表示初始化俯视正交，而非启用 Cesium 平面地图模式。
-
-### 各项目自定义工具栏
-
-**方式 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" />
-```
-
-内置默认按钮里的图标路径使用宿主项目的 `import.meta.env.BASE_URL`（如 `/images/new/tj.svg`），请在宿主 `public/images/new/` 放置对应资源；业务按钮（如「机型统计」）通过 `useEventBus` 发事件，宿主需自行 `on('toggleBarChartControl', ...)` 监听。
-
-## 可选业务钩子
-
-若需光电引导、轨迹列表等业务能力，在应用启动时注入：
-
-```js
-import { setDroneMapProvider, setOptGuideHandler } from 'huweili-cesium/config/hooks'
-
-setDroneMapProvider(() => myDroneMap)
-setOptGuideHandler((payload) => api.toOptGuide(payload))
-```
-
-## 发布到 npm（维护者）
-
-项目根目录已配置 `.npmrc`（Token 授权，见 `.npmrc.example`），**无需执行 `npm login`**。安装依赖走 npmmirror 镜像，发布通过 `package.json` 中的 `publishConfig` 固定到 npm 官方源。
-
-### 发布步骤
-
-1. 修改 `package.json` 中的 `version`（须高于 npm 上已有版本）
-2. 在项目根目录执行：
-
-```bash
-npm publish
-```
-
-### 仅验证打包内容（不上传）
-
-```bash
-npm publish --dry-run
-```
-
-### 本地打包预览
-
-```bash
-npm pack
-# 会生成 huweili-cesium-x.y.z.tgz，解压检查是否包含全部 js
-```
-
-### 验证登录与最新版本
-
-```bash
-npm whoami --registry=https://registry.npmjs.org/
-npm view huweili-cesium version --registry=https://registry.npmjs.org/
-```
-
-## 从 tzr 源目录同步更新
-
-```bash
-cd huweili-cesium
-npm run sync
-# 同步后需重新修复 @/ 别名为包内相对路径（见 scripts）
-```
-
-## 地图与自定义工具栏
-
-地图组件来自 npm 包 **`huweili-cesium`**，工具栏按钮在业务侧配置，不写在 `mapConfig.js` 里。
-
-### 1. 前置配置（`constants.js` / `mapConfig.js`）
-
-`index.html` 中已按顺序引入：
-
-```html
-<script src="/config/constants.js"></script>
-<script src="/config/mapConfig.js"></script>
-```
-
-| 文件 | 作用 | 与地图组件的关系 |
-|------|------|------------------|
-| `public/config/constants.js` | `window.MapInstanceIds` 定义多地图 ID（如 `HOME: 'home-main-map'`） | `:map-id` 须与之一致，工具栏回调里的 `mapId` 也要传同一个值 |
-| `public/config/mapConfig.js` | `window.MapConfig`（中心点、2D/3D、底图列表、是否显示 Cesium 自带控件等） | 控制地图初始化；`control.homeButton: false` 时由自定义工具栏替代 |
-
-在页面中引用常量（从 `runtimeConfig` 导入）：
-
-```js
-import { MapInstanceIds } from '@/config/runtimeConfig'
-
-const HOME_MAP_ID = MapInstanceIds?.HOME || 'home-main-map'
-```
-
-### 2. 页面引用 `CesiumMap`（首页示例）
-
-`src/views/home/indexnew.vue`：
-
-```vue
-<template>
-  <CesiumMap
-    :map-id="HOME_MAP_ID"
-    :toolbar-buttons="getHomeToolbarButtons({ mapId: HOME_MAP_ID })"
-    @onload="mapOnLoad"
-  />
-</template>
-
-<script setup>
-import CesiumMap from 'huweili-cesium'
-import { MapInstanceIds } from '@/config/runtimeConfig'
-import { getHomeToolbarButtons } from '@/utils/homeToolbarButtons'
-
-const HOME_MAP_ID = MapInstanceIds?.HOME || 'home-main-map'
-</script>
-```
-
-- **`toolbar-buttons`**：传入整组按钮（首页不用包内默认按钮，因此不必再写 `show-default-toolbar`）
-- **`map-id`**：与 `constants.js` 里 `MapInstanceIds.HOME` 保持一致
-
-### 3. 工具栏按钮配置（`src/utils/homeToolbarButtons.js`）
-
-通用按钮（指北针、机型统计、回中心、2D/3D、缩放、底图、全屏）集中在此文件维护。
-
-页面只需追加自己的按钮时，使用 `extra`：
-
-```js
-import { useEventBus } from 'huweili-cesium/utils/useEventBus'
-import { getHomeToolbarButtons } from '@/utils/homeToolbarButtons'
-
-const { emit } = useEventBus()
-
-getHomeToolbarButtons({
-  mapId: HOME_MAP_ID,
-  extra: [
-    {
-      title: '导出',
-      text: '导',
-      onClick: () => emit('exportMap', {}),
-    },
-  ],
-})
-```
-
-按钮项字段说明：
-
-| 字段 | 说明 |
-|------|------|
-| `title` | 悬停提示 |
-| `text` / `iconSrc` | 文字或图标（二选一，图标放 `public/images/new/`） |
-| `isCompass: true` | 指北针专用 |
-| `onClick(viewer, button)` | 点击回调 |
-
-「机型统计」等通过 `useEventBus` 发事件，页面需 `on('toggleBarChartControl', ...)` 监听。
-
-### 4. 其他页面
-
-- 复用首页整套按钮：`getHomeToolbarButtons({ mapId: '你的 mapId' })`
-- 完全自定义：直接传数组给 `:toolbar-buttons="[...]"`
-- 地图加载后动态增删：在 `@onload` 回调里使用返回的 `toolbar.addToolbarButton(...)`
-
-图标资源路径使用 `import.meta.env.BASE_URL`（如 `/jlap/images/new/xxx.svg`），请放在 `public/images/new/`。
-
-## 目录结构
-
-```
-huweili-cesium/
-├── index.js          # npm 主入口（默认导出 CesiumMap + 转发 js 模块）
-├── index.vue         # 地图 Vue 组件
-├── components/       # 组件（如 wsIndicator）
-├── js/               # 全部 JS 模块
-│   ├── basis.js
-│   ├── toolbar/
-│   ├── stores/
-│   ├── utils/
-│   ├── config/
-│   └── api/
-└── package.json
-```
-
-## 包含的文件清单（均在 `js/` 下）
-
-| 文件 | 说明 |
-|------|------|
-| js/basis.js | 地图基础操作 |
-| js/setPoint.js / js/movePoint.js | 点位与移动 |
-| js/setPath.js / js/movePath.js | 路径与轨迹 |
-| js/groundLink.js | 地面连接线 |
-| js/hemisphere.js | 半球区域 |
-| js/geometry.js | 几何图形 |
-| js/drawFence.js / js/drawFenceNew.js | 电子围栏 |
-| js/cardPool.js / js/labelDiv.js | 信息牌 |
-| js/clickHandler.js | 点击交互 |
-| js/tileProviders.js | 底图瓦片 |
-| js/customToolbarButtons.js | 工具栏 |
-| js/toolbar/* | 指南针、底图切换、缩放、全屏 |
-| js/droneRipple.js / js/qrCodeGenerator.js | 涟漪、二维码 |
-
-另含 `js/stores/mapStore.js`、`js/utils/*`、`js/config/*`、`js/api/*` 等运行依赖。
+# huweili-cesium
+
+基于 Cesium 的地图工具库。所有 **JS 模块** 位于包内 `js/` 目录（含 `toolbar`、`stores`、`utils`、`config`、`api` 子目录）；根目录保留 `index.js`（npm 主入口）与 `index.vue`（地图组件）。
+
+## 安装
+
+```bash
+npm install huweili-cesium
+```
+
+### 对等依赖（需在项目中已安装）
+
+- `cesium` 1.136.0
+- `vue` ^3.3
+- `pinia` ^2 或 ^3
+- `mitt` 3
+- `qrcode` 1.5
+
+## 使用前准备
+
+1. 在 HTML 中加载与宿主项目一致的 `constants.js`（定义 `window.DroneStatus`、`window.MapInstanceIds` 等），或自行赋值这些全局变量。
+2. 在 Vue 应用中 `app.use(pinia)`，地图组件初始化后调用各 `*Config()` 工厂函数。
+
+## 引入示例
+
+### JS 模块
+
+```js
+// 主入口同时支持：默认导出组件 + 命名导出 JS 模块
+import CesiumMap, { basicConfig, setPoint, movePointConfig } from 'huweili-cesium'
+
+// 仅 JS 模块（不含 Vue 组件）可用子路径
+import { basicConfig } from 'huweili-cesium/js'
+
+// 或按文件引入
+import { basicConfig } from 'huweili-cesium/basis'
+import { hemisphereConfig } from 'huweili-cesium/hemisphere'
+import { createCustomToolbarButtons } from 'huweili-cesium/customToolbarButtons'
+```
+
+### Vue 地图组件（开箱即用）
+
+```vue
+<template>
+  <div class="map-page">
+    <CesiumMap map-id="default" @onload="onMapLoad" />
+  </div>
+</template>
+
+<script setup>
+// 推荐：包主入口默认导出组件
+import CesiumMap from 'huweili-cesium'
+// 等价写法：
+// import CesiumMap from 'huweili-cesium/index.vue'
+// import CesiumMap from 'huweili-cesium/CesiumMap'
+
+function onMapLoad({ map, center }) {
+  console.log('地图已加载', map, center)
+}
+</script>
+
+<style scoped>
+.map-page {
+  width: 100%;
+  height: 100vh;
+}
+</style>
+```
+
+**Vite 宿主项目**需在 `vite.config` 中允许编译该依赖（否则 `.vue` 可能无法处理）：
+
+```js
+export default defineConfig({
+  optimizeDeps: {
+    include: ['huweili-cesium'],
+  },
+})
+```
+
+组件 props：
+
+| prop | 类型 | 默认 | 说明 |
+|------|------|------|------|
+| `mapId` | `string` | `'default'` | 多地图实例 ID，与 `mapStore` 对应 |
+| `options` | `object` | — | 覆盖/合并 `MapConfig` 的配置 |
+
+事件：`@onload`，参数 `{ map, center, mapId, toolbar }`（`map` 为 Cesium `Viewer` 实例；`toolbar` 可在加载后动态增删按钮）。
+
+### 为何不用 Cesium 内置 2D 模式
+
+Viewer 固定为 `SCENE3D`，业务上的「2D」是 **正交相机 + 俯视**（`basis.js` / `cameraInteraction.js`），不切换 `SCENE2D` / `COLUMBUS_VIEW`。简要优点：
+
+- **2D/3D 切换更顺**：无场景变形（morph），透视与正交互换，缩放与锚点更易对齐（含工具栏切换、RTK 跟飞）。
+- **渲染一致**：无人机、轨迹、围栏等与 3D 同一套规则，少踩 2D 投影下的显示差异。
+- **交互可控**：2D 可锁定俯视、自定义滚轮缩放（正交宽度），避免与内置 2D 控制器行为不一致。
+- **语义清晰**：`mapStore` 的 `2D`/`3D` 表示业务视角，不与 Cesium `SceneMode` 枚举混用。
+
+配置里 `scene.sceneMode: '2D'` 表示初始化俯视正交，而非启用 Cesium 平面地图模式。
+
+### 各项目自定义工具栏
+
+**方式 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" />
+```
+
+内置默认按钮里的图标路径使用宿主项目的 `import.meta.env.BASE_URL`（如 `/images/new/tj.svg`），请在宿主 `public/images/new/` 放置对应资源；业务按钮（如「机型统计」）通过 `useEventBus` 发事件，宿主需自行 `on('toggleBarChartControl', ...)` 监听。
+
+## 可选业务钩子
+
+若需光电引导、轨迹列表等业务能力，在应用启动时注入：
+
+```js
+import { setDroneMapProvider, setOptGuideHandler } from 'huweili-cesium/config/hooks'
+
+setDroneMapProvider(() => myDroneMap)
+setOptGuideHandler((payload) => api.toOptGuide(payload))
+```
+
+## 发布到 npm（维护者）
+
+项目根目录已配置 `.npmrc`（Token 授权，见 `.npmrc.example`），**无需执行 `npm login`**。安装依赖走 npmmirror 镜像，发布通过 `package.json` 中的 `publishConfig` 固定到 npm 官方源。
+
+### 发布步骤
+
+1. 修改 `package.json` 中的 `version`（须高于 npm 上已有版本）
+2. 在项目根目录执行：
+
+```bash
+npm publish
+```
+
+### 仅验证打包内容（不上传）
+
+```bash
+npm publish --dry-run
+```
+
+### 本地打包预览
+
+```bash
+npm pack
+# 会生成 huweili-cesium-x.y.z.tgz，解压检查是否包含全部 js
+```
+
+### 验证登录与最新版本
+
+```bash
+npm whoami --registry=https://registry.npmjs.org/
+npm view huweili-cesium version --registry=https://registry.npmjs.org/
+```
+
+## 从 tzr 源目录同步更新
+
+```bash
+cd huweili-cesium
+npm run sync
+# 同步后需重新修复 @/ 别名为包内相对路径（见 scripts）
+```
+
+## 地图与自定义工具栏
+
+地图组件来自 npm 包 **`huweili-cesium`**，工具栏按钮在业务侧配置，不写在 `mapConfig.js` 里。
+
+### 1. 前置配置（`constants.js` / `mapConfig.js`）
+
+`index.html` 中已按顺序引入：
+
+```html
+<script src="/config/constants.js"></script>
+<script src="/config/mapConfig.js"></script>
+```
+
+| 文件 | 作用 | 与地图组件的关系 |
+|------|------|------------------|
+| `public/config/constants.js` | `window.MapInstanceIds` 定义多地图 ID（如 `HOME: 'home-main-map'`） | `:map-id` 须与之一致，工具栏回调里的 `mapId` 也要传同一个值 |
+| `public/config/mapConfig.js` | `window.MapConfig`（中心点、2D/3D、底图列表、是否显示 Cesium 自带控件等） | 控制地图初始化；`control.homeButton: false` 时由自定义工具栏替代 |
+
+在页面中引用常量（从 `runtimeConfig` 导入）：
+
+```js
+import { MapInstanceIds } from '@/config/runtimeConfig'
+
+const HOME_MAP_ID = MapInstanceIds?.HOME || 'home-main-map'
+```
+
+### 2. 页面引用 `CesiumMap`（首页示例）
+
+`src/views/home/indexnew.vue`：
+
+```vue
+<template>
+  <CesiumMap
+    :map-id="HOME_MAP_ID"
+    :toolbar-buttons="getHomeToolbarButtons({ mapId: HOME_MAP_ID })"
+    @onload="mapOnLoad"
+  />
+</template>
+
+<script setup>
+import CesiumMap from 'huweili-cesium'
+import { MapInstanceIds } from '@/config/runtimeConfig'
+import { getHomeToolbarButtons } from '@/utils/homeToolbarButtons'
+
+const HOME_MAP_ID = MapInstanceIds?.HOME || 'home-main-map'
+</script>
+```
+
+- **`toolbar-buttons`**：传入整组按钮（首页不用包内默认按钮，因此不必再写 `show-default-toolbar`）
+- **`map-id`**：与 `constants.js` 里 `MapInstanceIds.HOME` 保持一致
+
+### 3. 工具栏按钮配置（`src/utils/homeToolbarButtons.js`）
+
+通用按钮（指北针、机型统计、回中心、2D/3D、缩放、底图、全屏）集中在此文件维护。
+
+页面只需追加自己的按钮时，使用 `extra`：
+
+```js
+import { useEventBus } from 'huweili-cesium/utils/useEventBus'
+import { getHomeToolbarButtons } from '@/utils/homeToolbarButtons'
+
+const { emit } = useEventBus()
+
+getHomeToolbarButtons({
+  mapId: HOME_MAP_ID,
+  extra: [
+    {
+      title: '导出',
+      text: '导',
+      onClick: () => emit('exportMap', {}),
+    },
+  ],
+})
+```
+
+按钮项字段说明：
+
+| 字段 | 说明 |
+|------|------|
+| `title` | 悬停提示 |
+| `text` / `iconSrc` | 文字或图标（二选一，图标放 `public/images/new/`） |
+| `isCompass: true` | 指北针专用 |
+| `onClick(viewer, button)` | 点击回调 |
+
+「机型统计」等通过 `useEventBus` 发事件，页面需 `on('toggleBarChartControl', ...)` 监听。
+
+### 4. 其他页面
+
+- 复用首页整套按钮：`getHomeToolbarButtons({ mapId: '你的 mapId' })`
+- 完全自定义：直接传数组给 `:toolbar-buttons="[...]"`
+- 地图加载后动态增删：在 `@onload` 回调里使用返回的 `toolbar.addToolbarButton(...)`
+
+图标资源路径使用 `import.meta.env.BASE_URL`（如 `/jlap/images/new/xxx.svg`），请放在 `public/images/new/`。
+
+## 目录结构
+
+```
+huweili-cesium/
+├── index.js          # npm 主入口（默认导出 CesiumMap + 转发 js 模块）
+├── index.vue         # 地图 Vue 组件
+├── components/       # 组件（如 wsIndicator）
+├── js/               # 全部 JS 模块
+│   ├── basis.js
+│   ├── toolbar/
+│   ├── stores/
+│   ├── utils/
+│   ├── config/
+│   └── api/
+└── package.json
+```
+
+## 包含的文件清单（均在 `js/` 下）
+
+| 文件 | 说明 |
+|------|------|
+| js/basis.js | 地图基础操作 |
+| js/setPoint.js / js/movePoint.js | 点位与移动 |
+| js/setPath.js / js/movePath.js | 路径与轨迹 |
+| js/groundLink.js | 地面连接线 |
+| js/hemisphere.js | 半球区域 |
+| js/geometry.js | 几何图形 |
+| js/drawFence.js / js/drawFenceNew.js | 电子围栏 |
+| js/cardPool.js / js/labelDiv.js | 信息牌 |
+| js/clickHandler.js | 点击交互 |
+| js/tileProviders.js | 底图瓦片 |
+| js/customToolbarButtons.js | 工具栏 |
+| js/toolbar/* | 指南针、底图切换、缩放、全屏 |
+| js/droneRipple.js / js/qrCodeGenerator.js | 涟漪、二维码 |
+
+另含 `js/stores/mapStore.js`、`js/utils/*`、`js/config/*`、`js/api/*` 等运行依赖。

package/js/basis.js

@@ -874,6 +874,7 @@ export function basicConfig() {
             id: `home_bearing_${Date.now()}`,
             mapId,
             color: '#ffd400',
+            width: 3,
           })
         },
       },

package/js/drawFenceNew.js

@@ -1006,6 +1006,8 @@ export function drawFenceNew() {
     let ellipseEntity = null
     // tipEntity：提示文字实体（显示"点击确定圆心"等提示）
     let tipEntity = null
+    // radiusLabelEntity：绘制过程中显示当前半径的标签
+    let radiusLabelEntity = null
     // nameLabelEntity：围栏名称标签实体
     let nameLabelEntity = null
     // handler：屏幕事件处理器（监听鼠标点击、移动等）
@@ -1019,7 +1021,8 @@ export function drawFenceNew() {
       ellipse: `${options.id}_draw_circle_wall`,  // 临时椭圆围栏
       center: `${options.id}_draw_center_point`,  // 临时圆心点
       active: `${options.id}_draw_active_point`,  // 临时边界点
-      tip: `${options.id}_draw_tip`               // 临时提示文字
+      tip: `${options.id}_draw_tip`,              // 临时提示文字
+      radiusLabel: `${options.id}_draw_radius_label`,  // 临时半径标签
     }
 
     // ==================== 辅助函数部分 ====================
@@ -1078,6 +1081,23 @@ export function drawFenceNew() {
       return geodesic.surfaceDistance
     }
 
+    const formatRadius = (radius) => {
+      if (!Number.isFinite(radius)) return '0 m'
+      if (radius >= 1000) return `${(radius / 1000).toFixed(2)} km`
+      return `${radius.toFixed(2)} m`
+    }
+
+    const getRadiusLabelPosition = () => {
+      if (!centerPosition || !edgePosition) return null
+      const centerCartographic = Cesium.Cartographic.fromCartesian(centerPosition)
+      const edgeCartographic = Cesium.Cartographic.fromCartesian(edgePosition)
+      return Cesium.Cartesian3.fromRadians(
+        (centerCartographic.longitude + edgeCartographic.longitude) / 2,
+        (centerCartographic.latitude + edgeCartographic.latitude) / 2,
+        0,
+      )
+    }
+
     /**
      * 获取提示文字的位置（鼠标位置优先）
      * 
@@ -1099,7 +1119,7 @@ export function drawFenceNew() {
       }
 
       // 已经有圆心 → 提示用户"移动调整半径，点击或右键完成"
-      return '移动鼠标调整半径，点击或右键完成绘制'
+      return `移动鼠标调整半径，当前半径：${formatRadius(getRadius())}，点击或右键完成绘制`
     }
 
     /**
@@ -1180,7 +1200,32 @@ export function drawFenceNew() {
         })
       }
 
-      // 4. 创建提示文字实体（如果还没有）
+      // 4. 创建半径标签（确定圆心后显示）
+      if (!radiusLabelEntity && centerPosition) {
+        radiusLabelEntity = map.entities.add({
+          id: tempIds.radiusLabel,
+          position: new Cesium.CallbackProperty(() => getRadiusLabelPosition(), false),
+          label: {
+            text: new Cesium.CallbackProperty(() => formatRadius(getRadius()), false),
+            font: 'bold 10px Microsoft YaHei',
+            fillColor: Cesium.Color.WHITE,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            showBackground: true,
+            backgroundColor: Cesium.Color.fromCssColorString('rgba(0, 0, 0, 0.75)'),
+            backgroundPadding: new Cesium.Cartesian2(4, 4),
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            pixelOffset: new Cesium.Cartesian2(0, -16),
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.6),
+          },
+        })
+      }
+
+      // 5. 创建提示文字实体（如果还没有）
       if (!tipEntity) {
         tipEntity = createMouseTipEntity(map, {
           id: tempIds.tip,
@@ -1196,7 +1241,7 @@ export function drawFenceNew() {
      */
     const cleanupTempEntities = () => {
       // 遍历所有临时实体，如果存在就从地图上移除
-      ;[ellipseEntity, centerPointEntity, activePointEntity, tipEntity, nameLabelEntity].forEach((entity) => {
+      ;[ellipseEntity, centerPointEntity, activePointEntity, radiusLabelEntity, tipEntity, nameLabelEntity].forEach((entity) => {
         if (entity) {
           map.entities.remove(entity)
         }
@@ -1205,6 +1250,7 @@ export function drawFenceNew() {
       ellipseEntity = null
       centerPointEntity = null
       activePointEntity = null
+      radiusLabelEntity = null
       nameLabelEntity = null
     }
 
@@ -1273,13 +1319,14 @@ export function drawFenceNew() {
 
       await applyTerrainWallToEntity(map, fenceEntity, circleLngLats, height)
 
-      ;[centerPointEntity, activePointEntity, tipEntity].forEach((entity) => {
+      ;[centerPointEntity, activePointEntity, radiusLabelEntity, tipEntity].forEach((entity) => {
         if (entity) {
           map.entities.remove(entity)
         }
       })
       centerPointEntity = null
       activePointEntity = null
+      radiusLabelEntity = null
       tipEntity = null
 
       const centerHeights = await sampleTerrainHeights(map, [centerData])

package/js/measureBearing.js

@@ -115,6 +115,8 @@ export function measureBearing() {
     }
 
     const color = Cesium.Color.fromCssColorString(options.color || '#ffd400')
+    const width = options.width ?? 3
+    const clampToGround = options.clampToGround ?? true
 
     let startPosition = null
     let endPosition = null
@@ -194,9 +196,10 @@ export function measureBearing() {
           id: tempIds.line,
           polyline: {
             positions: new Cesium.CallbackProperty(() => getLinePositions(), false),
-            width: 3,
+            width: width + 2,
             material: new Cesium.PolylineGlowMaterialProperty({ color, glowPower: 0.25 }),
-            clampToGround: true,
+            clampToGround,
+            antialias: true,
           },
         })
       }
@@ -220,6 +223,7 @@ export function measureBearing() {
             pixelOffset: new Cesium.Cartesian2(0, -16),
             disableDepthTestDistance: Number.POSITIVE_INFINITY,
             distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.6),
           },
         })
       }
@@ -242,7 +246,69 @@ export function measureBearing() {
       })
     }
 
+    const createDeleteButtonEntity = () => {
+      if (deleteButtonEntity || !endPosition) return
+      const outerGlow = map.entities.add({
+        id: `${tempIds.deleteButton}_outer_glow`,
+        position: new Cesium.CallbackProperty(() => getMidPosition(), false),
+        point: {
+          pixelSize: 32,
+          color: color.withAlpha(0.15),
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.5),
+        },
+      })
+      const ring = map.entities.add({
+        id: `${tempIds.deleteButton}_ring`,
+        position: new Cesium.CallbackProperty(() => getMidPosition(), false),
+        ellipse: {
+          semiMinorAxis: 14,
+          semiMajorAxis: 14,
+          material: color.withAlpha(0.6),
+          outline: true,
+          outlineColor: color.withAlpha(0.9),
+          outlineWidth: 2,
+          height: 10,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.5),
+        },
+      })
+      deleteButtonEntity = map.entities.add({
+        id: tempIds.deleteButton,
+        position: new Cesium.CallbackProperty(() => getMidPosition(), false),
+        point: {
+          pixelSize: 18,
+          color: new Cesium.Color(0.1, 0.2, 0.35, 0.95),
+          outlineColor: color.withAlpha(1),
+          outlineWidth: 2,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.5),
+        },
+        label: {
+          text: '✕',
+          font: 'bold 12px Arial',
+          fillColor: color.withAlpha(1),
+          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+          outlineColor: new Cesium.Color(color.red * 0.6, color.green * 0.6, color.blue * 0.6, 0.8),
+          outlineWidth: 3,
+          verticalOrigin: Cesium.VerticalOrigin.CENTER,
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
+          scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.5),
+        },
+      })
+      deleteButtonEntity.outerGlow = outerGlow
+      deleteButtonEntity.ring = ring
+    }
+
     const removeEntities = () => {
+      if (deleteButtonEntity) {
+        if (deleteButtonEntity.outerGlow) map.entities.remove(deleteButtonEntity.outerGlow)
+        if (deleteButtonEntity.ring) map.entities.remove(deleteButtonEntity.ring)
+      }
       [startPointEntity, endPointEntity, lineEntity, labelEntity, deleteButtonEntity, tipEntity].forEach((entity) => {
         if (entity) map.entities.remove(entity)
       })
@@ -289,28 +355,17 @@ export function measureBearing() {
       }
 
       createEndPointEntity()
-
-      deleteButtonEntity = map.entities.add({
-        id: tempIds.deleteButton,
-        position: new Cesium.CallbackProperty(() => getMidPosition(), false),
-        label: {
-          text: '✕',
-          font: 'bold 12px Arial',
-          fillColor: color,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          outlineColor: Cesium.Color.BLACK,
-          outlineWidth: 2,
-          verticalOrigin: Cesium.VerticalOrigin.CENTER,
-          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY,
-        },
-      })
+      createDeleteButtonEntity()
 
       deleteHandler = new Cesium.ScreenSpaceEventHandler(map.scene.canvas)
       deleteHandler.setInputAction((movement) => {
         const picked = map.scene.pick(movement.position)
-        if (!Cesium.defined(picked?.id)) return
-        if (picked.id === deleteButtonEntity || picked.id === tempIds.deleteButton) {
+        if (!Cesium.defined(picked)) return
+        const pickedEntity = picked.id
+        if (!Cesium.defined(pickedEntity)) return
+        if (typeof pickedEntity === 'string' && pickedEntity === tempIds.deleteButton) {
+          destroyGraphic()
+        } else if (pickedEntity === deleteButtonEntity) {
           destroyGraphic()
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

package/js/setPath.js

@@ -1,126 +1,126 @@
-/**
- * 轨迹设置模块
- * 
- * 提供在Cesium地图上设置无人机轨迹的功能
- * 
- * @author huweili
- * @email czxyhuweili@163.com
- * @version 1.0.0
- */
-import * as Cesium from 'cesium'
-import { useMapStore } from './stores/mapStore.js'
-import { DroneStatus, DroneStatusMap, MapInstanceIds } from './config/index.js'
-
-export function setPath() {
-  // 获取地图store实例
-  const mapStore = useMapStore()
-
-  /**
-   * 创建无人机轨迹
-   * @param pointId 无人机ID
-   * @param startPosition 初始位置
-   * @param status 无人机状态标识
-   * @param mapId 地图实例ID
-   * @returns 轨迹数据
-   */
-  const setDroneTrail = (options) => {
-    const { pointId, startPosition, status = DroneStatus.WHITELIST, mapId } = options
-    const map = mapStore.getMap(mapId)
-    if (!map) return
-
-    const trailId = `${pointId}_trail`
-
-    // 如果轨迹已存在，直接返回
-    if (mapStore.hasDroneTrail(pointId, mapId)) {
-      console.log(`轨迹 ${trailId} 已存在`)
-      return mapStore.getDroneTrail(pointId, mapId)
-    }
-
-    // 获取状态配置
-    const statusConfig = DroneStatusMap[status]
-    const trailColor = statusConfig ? Cesium.Color.fromCssColorString(statusConfig.trailColor) : Cesium.Color.fromCssColorString('rgba(0, 255, 145, 1)')
-
-    // 轨迹实例
-    const initialPosition = startPosition.clone()
-    let trailData = {
-      entity: null, // 轨迹实体
-      positions: [{ position: initialPosition, timestamp: map.clock.currentTime }], // 轨迹位置数组，包含位置和时间戳
-      renderPositions: [initialPosition], // Cesium渲染直接复用的坐标数组，避免每帧 map 生成新数组
-      lastUpdateTime: map.clock.currentTime, // 最后更新时间
-      isVisible: true, // 是否可见
-    }
-    trailData.entity = map.entities.add({
-      id: trailId,
-      name: `无人机轨迹：${pointId}`,
-      show: true,
-      polyline: {
-        positions: new Cesium.CallbackProperty(() => {
-          const trailData = mapStore.getDroneTrail(pointId, mapId)
-          return trailData ? trailData.renderPositions : []
-        }, false),
-        width: 2,
-        material: trailColor,
-        arcType: Cesium.ArcType.NONE,// 直线连接 - 点与点之间用直线段连接
-        clampToGround: false
-      }
-    })
-
-    mapStore.setDroneTrail(pointId, trailData, mapId)
-    // console.log(`创建轨迹: ${trailId}, 初始位置数: 1`)
-    return trailData;
-  }
-
-  /**
-   * 清除无人机轨迹
-   */
-  const clearDroneTrail = (droneId, mapId) => {
-    const trailId = `${droneId}_trail`
-    const trailData = mapStore.getDroneTrail(droneId, mapId)
-
-    if (trailData) {
-      const map = mapStore.getMap(mapId)
-      if (map && trailData.entity) {
-        // 先设置轨迹不可见
-        // trailData.entity.show = false
-        // 强制移除轨迹实体
-        map.entities.remove(trailData.entity)
-        trailData.entity = null
-      }
-      // 清空轨迹点
-      if (trailData.positions) {
-        trailData.positions = []
-      }
-      if (trailData.renderPositions) {
-        trailData.renderPositions = []
-      }
-      // 设置轨迹不可见
-      // trailData.isVisible = false
-      // 从store中清除
-      mapStore.clearDroneTrail(droneId, mapId)
-      console.log(`已清除轨迹: ${trailId}`)
-    }
-  }
-
-  /**
-   * 显示/隐藏无人机轨迹
-   * @param options 配置选项
-   * @param options.pointId 点ID
-   * @param options.visible 是否显示
-   */
-  const toggleDroneTrail = (options) => {
-    const { pointId, visible, mapId } = options
-    const trailId = `${pointId}_trail`
-    const trailData = mapStore.getDroneTrail(pointId, mapId)
-
-    if (trailData && trailData.entity) {
-      trailData.entity.show = visible
-      trailData.isVisible = visible
-    }
-  }
-
-  return {
-    setDroneTrail,
-    clearDroneTrail,
-    toggleDroneTrail
-  }
+/**
+ * 轨迹设置模块
+ * 
+ * 提供在Cesium地图上设置无人机轨迹的功能
+ * 
+ * @author huweili
+ * @email czxyhuweili@163.com
+ * @version 1.0.0
+ */
+import * as Cesium from 'cesium'
+import { useMapStore } from './stores/mapStore.js'
+import { DroneStatus, DroneStatusMap, MapInstanceIds } from './config/index.js'
+
+export function setPath() {
+  // 获取地图store实例
+  const mapStore = useMapStore()
+
+  /**
+   * 创建无人机轨迹
+   * @param pointId 无人机ID
+   * @param startPosition 初始位置
+   * @param status 无人机状态标识
+   * @param mapId 地图实例ID
+   * @returns 轨迹数据
+   */
+  const setDroneTrail = (options) => {
+    const { pointId, startPosition, status = DroneStatus.WHITELIST, mapId } = options
+    const map = mapStore.getMap(mapId)
+    if (!map) return
+
+    const trailId = `${pointId}_trail`
+
+    // 如果轨迹已存在，直接返回
+    if (mapStore.hasDroneTrail(pointId, mapId)) {
+      console.log(`轨迹 ${trailId} 已存在`)
+      return mapStore.getDroneTrail(pointId, mapId)
+    }
+
+    // 获取状态配置
+    const statusConfig = DroneStatusMap[status]
+    const trailColor = statusConfig ? Cesium.Color.fromCssColorString(statusConfig.trailColor) : Cesium.Color.fromCssColorString('rgba(0, 255, 145, 1)')
+
+    // 轨迹实例
+    const initialPosition = startPosition.clone()
+    let trailData = {
+      entity: null, // 轨迹实体
+      positions: [{ position: initialPosition, timestamp: map.clock.currentTime }], // 轨迹位置数组，包含位置和时间戳
+      renderPositions: [initialPosition], // Cesium渲染直接复用的坐标数组，避免每帧 map 生成新数组
+      lastUpdateTime: map.clock.currentTime, // 最后更新时间
+      isVisible: true, // 是否可见
+    }
+    trailData.entity = map.entities.add({
+      id: trailId,
+      name: `无人机轨迹：${pointId}`,
+      show: true,
+      polyline: {
+        positions: new Cesium.CallbackProperty(() => {
+          const trailData = mapStore.getDroneTrail(pointId, mapId)
+          return trailData ? trailData.renderPositions : []
+        }, false),
+        width: 2,
+        material: trailColor,
+        arcType: Cesium.ArcType.NONE,// 直线连接 - 点与点之间用直线段连接
+        clampToGround: false
+      }
+    })
+
+    mapStore.setDroneTrail(pointId, trailData, mapId)
+    // console.log(`创建轨迹: ${trailId}, 初始位置数: 1`)
+    return trailData;
+  }
+
+  /**
+   * 清除无人机轨迹
+   */
+  const clearDroneTrail = (droneId, mapId) => {
+    const trailId = `${droneId}_trail`
+    const trailData = mapStore.getDroneTrail(droneId, mapId)
+
+    if (trailData) {
+      const map = mapStore.getMap(mapId)
+      if (map && trailData.entity) {
+        // 先设置轨迹不可见
+        // trailData.entity.show = false
+        // 强制移除轨迹实体
+        map.entities.remove(trailData.entity)
+        trailData.entity = null
+      }
+      // 清空轨迹点
+      if (trailData.positions) {
+        trailData.positions = []
+      }
+      if (trailData.renderPositions) {
+        trailData.renderPositions = []
+      }
+      // 设置轨迹不可见
+      // trailData.isVisible = false
+      // 从store中清除
+      mapStore.clearDroneTrail(droneId, mapId)
+      console.log(`已清除轨迹: ${trailId}`)
+    }
+  }
+
+  /**
+   * 显示/隐藏无人机轨迹
+   * @param options 配置选项
+   * @param options.pointId 点ID
+   * @param options.visible 是否显示
+   */
+  const toggleDroneTrail = (options) => {
+    const { pointId, visible, mapId } = options
+    const trailId = `${pointId}_trail`
+    const trailData = mapStore.getDroneTrail(pointId, mapId)
+
+    if (trailData && trailData.entity) {
+      trailData.entity.show = visible
+      trailData.isVisible = visible
+    }
+  }
+
+  return {
+    setDroneTrail,
+    clearDroneTrail,
+    toggleDroneTrail
+  }
 }

package/js/toolbar/fullscreenController.js

@@ -1,94 +1,94 @@
-/**
- * 地图全屏控制器
- * 提供地图全屏切换功能
- * 
- * @author huweili
- * @email czxyhuweili@163.com
- * @version 1.0.0
- */
-
-/**
- * 触发 Cesium 视图重新调整大小和渲染
- * 用于全屏切换后确保地图正确渲染
- * @param {import('cesium').Viewer} viewer - Cesium Viewer 实例
- */
-const resizeViewer = (viewer) => {
-  requestAnimationFrame(() => {
-    if (viewer && !viewer.isDestroyed()) {
-      viewer.resize()
-      viewer.scene.requestRender()
-    }
-  })
-}
-
-/**
- * 设置全屏按钮的图标
- * 根据全屏状态切换显示全屏图标或退出全屏图标
- * @param {HTMLButtonElement} button - 全屏按钮元素
- * @param {boolean} isFullscreen - 当前是否为全屏状态
- */
-const setFullscreenButtonIcon = (button, isFullscreen) => {
-  const img = button.querySelector('img')
-  if (!img) return
-
-  img.src = `${import.meta.env.BASE_URL}/images/new/${isFullscreen ? 'nofullScreen' : 'fullScreen'}.svg`
-}
-
-/**
- * 切换地图全屏模式
- * 通过添加/移除 CSS 类实现地图容器全屏，而非浏览器全屏
- * @param {import('cesium').Viewer} viewer - Cesium Viewer 实例
- * @param {HTMLButtonElement} button - 触发全屏的按钮元素，用于更新按钮文字和标题
- */
-const toggleMapFullscreen = (viewer, button) => {
-  const container = viewer.container
-  const isFullscreen = container.classList.toggle('cesium-map-custom-fullscreen')
-
-  button.title = isFullscreen ? '退出地图全屏' : '地图全屏'
-  setFullscreenButtonIcon(button, isFullscreen)
-  resizeViewer(viewer)
-}
-
-/**
- * 动态注入全屏样式到页面头部
- * 确保全屏时地图容器占满整个视口
- */
-const addMapFullscreenStyle = () => {
-  const styleId = 'cesium-map-custom-fullscreen-style'
-  if (document.getElementById(styleId)) return
-
-  const style = document.createElement('style')
-  style.id = styleId
-  style.textContent = `
-    .cesium-map-custom-fullscreen {
-      position: fixed !important;
-      inset: 0 !important;
-      width: 100vw !important;
-      height: 100vh !important;
-      z-index: 2147483647 !important;
-      background: #000 !important;
-    }
-
-    .cesium-map-custom-fullscreen .cesium-viewer,
-    .cesium-map-custom-fullscreen .cesium-viewer-cesiumWidgetContainer,
-    .cesium-map-custom-fullscreen .cesium-widget,
-    .cesium-map-custom-fullscreen .cesium-widget canvas {
-      width: 100% !important;
-      height: 100% !important;
-    }
-  `
-  document.head.appendChild(style)
-}
-
-/**
- * 创建全屏控制器
- * @returns {Object} 包含全屏操作方法的对象
- */
-export const createFullscreenController = () => {
-  // 初始化时注入样式
-  addMapFullscreenStyle()
-
-  return {
-    toggleMapFullscreen
-  }
-}
+/**
+ * 地图全屏控制器
+ * 提供地图全屏切换功能
+ * 
+ * @author huweili
+ * @email czxyhuweili@163.com
+ * @version 1.0.0
+ */
+
+/**
+ * 触发 Cesium 视图重新调整大小和渲染
+ * 用于全屏切换后确保地图正确渲染
+ * @param {import('cesium').Viewer} viewer - Cesium Viewer 实例
+ */
+const resizeViewer = (viewer) => {
+  requestAnimationFrame(() => {
+    if (viewer && !viewer.isDestroyed()) {
+      viewer.resize()
+      viewer.scene.requestRender()
+    }
+  })
+}
+
+/**
+ * 设置全屏按钮的图标
+ * 根据全屏状态切换显示全屏图标或退出全屏图标
+ * @param {HTMLButtonElement} button - 全屏按钮元素
+ * @param {boolean} isFullscreen - 当前是否为全屏状态
+ */
+const setFullscreenButtonIcon = (button, isFullscreen) => {
+  const img = button.querySelector('img')
+  if (!img) return
+
+  img.src = `${import.meta.env.BASE_URL}/images/new/${isFullscreen ? 'nofullScreen' : 'fullScreen'}.svg`
+}
+
+/**
+ * 切换地图全屏模式
+ * 通过添加/移除 CSS 类实现地图容器全屏，而非浏览器全屏
+ * @param {import('cesium').Viewer} viewer - Cesium Viewer 实例
+ * @param {HTMLButtonElement} button - 触发全屏的按钮元素，用于更新按钮文字和标题
+ */
+const toggleMapFullscreen = (viewer, button) => {
+  const container = viewer.container
+  const isFullscreen = container.classList.toggle('cesium-map-custom-fullscreen')
+
+  button.title = isFullscreen ? '退出地图全屏' : '地图全屏'
+  setFullscreenButtonIcon(button, isFullscreen)
+  resizeViewer(viewer)
+}
+
+/**
+ * 动态注入全屏样式到页面头部
+ * 确保全屏时地图容器占满整个视口
+ */
+const addMapFullscreenStyle = () => {
+  const styleId = 'cesium-map-custom-fullscreen-style'
+  if (document.getElementById(styleId)) return
+
+  const style = document.createElement('style')
+  style.id = styleId
+  style.textContent = `
+    .cesium-map-custom-fullscreen {
+      position: fixed !important;
+      inset: 0 !important;
+      width: 100vw !important;
+      height: 100vh !important;
+      z-index: 2147483647 !important;
+      background: #000 !important;
+    }
+
+    .cesium-map-custom-fullscreen .cesium-viewer,
+    .cesium-map-custom-fullscreen .cesium-viewer-cesiumWidgetContainer,
+    .cesium-map-custom-fullscreen .cesium-widget,
+    .cesium-map-custom-fullscreen .cesium-widget canvas {
+      width: 100% !important;
+      height: 100% !important;
+    }
+  `
+  document.head.appendChild(style)
+}
+
+/**
+ * 创建全屏控制器
+ * @returns {Object} 包含全屏操作方法的对象
+ */
+export const createFullscreenController = () => {
+  // 初始化时注入样式
+  addMapFullscreenStyle()
+
+  return {
+    toggleMapFullscreen
+  }
+}

package/package.json

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