huweili-cesium 1.2.78 → 1.2.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +297 -297
- package/js/setPath.js +125 -125
- package/js/toolbar/basemapSwitcher.js +1 -1
- package/js/toolbar/fullscreenController.js +94 -94
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -1,297 +1,297 @@
|
|
|
1
|
-
# huweili-cesium
|
|
2
|
-
|
|
3
|
-
基于 Cesium 的地图工具库。所有 **JS 模块** 位于包内 `js/` 目录(含 `toolbar`、`stores`、`utils`、`config`、`api` 子目录);根目录保留 `index.js`(npm 主入口)与 `index.vue`(地图组件)。
|
|
4
|
-
|
|
5
|
-
## 安装
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install huweili-cesium
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
### 对等依赖(需在项目中已安装)
|
|
12
|
-
|
|
13
|
-
- `cesium` 1.136.0
|
|
14
|
-
- `vue` ^3.3
|
|
15
|
-
- `pinia` ^2 或 ^3
|
|
16
|
-
- `mitt` 3
|
|
17
|
-
- `qrcode` 1.5
|
|
18
|
-
|
|
19
|
-
## 使用前准备
|
|
20
|
-
|
|
21
|
-
1. 在 HTML 中加载与宿主项目一致的 `constants.js`(定义 `window.DroneStatus`、`window.MapInstanceIds` 等),或自行赋值这些全局变量。
|
|
22
|
-
2. 在 Vue 应用中 `app.use(pinia)`,地图组件初始化后调用各 `*Config()` 工厂函数。
|
|
23
|
-
|
|
24
|
-
## 引入示例
|
|
25
|
-
|
|
26
|
-
### JS 模块
|
|
27
|
-
|
|
28
|
-
```js
|
|
29
|
-
// 主入口同时支持:默认导出组件 + 命名导出 JS 模块
|
|
30
|
-
import CesiumMap, { basicConfig, setPoint, movePointConfig } from 'huweili-cesium'
|
|
31
|
-
|
|
32
|
-
// 仅 JS 模块(不含 Vue 组件)可用子路径
|
|
33
|
-
import { basicConfig } from 'huweili-cesium/js'
|
|
34
|
-
|
|
35
|
-
// 或按文件引入
|
|
36
|
-
import { basicConfig } from 'huweili-cesium/basis'
|
|
37
|
-
import { hemisphereConfig } from 'huweili-cesium/hemisphere'
|
|
38
|
-
import { createCustomToolbarButtons } from 'huweili-cesium/customToolbarButtons'
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### Vue 地图组件(开箱即用)
|
|
42
|
-
|
|
43
|
-
```vue
|
|
44
|
-
<template>
|
|
45
|
-
<div class="map-page">
|
|
46
|
-
<CesiumMap map-id="default" @onload="onMapLoad" />
|
|
47
|
-
</div>
|
|
48
|
-
</template>
|
|
49
|
-
|
|
50
|
-
<script setup>
|
|
51
|
-
// 推荐:包主入口默认导出组件
|
|
52
|
-
import CesiumMap from 'huweili-cesium'
|
|
53
|
-
// 等价写法:
|
|
54
|
-
// import CesiumMap from 'huweili-cesium/index.vue'
|
|
55
|
-
// import CesiumMap from 'huweili-cesium/CesiumMap'
|
|
56
|
-
|
|
57
|
-
function onMapLoad({ map, center }) {
|
|
58
|
-
console.log('地图已加载', map, center)
|
|
59
|
-
}
|
|
60
|
-
</script>
|
|
61
|
-
|
|
62
|
-
<style scoped>
|
|
63
|
-
.map-page {
|
|
64
|
-
width: 100%;
|
|
65
|
-
height: 100vh;
|
|
66
|
-
}
|
|
67
|
-
</style>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
**Vite 宿主项目**需在 `vite.config` 中允许编译该依赖(否则 `.vue` 可能无法处理):
|
|
71
|
-
|
|
72
|
-
```js
|
|
73
|
-
export default defineConfig({
|
|
74
|
-
optimizeDeps: {
|
|
75
|
-
include: ['huweili-cesium'],
|
|
76
|
-
},
|
|
77
|
-
})
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
组件 props:
|
|
81
|
-
|
|
82
|
-
| prop | 类型 | 默认 | 说明 |
|
|
83
|
-
|------|------|------|------|
|
|
84
|
-
| `mapId` | `string` | `'default'` | 多地图实例 ID,与 `mapStore` 对应 |
|
|
85
|
-
| `options` | `object` | — | 覆盖/合并 `MapConfig` 的配置 |
|
|
86
|
-
|
|
87
|
-
事件:`@onload`,参数 `{ map, center, mapId, toolbar }`(`map` 为 Cesium `Viewer` 实例;`toolbar` 可在加载后动态增删按钮)。
|
|
88
|
-
|
|
89
|
-
### 为何不用 Cesium 内置 2D 模式
|
|
90
|
-
|
|
91
|
-
Viewer 固定为 `SCENE3D`,业务上的「2D」是 **正交相机 + 俯视**(`basis.js` / `cameraInteraction.js`),不切换 `SCENE2D` / `COLUMBUS_VIEW`。简要优点:
|
|
92
|
-
|
|
93
|
-
- **2D/3D 切换更顺**:无场景变形(morph),透视与正交互换,缩放与锚点更易对齐(含工具栏切换、RTK 跟飞)。
|
|
94
|
-
- **渲染一致**:无人机、轨迹、围栏等与 3D 同一套规则,少踩 2D 投影下的显示差异。
|
|
95
|
-
- **交互可控**:2D 可锁定俯视、自定义滚轮缩放(正交宽度),避免与内置 2D 控制器行为不一致。
|
|
96
|
-
- **语义清晰**:`mapStore` 的 `2D`/`3D` 表示业务视角,不与 Cesium `SceneMode` 枚举混用。
|
|
97
|
-
|
|
98
|
-
配置里 `scene.sceneMode: '2D'` 表示初始化俯视正交,而非启用 Cesium 平面地图模式。
|
|
99
|
-
|
|
100
|
-
### 各项目自定义工具栏
|
|
101
|
-
|
|
102
|
-
**方式 1:组件 props(推荐)**
|
|
103
|
-
|
|
104
|
-
```vue
|
|
105
|
-
<CesiumMap
|
|
106
|
-
map-id="default"
|
|
107
|
-
:show-default-toolbar="true"
|
|
108
|
-
:extra-toolbar-buttons="myExtraButtons"
|
|
109
|
-
/>
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
```js
|
|
113
|
-
import { useEventBus } from 'huweili-cesium/utils/useEventBus'
|
|
114
|
-
|
|
115
|
-
const { emit } = useEventBus()
|
|
116
|
-
|
|
117
|
-
const myExtraButtons = [
|
|
118
|
-
{
|
|
119
|
-
title: '导出',
|
|
120
|
-
text: '导',
|
|
121
|
-
onClick: () => emit('exportMap', {}),
|
|
122
|
-
},
|
|
123
|
-
]
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
完全不用内置默认按钮、自己定义一整组:
|
|
127
|
-
|
|
128
|
-
```vue
|
|
129
|
-
<CesiumMap :toolbar-buttons="myToolbarButtons" />
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
内置默认按钮里的图标路径使用宿主项目的 `import.meta.env.BASE_URL`(如 `/images/new/tj.svg`),请在宿主 `public/images/new/` 放置对应资源;业务按钮(如「机型统计」)通过 `useEventBus` 发事件,宿主需自行 `on('toggleBarChartControl', ...)` 监听。
|
|
133
|
-
|
|
134
|
-
## 可选业务钩子
|
|
135
|
-
|
|
136
|
-
若需光电引导、轨迹列表等业务能力,在应用启动时注入:
|
|
137
|
-
|
|
138
|
-
```js
|
|
139
|
-
import { setDroneMapProvider, setOptGuideHandler } from 'huweili-cesium/config/hooks'
|
|
140
|
-
|
|
141
|
-
setDroneMapProvider(() => myDroneMap)
|
|
142
|
-
setOptGuideHandler((payload) => api.toOptGuide(payload))
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
## 发布到 npm(维护者)
|
|
146
|
-
|
|
147
|
-
```bash
|
|
148
|
-
cd huweili-cesium
|
|
149
|
-
npm login
|
|
150
|
-
npm publish
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
首次发布前可在本地打包预览:
|
|
154
|
-
|
|
155
|
-
```bash
|
|
156
|
-
npm pack
|
|
157
|
-
# 会生成 huweili-cesium-1.0.0.tgz,解压检查是否包含全部 js
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
## 从 tzr 源目录同步更新
|
|
161
|
-
|
|
162
|
-
```bash
|
|
163
|
-
cd huweili-cesium
|
|
164
|
-
npm run sync
|
|
165
|
-
# 同步后需重新修复 @/ 别名为包内相对路径(见 scripts)
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
## 地图与自定义工具栏
|
|
169
|
-
|
|
170
|
-
地图组件来自 npm 包 **`huweili-cesium`**,工具栏按钮在业务侧配置,不写在 `mapConfig.js` 里。
|
|
171
|
-
|
|
172
|
-
### 1. 前置配置(`constants.js` / `mapConfig.js`)
|
|
173
|
-
|
|
174
|
-
`index.html` 中已按顺序引入:
|
|
175
|
-
|
|
176
|
-
```html
|
|
177
|
-
<script src="/config/constants.js"></script>
|
|
178
|
-
<script src="/config/mapConfig.js"></script>
|
|
179
|
-
```
|
|
180
|
-
|
|
181
|
-
| 文件 | 作用 | 与地图组件的关系 |
|
|
182
|
-
|------|------|------------------|
|
|
183
|
-
| `public/config/constants.js` | `window.MapInstanceIds` 定义多地图 ID(如 `HOME: 'home-main-map'`) | `:map-id` 须与之一致,工具栏回调里的 `mapId` 也要传同一个值 |
|
|
184
|
-
| `public/config/mapConfig.js` | `window.MapConfig`(中心点、2D/3D、底图列表、是否显示 Cesium 自带控件等) | 控制地图初始化;`control.homeButton: false` 时由自定义工具栏替代 |
|
|
185
|
-
|
|
186
|
-
在页面中引用常量(从 `runtimeConfig` 导入):
|
|
187
|
-
|
|
188
|
-
```js
|
|
189
|
-
import { MapInstanceIds } from '@/config/runtimeConfig'
|
|
190
|
-
|
|
191
|
-
const HOME_MAP_ID = MapInstanceIds?.HOME || 'home-main-map'
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
### 2. 页面引用 `CesiumMap`(首页示例)
|
|
195
|
-
|
|
196
|
-
`src/views/home/indexnew.vue`:
|
|
197
|
-
|
|
198
|
-
```vue
|
|
199
|
-
<template>
|
|
200
|
-
<CesiumMap
|
|
201
|
-
:map-id="HOME_MAP_ID"
|
|
202
|
-
:toolbar-buttons="getHomeToolbarButtons({ mapId: HOME_MAP_ID })"
|
|
203
|
-
@onload="mapOnLoad"
|
|
204
|
-
/>
|
|
205
|
-
</template>
|
|
206
|
-
|
|
207
|
-
<script setup>
|
|
208
|
-
import CesiumMap from 'huweili-cesium'
|
|
209
|
-
import { MapInstanceIds } from '@/config/runtimeConfig'
|
|
210
|
-
import { getHomeToolbarButtons } from '@/utils/homeToolbarButtons'
|
|
211
|
-
|
|
212
|
-
const HOME_MAP_ID = MapInstanceIds?.HOME || 'home-main-map'
|
|
213
|
-
</script>
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
- **`toolbar-buttons`**:传入整组按钮(首页不用包内默认按钮,因此不必再写 `show-default-toolbar`)
|
|
217
|
-
- **`map-id`**:与 `constants.js` 里 `MapInstanceIds.HOME` 保持一致
|
|
218
|
-
|
|
219
|
-
### 3. 工具栏按钮配置(`src/utils/homeToolbarButtons.js`)
|
|
220
|
-
|
|
221
|
-
通用按钮(指北针、机型统计、回中心、2D/3D、缩放、底图、全屏)集中在此文件维护。
|
|
222
|
-
|
|
223
|
-
页面只需追加自己的按钮时,使用 `extra`:
|
|
224
|
-
|
|
225
|
-
```js
|
|
226
|
-
import { useEventBus } from 'huweili-cesium/utils/useEventBus'
|
|
227
|
-
import { getHomeToolbarButtons } from '@/utils/homeToolbarButtons'
|
|
228
|
-
|
|
229
|
-
const { emit } = useEventBus()
|
|
230
|
-
|
|
231
|
-
getHomeToolbarButtons({
|
|
232
|
-
mapId: HOME_MAP_ID,
|
|
233
|
-
extra: [
|
|
234
|
-
{
|
|
235
|
-
title: '导出',
|
|
236
|
-
text: '导',
|
|
237
|
-
onClick: () => emit('exportMap', {}),
|
|
238
|
-
},
|
|
239
|
-
],
|
|
240
|
-
})
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
按钮项字段说明:
|
|
244
|
-
|
|
245
|
-
| 字段 | 说明 |
|
|
246
|
-
|------|------|
|
|
247
|
-
| `title` | 悬停提示 |
|
|
248
|
-
| `text` / `iconSrc` | 文字或图标(二选一,图标放 `public/images/new/`) |
|
|
249
|
-
| `isCompass: true` | 指北针专用 |
|
|
250
|
-
| `onClick(viewer, button)` | 点击回调 |
|
|
251
|
-
|
|
252
|
-
「机型统计」等通过 `useEventBus` 发事件,页面需 `on('toggleBarChartControl', ...)` 监听。
|
|
253
|
-
|
|
254
|
-
### 4. 其他页面
|
|
255
|
-
|
|
256
|
-
- 复用首页整套按钮:`getHomeToolbarButtons({ mapId: '你的 mapId' })`
|
|
257
|
-
- 完全自定义:直接传数组给 `:toolbar-buttons="[...]"`
|
|
258
|
-
- 地图加载后动态增删:在 `@onload` 回调里使用返回的 `toolbar.addToolbarButton(...)`
|
|
259
|
-
|
|
260
|
-
图标资源路径使用 `import.meta.env.BASE_URL`(如 `/jlap/images/new/xxx.svg`),请放在 `public/images/new/`。
|
|
261
|
-
|
|
262
|
-
## 目录结构
|
|
263
|
-
|
|
264
|
-
```
|
|
265
|
-
huweili-cesium/
|
|
266
|
-
├── index.js # npm 主入口(默认导出 CesiumMap + 转发 js 模块)
|
|
267
|
-
├── index.vue # 地图 Vue 组件
|
|
268
|
-
├── components/ # 组件(如 wsIndicator)
|
|
269
|
-
├── js/ # 全部 JS 模块
|
|
270
|
-
│ ├── basis.js
|
|
271
|
-
│ ├── toolbar/
|
|
272
|
-
│ ├── stores/
|
|
273
|
-
│ ├── utils/
|
|
274
|
-
│ ├── config/
|
|
275
|
-
│ └── api/
|
|
276
|
-
└── package.json
|
|
277
|
-
```
|
|
278
|
-
|
|
279
|
-
## 包含的文件清单(均在 `js/` 下)
|
|
280
|
-
|
|
281
|
-
| 文件 | 说明 |
|
|
282
|
-
|------|------|
|
|
283
|
-
| js/basis.js | 地图基础操作 |
|
|
284
|
-
| js/setPoint.js / js/movePoint.js | 点位与移动 |
|
|
285
|
-
| js/setPath.js / js/movePath.js | 路径与轨迹 |
|
|
286
|
-
| js/groundLink.js | 地面连接线 |
|
|
287
|
-
| js/hemisphere.js | 半球区域 |
|
|
288
|
-
| js/geometry.js | 几何图形 |
|
|
289
|
-
| js/drawFence.js / js/drawFenceNew.js | 电子围栏 |
|
|
290
|
-
| js/cardPool.js / js/labelDiv.js | 信息牌 |
|
|
291
|
-
| js/clickHandler.js | 点击交互 |
|
|
292
|
-
| js/tileProviders.js | 底图瓦片 |
|
|
293
|
-
| js/customToolbarButtons.js | 工具栏 |
|
|
294
|
-
| js/toolbar/* | 指南针、底图切换、缩放、全屏 |
|
|
295
|
-
| js/droneRipple.js / js/qrCodeGenerator.js | 涟漪、二维码 |
|
|
296
|
-
|
|
297
|
-
另含 `js/stores/mapStore.js`、`js/utils/*`、`js/config/*`、`js/api/*` 等运行依赖。
|
|
1
|
+
# huweili-cesium
|
|
2
|
+
|
|
3
|
+
基于 Cesium 的地图工具库。所有 **JS 模块** 位于包内 `js/` 目录(含 `toolbar`、`stores`、`utils`、`config`、`api` 子目录);根目录保留 `index.js`(npm 主入口)与 `index.vue`(地图组件)。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install huweili-cesium
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
### 对等依赖(需在项目中已安装)
|
|
12
|
+
|
|
13
|
+
- `cesium` 1.136.0
|
|
14
|
+
- `vue` ^3.3
|
|
15
|
+
- `pinia` ^2 或 ^3
|
|
16
|
+
- `mitt` 3
|
|
17
|
+
- `qrcode` 1.5
|
|
18
|
+
|
|
19
|
+
## 使用前准备
|
|
20
|
+
|
|
21
|
+
1. 在 HTML 中加载与宿主项目一致的 `constants.js`(定义 `window.DroneStatus`、`window.MapInstanceIds` 等),或自行赋值这些全局变量。
|
|
22
|
+
2. 在 Vue 应用中 `app.use(pinia)`,地图组件初始化后调用各 `*Config()` 工厂函数。
|
|
23
|
+
|
|
24
|
+
## 引入示例
|
|
25
|
+
|
|
26
|
+
### JS 模块
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
// 主入口同时支持:默认导出组件 + 命名导出 JS 模块
|
|
30
|
+
import CesiumMap, { basicConfig, setPoint, movePointConfig } from 'huweili-cesium'
|
|
31
|
+
|
|
32
|
+
// 仅 JS 模块(不含 Vue 组件)可用子路径
|
|
33
|
+
import { basicConfig } from 'huweili-cesium/js'
|
|
34
|
+
|
|
35
|
+
// 或按文件引入
|
|
36
|
+
import { basicConfig } from 'huweili-cesium/basis'
|
|
37
|
+
import { hemisphereConfig } from 'huweili-cesium/hemisphere'
|
|
38
|
+
import { createCustomToolbarButtons } from 'huweili-cesium/customToolbarButtons'
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Vue 地图组件(开箱即用)
|
|
42
|
+
|
|
43
|
+
```vue
|
|
44
|
+
<template>
|
|
45
|
+
<div class="map-page">
|
|
46
|
+
<CesiumMap map-id="default" @onload="onMapLoad" />
|
|
47
|
+
</div>
|
|
48
|
+
</template>
|
|
49
|
+
|
|
50
|
+
<script setup>
|
|
51
|
+
// 推荐:包主入口默认导出组件
|
|
52
|
+
import CesiumMap from 'huweili-cesium'
|
|
53
|
+
// 等价写法:
|
|
54
|
+
// import CesiumMap from 'huweili-cesium/index.vue'
|
|
55
|
+
// import CesiumMap from 'huweili-cesium/CesiumMap'
|
|
56
|
+
|
|
57
|
+
function onMapLoad({ map, center }) {
|
|
58
|
+
console.log('地图已加载', map, center)
|
|
59
|
+
}
|
|
60
|
+
</script>
|
|
61
|
+
|
|
62
|
+
<style scoped>
|
|
63
|
+
.map-page {
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100vh;
|
|
66
|
+
}
|
|
67
|
+
</style>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
**Vite 宿主项目**需在 `vite.config` 中允许编译该依赖(否则 `.vue` 可能无法处理):
|
|
71
|
+
|
|
72
|
+
```js
|
|
73
|
+
export default defineConfig({
|
|
74
|
+
optimizeDeps: {
|
|
75
|
+
include: ['huweili-cesium'],
|
|
76
|
+
},
|
|
77
|
+
})
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
组件 props:
|
|
81
|
+
|
|
82
|
+
| prop | 类型 | 默认 | 说明 |
|
|
83
|
+
|------|------|------|------|
|
|
84
|
+
| `mapId` | `string` | `'default'` | 多地图实例 ID,与 `mapStore` 对应 |
|
|
85
|
+
| `options` | `object` | — | 覆盖/合并 `MapConfig` 的配置 |
|
|
86
|
+
|
|
87
|
+
事件:`@onload`,参数 `{ map, center, mapId, toolbar }`(`map` 为 Cesium `Viewer` 实例;`toolbar` 可在加载后动态增删按钮)。
|
|
88
|
+
|
|
89
|
+
### 为何不用 Cesium 内置 2D 模式
|
|
90
|
+
|
|
91
|
+
Viewer 固定为 `SCENE3D`,业务上的「2D」是 **正交相机 + 俯视**(`basis.js` / `cameraInteraction.js`),不切换 `SCENE2D` / `COLUMBUS_VIEW`。简要优点:
|
|
92
|
+
|
|
93
|
+
- **2D/3D 切换更顺**:无场景变形(morph),透视与正交互换,缩放与锚点更易对齐(含工具栏切换、RTK 跟飞)。
|
|
94
|
+
- **渲染一致**:无人机、轨迹、围栏等与 3D 同一套规则,少踩 2D 投影下的显示差异。
|
|
95
|
+
- **交互可控**:2D 可锁定俯视、自定义滚轮缩放(正交宽度),避免与内置 2D 控制器行为不一致。
|
|
96
|
+
- **语义清晰**:`mapStore` 的 `2D`/`3D` 表示业务视角,不与 Cesium `SceneMode` 枚举混用。
|
|
97
|
+
|
|
98
|
+
配置里 `scene.sceneMode: '2D'` 表示初始化俯视正交,而非启用 Cesium 平面地图模式。
|
|
99
|
+
|
|
100
|
+
### 各项目自定义工具栏
|
|
101
|
+
|
|
102
|
+
**方式 1:组件 props(推荐)**
|
|
103
|
+
|
|
104
|
+
```vue
|
|
105
|
+
<CesiumMap
|
|
106
|
+
map-id="default"
|
|
107
|
+
:show-default-toolbar="true"
|
|
108
|
+
:extra-toolbar-buttons="myExtraButtons"
|
|
109
|
+
/>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
```js
|
|
113
|
+
import { useEventBus } from 'huweili-cesium/utils/useEventBus'
|
|
114
|
+
|
|
115
|
+
const { emit } = useEventBus()
|
|
116
|
+
|
|
117
|
+
const myExtraButtons = [
|
|
118
|
+
{
|
|
119
|
+
title: '导出',
|
|
120
|
+
text: '导',
|
|
121
|
+
onClick: () => emit('exportMap', {}),
|
|
122
|
+
},
|
|
123
|
+
]
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
完全不用内置默认按钮、自己定义一整组:
|
|
127
|
+
|
|
128
|
+
```vue
|
|
129
|
+
<CesiumMap :toolbar-buttons="myToolbarButtons" />
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
内置默认按钮里的图标路径使用宿主项目的 `import.meta.env.BASE_URL`(如 `/images/new/tj.svg`),请在宿主 `public/images/new/` 放置对应资源;业务按钮(如「机型统计」)通过 `useEventBus` 发事件,宿主需自行 `on('toggleBarChartControl', ...)` 监听。
|
|
133
|
+
|
|
134
|
+
## 可选业务钩子
|
|
135
|
+
|
|
136
|
+
若需光电引导、轨迹列表等业务能力,在应用启动时注入:
|
|
137
|
+
|
|
138
|
+
```js
|
|
139
|
+
import { setDroneMapProvider, setOptGuideHandler } from 'huweili-cesium/config/hooks'
|
|
140
|
+
|
|
141
|
+
setDroneMapProvider(() => myDroneMap)
|
|
142
|
+
setOptGuideHandler((payload) => api.toOptGuide(payload))
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## 发布到 npm(维护者)
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
cd huweili-cesium
|
|
149
|
+
npm login
|
|
150
|
+
npm publish
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
首次发布前可在本地打包预览:
|
|
154
|
+
|
|
155
|
+
```bash
|
|
156
|
+
npm pack
|
|
157
|
+
# 会生成 huweili-cesium-1.0.0.tgz,解压检查是否包含全部 js
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## 从 tzr 源目录同步更新
|
|
161
|
+
|
|
162
|
+
```bash
|
|
163
|
+
cd huweili-cesium
|
|
164
|
+
npm run sync
|
|
165
|
+
# 同步后需重新修复 @/ 别名为包内相对路径(见 scripts)
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## 地图与自定义工具栏
|
|
169
|
+
|
|
170
|
+
地图组件来自 npm 包 **`huweili-cesium`**,工具栏按钮在业务侧配置,不写在 `mapConfig.js` 里。
|
|
171
|
+
|
|
172
|
+
### 1. 前置配置(`constants.js` / `mapConfig.js`)
|
|
173
|
+
|
|
174
|
+
`index.html` 中已按顺序引入:
|
|
175
|
+
|
|
176
|
+
```html
|
|
177
|
+
<script src="/config/constants.js"></script>
|
|
178
|
+
<script src="/config/mapConfig.js"></script>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
| 文件 | 作用 | 与地图组件的关系 |
|
|
182
|
+
|------|------|------------------|
|
|
183
|
+
| `public/config/constants.js` | `window.MapInstanceIds` 定义多地图 ID(如 `HOME: 'home-main-map'`) | `:map-id` 须与之一致,工具栏回调里的 `mapId` 也要传同一个值 |
|
|
184
|
+
| `public/config/mapConfig.js` | `window.MapConfig`(中心点、2D/3D、底图列表、是否显示 Cesium 自带控件等) | 控制地图初始化;`control.homeButton: false` 时由自定义工具栏替代 |
|
|
185
|
+
|
|
186
|
+
在页面中引用常量(从 `runtimeConfig` 导入):
|
|
187
|
+
|
|
188
|
+
```js
|
|
189
|
+
import { MapInstanceIds } from '@/config/runtimeConfig'
|
|
190
|
+
|
|
191
|
+
const HOME_MAP_ID = MapInstanceIds?.HOME || 'home-main-map'
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
### 2. 页面引用 `CesiumMap`(首页示例)
|
|
195
|
+
|
|
196
|
+
`src/views/home/indexnew.vue`:
|
|
197
|
+
|
|
198
|
+
```vue
|
|
199
|
+
<template>
|
|
200
|
+
<CesiumMap
|
|
201
|
+
:map-id="HOME_MAP_ID"
|
|
202
|
+
:toolbar-buttons="getHomeToolbarButtons({ mapId: HOME_MAP_ID })"
|
|
203
|
+
@onload="mapOnLoad"
|
|
204
|
+
/>
|
|
205
|
+
</template>
|
|
206
|
+
|
|
207
|
+
<script setup>
|
|
208
|
+
import CesiumMap from 'huweili-cesium'
|
|
209
|
+
import { MapInstanceIds } from '@/config/runtimeConfig'
|
|
210
|
+
import { getHomeToolbarButtons } from '@/utils/homeToolbarButtons'
|
|
211
|
+
|
|
212
|
+
const HOME_MAP_ID = MapInstanceIds?.HOME || 'home-main-map'
|
|
213
|
+
</script>
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
- **`toolbar-buttons`**:传入整组按钮(首页不用包内默认按钮,因此不必再写 `show-default-toolbar`)
|
|
217
|
+
- **`map-id`**:与 `constants.js` 里 `MapInstanceIds.HOME` 保持一致
|
|
218
|
+
|
|
219
|
+
### 3. 工具栏按钮配置(`src/utils/homeToolbarButtons.js`)
|
|
220
|
+
|
|
221
|
+
通用按钮(指北针、机型统计、回中心、2D/3D、缩放、底图、全屏)集中在此文件维护。
|
|
222
|
+
|
|
223
|
+
页面只需追加自己的按钮时,使用 `extra`:
|
|
224
|
+
|
|
225
|
+
```js
|
|
226
|
+
import { useEventBus } from 'huweili-cesium/utils/useEventBus'
|
|
227
|
+
import { getHomeToolbarButtons } from '@/utils/homeToolbarButtons'
|
|
228
|
+
|
|
229
|
+
const { emit } = useEventBus()
|
|
230
|
+
|
|
231
|
+
getHomeToolbarButtons({
|
|
232
|
+
mapId: HOME_MAP_ID,
|
|
233
|
+
extra: [
|
|
234
|
+
{
|
|
235
|
+
title: '导出',
|
|
236
|
+
text: '导',
|
|
237
|
+
onClick: () => emit('exportMap', {}),
|
|
238
|
+
},
|
|
239
|
+
],
|
|
240
|
+
})
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
按钮项字段说明:
|
|
244
|
+
|
|
245
|
+
| 字段 | 说明 |
|
|
246
|
+
|------|------|
|
|
247
|
+
| `title` | 悬停提示 |
|
|
248
|
+
| `text` / `iconSrc` | 文字或图标(二选一,图标放 `public/images/new/`) |
|
|
249
|
+
| `isCompass: true` | 指北针专用 |
|
|
250
|
+
| `onClick(viewer, button)` | 点击回调 |
|
|
251
|
+
|
|
252
|
+
「机型统计」等通过 `useEventBus` 发事件,页面需 `on('toggleBarChartControl', ...)` 监听。
|
|
253
|
+
|
|
254
|
+
### 4. 其他页面
|
|
255
|
+
|
|
256
|
+
- 复用首页整套按钮:`getHomeToolbarButtons({ mapId: '你的 mapId' })`
|
|
257
|
+
- 完全自定义:直接传数组给 `:toolbar-buttons="[...]"`
|
|
258
|
+
- 地图加载后动态增删:在 `@onload` 回调里使用返回的 `toolbar.addToolbarButton(...)`
|
|
259
|
+
|
|
260
|
+
图标资源路径使用 `import.meta.env.BASE_URL`(如 `/jlap/images/new/xxx.svg`),请放在 `public/images/new/`。
|
|
261
|
+
|
|
262
|
+
## 目录结构
|
|
263
|
+
|
|
264
|
+
```
|
|
265
|
+
huweili-cesium/
|
|
266
|
+
├── index.js # npm 主入口(默认导出 CesiumMap + 转发 js 模块)
|
|
267
|
+
├── index.vue # 地图 Vue 组件
|
|
268
|
+
├── components/ # 组件(如 wsIndicator)
|
|
269
|
+
├── js/ # 全部 JS 模块
|
|
270
|
+
│ ├── basis.js
|
|
271
|
+
│ ├── toolbar/
|
|
272
|
+
│ ├── stores/
|
|
273
|
+
│ ├── utils/
|
|
274
|
+
│ ├── config/
|
|
275
|
+
│ └── api/
|
|
276
|
+
└── package.json
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
## 包含的文件清单(均在 `js/` 下)
|
|
280
|
+
|
|
281
|
+
| 文件 | 说明 |
|
|
282
|
+
|------|------|
|
|
283
|
+
| js/basis.js | 地图基础操作 |
|
|
284
|
+
| js/setPoint.js / js/movePoint.js | 点位与移动 |
|
|
285
|
+
| js/setPath.js / js/movePath.js | 路径与轨迹 |
|
|
286
|
+
| js/groundLink.js | 地面连接线 |
|
|
287
|
+
| js/hemisphere.js | 半球区域 |
|
|
288
|
+
| js/geometry.js | 几何图形 |
|
|
289
|
+
| js/drawFence.js / js/drawFenceNew.js | 电子围栏 |
|
|
290
|
+
| js/cardPool.js / js/labelDiv.js | 信息牌 |
|
|
291
|
+
| js/clickHandler.js | 点击交互 |
|
|
292
|
+
| js/tileProviders.js | 底图瓦片 |
|
|
293
|
+
| js/customToolbarButtons.js | 工具栏 |
|
|
294
|
+
| js/toolbar/* | 指南针、底图切换、缩放、全屏 |
|
|
295
|
+
| js/droneRipple.js / js/qrCodeGenerator.js | 涟漪、二维码 |
|
|
296
|
+
|
|
297
|
+
另含 `js/stores/mapStore.js`、`js/utils/*`、`js/config/*`、`js/api/*` 等运行依赖。
|
package/js/setPath.js
CHANGED
|
@@ -1,126 +1,126 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 轨迹设置模块
|
|
3
|
-
*
|
|
4
|
-
* 提供在Cesium地图上设置无人机轨迹的功能
|
|
5
|
-
*
|
|
6
|
-
* @author huweili
|
|
7
|
-
* @email czxyhuweili@163.com
|
|
8
|
-
* @version 1.0.0
|
|
9
|
-
*/
|
|
10
|
-
import * as Cesium from 'cesium'
|
|
11
|
-
import { useMapStore } from './stores/mapStore.js'
|
|
12
|
-
import { DroneStatus, DroneStatusMap, MapInstanceIds } from './config/index.js'
|
|
13
|
-
|
|
14
|
-
export function setPath() {
|
|
15
|
-
// 获取地图store实例
|
|
16
|
-
const mapStore = useMapStore()
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* 创建无人机轨迹
|
|
20
|
-
* @param pointId 无人机ID
|
|
21
|
-
* @param startPosition 初始位置
|
|
22
|
-
* @param status 无人机状态标识
|
|
23
|
-
* @param mapId 地图实例ID
|
|
24
|
-
* @returns 轨迹数据
|
|
25
|
-
*/
|
|
26
|
-
const setDroneTrail = (options) => {
|
|
27
|
-
const { pointId, startPosition, status = DroneStatus.WHITELIST, mapId } = options
|
|
28
|
-
const map = mapStore.getMap(mapId)
|
|
29
|
-
if (!map) return
|
|
30
|
-
|
|
31
|
-
const trailId = `${pointId}_trail`
|
|
32
|
-
|
|
33
|
-
// 如果轨迹已存在,直接返回
|
|
34
|
-
if (mapStore.hasDroneTrail(pointId, mapId)) {
|
|
35
|
-
console.log(`轨迹 ${trailId} 已存在`)
|
|
36
|
-
return mapStore.getDroneTrail(pointId, mapId)
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// 获取状态配置
|
|
40
|
-
const statusConfig = DroneStatusMap[status]
|
|
41
|
-
const trailColor = statusConfig ? Cesium.Color.fromCssColorString(statusConfig.trailColor) : Cesium.Color.fromCssColorString('rgba(0, 255, 145, 1)')
|
|
42
|
-
|
|
43
|
-
// 轨迹实例
|
|
44
|
-
const initialPosition = startPosition.clone()
|
|
45
|
-
let trailData = {
|
|
46
|
-
entity: null, // 轨迹实体
|
|
47
|
-
positions: [{ position: initialPosition, timestamp: map.clock.currentTime }], // 轨迹位置数组,包含位置和时间戳
|
|
48
|
-
renderPositions: [initialPosition], // Cesium渲染直接复用的坐标数组,避免每帧 map 生成新数组
|
|
49
|
-
lastUpdateTime: map.clock.currentTime, // 最后更新时间
|
|
50
|
-
isVisible: true, // 是否可见
|
|
51
|
-
}
|
|
52
|
-
trailData.entity = map.entities.add({
|
|
53
|
-
id: trailId,
|
|
54
|
-
name: `无人机轨迹:${pointId}`,
|
|
55
|
-
show: true,
|
|
56
|
-
polyline: {
|
|
57
|
-
positions: new Cesium.CallbackProperty(() => {
|
|
58
|
-
const trailData = mapStore.getDroneTrail(pointId, mapId)
|
|
59
|
-
return trailData ? trailData.renderPositions : []
|
|
60
|
-
}, false),
|
|
61
|
-
width: 2,
|
|
62
|
-
material: trailColor,
|
|
63
|
-
arcType: Cesium.ArcType.NONE,// 直线连接 - 点与点之间用直线段连接
|
|
64
|
-
clampToGround: false
|
|
65
|
-
}
|
|
66
|
-
})
|
|
67
|
-
|
|
68
|
-
mapStore.setDroneTrail(pointId, trailData, mapId)
|
|
69
|
-
// console.log(`创建轨迹: ${trailId}, 初始位置数: 1`)
|
|
70
|
-
return trailData;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* 清除无人机轨迹
|
|
75
|
-
*/
|
|
76
|
-
const clearDroneTrail = (droneId, mapId) => {
|
|
77
|
-
const trailId = `${droneId}_trail`
|
|
78
|
-
const trailData = mapStore.getDroneTrail(droneId, mapId)
|
|
79
|
-
|
|
80
|
-
if (trailData) {
|
|
81
|
-
const map = mapStore.getMap(mapId)
|
|
82
|
-
if (map && trailData.entity) {
|
|
83
|
-
// 先设置轨迹不可见
|
|
84
|
-
// trailData.entity.show = false
|
|
85
|
-
// 强制移除轨迹实体
|
|
86
|
-
map.entities.remove(trailData.entity)
|
|
87
|
-
trailData.entity = null
|
|
88
|
-
}
|
|
89
|
-
// 清空轨迹点
|
|
90
|
-
if (trailData.positions) {
|
|
91
|
-
trailData.positions = []
|
|
92
|
-
}
|
|
93
|
-
if (trailData.renderPositions) {
|
|
94
|
-
trailData.renderPositions = []
|
|
95
|
-
}
|
|
96
|
-
// 设置轨迹不可见
|
|
97
|
-
// trailData.isVisible = false
|
|
98
|
-
// 从store中清除
|
|
99
|
-
mapStore.clearDroneTrail(droneId, mapId)
|
|
100
|
-
console.log(`已清除轨迹: ${trailId}`)
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* 显示/隐藏无人机轨迹
|
|
106
|
-
* @param options 配置选项
|
|
107
|
-
* @param options.pointId 点ID
|
|
108
|
-
* @param options.visible 是否显示
|
|
109
|
-
*/
|
|
110
|
-
const toggleDroneTrail = (options) => {
|
|
111
|
-
const { pointId, visible, mapId } = options
|
|
112
|
-
const trailId = `${pointId}_trail`
|
|
113
|
-
const trailData = mapStore.getDroneTrail(pointId, mapId)
|
|
114
|
-
|
|
115
|
-
if (trailData && trailData.entity) {
|
|
116
|
-
trailData.entity.show = visible
|
|
117
|
-
trailData.isVisible = visible
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
return {
|
|
122
|
-
setDroneTrail,
|
|
123
|
-
clearDroneTrail,
|
|
124
|
-
toggleDroneTrail
|
|
125
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* 轨迹设置模块
|
|
3
|
+
*
|
|
4
|
+
* 提供在Cesium地图上设置无人机轨迹的功能
|
|
5
|
+
*
|
|
6
|
+
* @author huweili
|
|
7
|
+
* @email czxyhuweili@163.com
|
|
8
|
+
* @version 1.0.0
|
|
9
|
+
*/
|
|
10
|
+
import * as Cesium from 'cesium'
|
|
11
|
+
import { useMapStore } from './stores/mapStore.js'
|
|
12
|
+
import { DroneStatus, DroneStatusMap, MapInstanceIds } from './config/index.js'
|
|
13
|
+
|
|
14
|
+
export function setPath() {
|
|
15
|
+
// 获取地图store实例
|
|
16
|
+
const mapStore = useMapStore()
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* 创建无人机轨迹
|
|
20
|
+
* @param pointId 无人机ID
|
|
21
|
+
* @param startPosition 初始位置
|
|
22
|
+
* @param status 无人机状态标识
|
|
23
|
+
* @param mapId 地图实例ID
|
|
24
|
+
* @returns 轨迹数据
|
|
25
|
+
*/
|
|
26
|
+
const setDroneTrail = (options) => {
|
|
27
|
+
const { pointId, startPosition, status = DroneStatus.WHITELIST, mapId } = options
|
|
28
|
+
const map = mapStore.getMap(mapId)
|
|
29
|
+
if (!map) return
|
|
30
|
+
|
|
31
|
+
const trailId = `${pointId}_trail`
|
|
32
|
+
|
|
33
|
+
// 如果轨迹已存在,直接返回
|
|
34
|
+
if (mapStore.hasDroneTrail(pointId, mapId)) {
|
|
35
|
+
console.log(`轨迹 ${trailId} 已存在`)
|
|
36
|
+
return mapStore.getDroneTrail(pointId, mapId)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// 获取状态配置
|
|
40
|
+
const statusConfig = DroneStatusMap[status]
|
|
41
|
+
const trailColor = statusConfig ? Cesium.Color.fromCssColorString(statusConfig.trailColor) : Cesium.Color.fromCssColorString('rgba(0, 255, 145, 1)')
|
|
42
|
+
|
|
43
|
+
// 轨迹实例
|
|
44
|
+
const initialPosition = startPosition.clone()
|
|
45
|
+
let trailData = {
|
|
46
|
+
entity: null, // 轨迹实体
|
|
47
|
+
positions: [{ position: initialPosition, timestamp: map.clock.currentTime }], // 轨迹位置数组,包含位置和时间戳
|
|
48
|
+
renderPositions: [initialPosition], // Cesium渲染直接复用的坐标数组,避免每帧 map 生成新数组
|
|
49
|
+
lastUpdateTime: map.clock.currentTime, // 最后更新时间
|
|
50
|
+
isVisible: true, // 是否可见
|
|
51
|
+
}
|
|
52
|
+
trailData.entity = map.entities.add({
|
|
53
|
+
id: trailId,
|
|
54
|
+
name: `无人机轨迹:${pointId}`,
|
|
55
|
+
show: true,
|
|
56
|
+
polyline: {
|
|
57
|
+
positions: new Cesium.CallbackProperty(() => {
|
|
58
|
+
const trailData = mapStore.getDroneTrail(pointId, mapId)
|
|
59
|
+
return trailData ? trailData.renderPositions : []
|
|
60
|
+
}, false),
|
|
61
|
+
width: 2,
|
|
62
|
+
material: trailColor,
|
|
63
|
+
arcType: Cesium.ArcType.NONE,// 直线连接 - 点与点之间用直线段连接
|
|
64
|
+
clampToGround: false
|
|
65
|
+
}
|
|
66
|
+
})
|
|
67
|
+
|
|
68
|
+
mapStore.setDroneTrail(pointId, trailData, mapId)
|
|
69
|
+
// console.log(`创建轨迹: ${trailId}, 初始位置数: 1`)
|
|
70
|
+
return trailData;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* 清除无人机轨迹
|
|
75
|
+
*/
|
|
76
|
+
const clearDroneTrail = (droneId, mapId) => {
|
|
77
|
+
const trailId = `${droneId}_trail`
|
|
78
|
+
const trailData = mapStore.getDroneTrail(droneId, mapId)
|
|
79
|
+
|
|
80
|
+
if (trailData) {
|
|
81
|
+
const map = mapStore.getMap(mapId)
|
|
82
|
+
if (map && trailData.entity) {
|
|
83
|
+
// 先设置轨迹不可见
|
|
84
|
+
// trailData.entity.show = false
|
|
85
|
+
// 强制移除轨迹实体
|
|
86
|
+
map.entities.remove(trailData.entity)
|
|
87
|
+
trailData.entity = null
|
|
88
|
+
}
|
|
89
|
+
// 清空轨迹点
|
|
90
|
+
if (trailData.positions) {
|
|
91
|
+
trailData.positions = []
|
|
92
|
+
}
|
|
93
|
+
if (trailData.renderPositions) {
|
|
94
|
+
trailData.renderPositions = []
|
|
95
|
+
}
|
|
96
|
+
// 设置轨迹不可见
|
|
97
|
+
// trailData.isVisible = false
|
|
98
|
+
// 从store中清除
|
|
99
|
+
mapStore.clearDroneTrail(droneId, mapId)
|
|
100
|
+
console.log(`已清除轨迹: ${trailId}`)
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* 显示/隐藏无人机轨迹
|
|
106
|
+
* @param options 配置选项
|
|
107
|
+
* @param options.pointId 点ID
|
|
108
|
+
* @param options.visible 是否显示
|
|
109
|
+
*/
|
|
110
|
+
const toggleDroneTrail = (options) => {
|
|
111
|
+
const { pointId, visible, mapId } = options
|
|
112
|
+
const trailId = `${pointId}_trail`
|
|
113
|
+
const trailData = mapStore.getDroneTrail(pointId, mapId)
|
|
114
|
+
|
|
115
|
+
if (trailData && trailData.entity) {
|
|
116
|
+
trailData.entity.show = visible
|
|
117
|
+
trailData.isVisible = visible
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
return {
|
|
122
|
+
setDroneTrail,
|
|
123
|
+
clearDroneTrail,
|
|
124
|
+
toggleDroneTrail
|
|
125
|
+
}
|
|
126
126
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* 底图切换器(本地调试副本,源自 huweili-cesium)
|
|
3
3
|
*/
|
|
4
|
-
import { applyImageryLayers } from '
|
|
4
|
+
import { applyImageryLayers } from '../utils/mapImagery.js'
|
|
5
5
|
|
|
6
6
|
export const BasemapIds = window.MapConfig?.basemaps?.reduce((acc, item) => {
|
|
7
7
|
const key = item.id.toUpperCase().replace(/-/g, '_')
|
|
@@ -1,94 +1,94 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 地图全屏控制器
|
|
3
|
-
* 提供地图全屏切换功能
|
|
4
|
-
*
|
|
5
|
-
* @author huweili
|
|
6
|
-
* @email czxyhuweili@163.com
|
|
7
|
-
* @version 1.0.0
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* 触发 Cesium 视图重新调整大小和渲染
|
|
12
|
-
* 用于全屏切换后确保地图正确渲染
|
|
13
|
-
* @param {import('cesium').Viewer} viewer - Cesium Viewer 实例
|
|
14
|
-
*/
|
|
15
|
-
const resizeViewer = (viewer) => {
|
|
16
|
-
requestAnimationFrame(() => {
|
|
17
|
-
if (viewer && !viewer.isDestroyed()) {
|
|
18
|
-
viewer.resize()
|
|
19
|
-
viewer.scene.requestRender()
|
|
20
|
-
}
|
|
21
|
-
})
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* 设置全屏按钮的图标
|
|
26
|
-
* 根据全屏状态切换显示全屏图标或退出全屏图标
|
|
27
|
-
* @param {HTMLButtonElement} button - 全屏按钮元素
|
|
28
|
-
* @param {boolean} isFullscreen - 当前是否为全屏状态
|
|
29
|
-
*/
|
|
30
|
-
const setFullscreenButtonIcon = (button, isFullscreen) => {
|
|
31
|
-
const img = button.querySelector('img')
|
|
32
|
-
if (!img) return
|
|
33
|
-
|
|
34
|
-
img.src = `${import.meta.env.BASE_URL}/images/new/${isFullscreen ? 'nofullScreen' : 'fullScreen'}.svg`
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* 切换地图全屏模式
|
|
39
|
-
* 通过添加/移除 CSS 类实现地图容器全屏,而非浏览器全屏
|
|
40
|
-
* @param {import('cesium').Viewer} viewer - Cesium Viewer 实例
|
|
41
|
-
* @param {HTMLButtonElement} button - 触发全屏的按钮元素,用于更新按钮文字和标题
|
|
42
|
-
*/
|
|
43
|
-
const toggleMapFullscreen = (viewer, button) => {
|
|
44
|
-
const container = viewer.container
|
|
45
|
-
const isFullscreen = container.classList.toggle('cesium-map-custom-fullscreen')
|
|
46
|
-
|
|
47
|
-
button.title = isFullscreen ? '退出地图全屏' : '地图全屏'
|
|
48
|
-
setFullscreenButtonIcon(button, isFullscreen)
|
|
49
|
-
resizeViewer(viewer)
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* 动态注入全屏样式到页面头部
|
|
54
|
-
* 确保全屏时地图容器占满整个视口
|
|
55
|
-
*/
|
|
56
|
-
const addMapFullscreenStyle = () => {
|
|
57
|
-
const styleId = 'cesium-map-custom-fullscreen-style'
|
|
58
|
-
if (document.getElementById(styleId)) return
|
|
59
|
-
|
|
60
|
-
const style = document.createElement('style')
|
|
61
|
-
style.id = styleId
|
|
62
|
-
style.textContent = `
|
|
63
|
-
.cesium-map-custom-fullscreen {
|
|
64
|
-
position: fixed !important;
|
|
65
|
-
inset: 0 !important;
|
|
66
|
-
width: 100vw !important;
|
|
67
|
-
height: 100vh !important;
|
|
68
|
-
z-index: 2147483647 !important;
|
|
69
|
-
background: #000 !important;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.cesium-map-custom-fullscreen .cesium-viewer,
|
|
73
|
-
.cesium-map-custom-fullscreen .cesium-viewer-cesiumWidgetContainer,
|
|
74
|
-
.cesium-map-custom-fullscreen .cesium-widget,
|
|
75
|
-
.cesium-map-custom-fullscreen .cesium-widget canvas {
|
|
76
|
-
width: 100% !important;
|
|
77
|
-
height: 100% !important;
|
|
78
|
-
}
|
|
79
|
-
`
|
|
80
|
-
document.head.appendChild(style)
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
* 创建全屏控制器
|
|
85
|
-
* @returns {Object} 包含全屏操作方法的对象
|
|
86
|
-
*/
|
|
87
|
-
export const createFullscreenController = () => {
|
|
88
|
-
// 初始化时注入样式
|
|
89
|
-
addMapFullscreenStyle()
|
|
90
|
-
|
|
91
|
-
return {
|
|
92
|
-
toggleMapFullscreen
|
|
93
|
-
}
|
|
94
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* 地图全屏控制器
|
|
3
|
+
* 提供地图全屏切换功能
|
|
4
|
+
*
|
|
5
|
+
* @author huweili
|
|
6
|
+
* @email czxyhuweili@163.com
|
|
7
|
+
* @version 1.0.0
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* 触发 Cesium 视图重新调整大小和渲染
|
|
12
|
+
* 用于全屏切换后确保地图正确渲染
|
|
13
|
+
* @param {import('cesium').Viewer} viewer - Cesium Viewer 实例
|
|
14
|
+
*/
|
|
15
|
+
const resizeViewer = (viewer) => {
|
|
16
|
+
requestAnimationFrame(() => {
|
|
17
|
+
if (viewer && !viewer.isDestroyed()) {
|
|
18
|
+
viewer.resize()
|
|
19
|
+
viewer.scene.requestRender()
|
|
20
|
+
}
|
|
21
|
+
})
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* 设置全屏按钮的图标
|
|
26
|
+
* 根据全屏状态切换显示全屏图标或退出全屏图标
|
|
27
|
+
* @param {HTMLButtonElement} button - 全屏按钮元素
|
|
28
|
+
* @param {boolean} isFullscreen - 当前是否为全屏状态
|
|
29
|
+
*/
|
|
30
|
+
const setFullscreenButtonIcon = (button, isFullscreen) => {
|
|
31
|
+
const img = button.querySelector('img')
|
|
32
|
+
if (!img) return
|
|
33
|
+
|
|
34
|
+
img.src = `${import.meta.env.BASE_URL}/images/new/${isFullscreen ? 'nofullScreen' : 'fullScreen'}.svg`
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* 切换地图全屏模式
|
|
39
|
+
* 通过添加/移除 CSS 类实现地图容器全屏,而非浏览器全屏
|
|
40
|
+
* @param {import('cesium').Viewer} viewer - Cesium Viewer 实例
|
|
41
|
+
* @param {HTMLButtonElement} button - 触发全屏的按钮元素,用于更新按钮文字和标题
|
|
42
|
+
*/
|
|
43
|
+
const toggleMapFullscreen = (viewer, button) => {
|
|
44
|
+
const container = viewer.container
|
|
45
|
+
const isFullscreen = container.classList.toggle('cesium-map-custom-fullscreen')
|
|
46
|
+
|
|
47
|
+
button.title = isFullscreen ? '退出地图全屏' : '地图全屏'
|
|
48
|
+
setFullscreenButtonIcon(button, isFullscreen)
|
|
49
|
+
resizeViewer(viewer)
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* 动态注入全屏样式到页面头部
|
|
54
|
+
* 确保全屏时地图容器占满整个视口
|
|
55
|
+
*/
|
|
56
|
+
const addMapFullscreenStyle = () => {
|
|
57
|
+
const styleId = 'cesium-map-custom-fullscreen-style'
|
|
58
|
+
if (document.getElementById(styleId)) return
|
|
59
|
+
|
|
60
|
+
const style = document.createElement('style')
|
|
61
|
+
style.id = styleId
|
|
62
|
+
style.textContent = `
|
|
63
|
+
.cesium-map-custom-fullscreen {
|
|
64
|
+
position: fixed !important;
|
|
65
|
+
inset: 0 !important;
|
|
66
|
+
width: 100vw !important;
|
|
67
|
+
height: 100vh !important;
|
|
68
|
+
z-index: 2147483647 !important;
|
|
69
|
+
background: #000 !important;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.cesium-map-custom-fullscreen .cesium-viewer,
|
|
73
|
+
.cesium-map-custom-fullscreen .cesium-viewer-cesiumWidgetContainer,
|
|
74
|
+
.cesium-map-custom-fullscreen .cesium-widget,
|
|
75
|
+
.cesium-map-custom-fullscreen .cesium-widget canvas {
|
|
76
|
+
width: 100% !important;
|
|
77
|
+
height: 100% !important;
|
|
78
|
+
}
|
|
79
|
+
`
|
|
80
|
+
document.head.appendChild(style)
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* 创建全屏控制器
|
|
85
|
+
* @returns {Object} 包含全屏操作方法的对象
|
|
86
|
+
*/
|
|
87
|
+
export const createFullscreenController = () => {
|
|
88
|
+
// 初始化时注入样式
|
|
89
|
+
addMapFullscreenStyle()
|
|
90
|
+
|
|
91
|
+
return {
|
|
92
|
+
toggleMapFullscreen
|
|
93
|
+
}
|
|
94
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "huweili-cesium",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.80",
|
|
4
4
|
"description": "基于 Cesium 的地图工具库(无人机态势、轨迹、围栏、工具栏等)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./index.js",
|
|
@@ -144,6 +144,9 @@
|
|
|
144
144
|
"type": "git",
|
|
145
145
|
"url": ""
|
|
146
146
|
},
|
|
147
|
+
"publishConfig": {
|
|
148
|
+
"registry": "https://registry.npmjs.org/"
|
|
149
|
+
},
|
|
147
150
|
"peerDependencies": {
|
|
148
151
|
"cesium": ">=1.100.0",
|
|
149
152
|
"mitt": "^3.0.0",
|