huweili-cesium 1.2.90 → 1.2.91

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.
Files changed (3) hide show
  1. package/js/toolbar/basemapSwitcher.js +39 -21
  2. package/js/utils/basemapSwitcher.js +39 -21
  3. package/package.json +1 -1
package/js/toolbar/basemapSwitcher.js CHANGED
@@ -54,7 +54,7 @@ export function createBasemapSwitcher() {
54
54
  if (!viewer?.container) return
55
55
 
56
56
  const PANEL_ID = 'cesium-basemap-picker-panel'
57
- /** 面板相对锚点的微调（工具栏靠右下时避免溢出视口） */
57
+ /** 水平工具栏时，面板相对锚点的微调 */
58
58
  const PANEL_POSITION_OFFSET = { top: -26, left: -2 }
59
59
  const PANEL_GAP = 8
60
60
  let panel = document.getElementById(PANEL_ID)
@@ -66,27 +66,45 @@ export function createBasemapSwitcher() {
66
66
 
67
67
  const margin = 35
68
68
  const panelRect = panel.getBoundingClientRect()
69
-
70
- // 默认：面板在触发按钮左上方展开（适配右下工具栏）
71
- let left = buttonRect.left - panelRect.width - PANEL_GAP
72
- let top = buttonRect.top - panelRect.height
73
-
74
- // 左侧放不下时，改到按钮右侧
75
- if (left < margin) {
76
- left = buttonRect.right + PANEL_GAP
77
- }
78
-
79
- if (top < margin) top = margin
80
- if (top + panelRect.height > window.innerHeight - margin) {
81
- top = window.innerHeight - panelRect.height - margin
82
- }
83
- if (left + panelRect.width > window.innerWidth - margin) {
84
- left = window.innerWidth - panelRect.width - margin
69
+ const toolbar = document.querySelector('.cesium-viewer-toolbar')
70
+ const toolbarRect = toolbar?.getBoundingClientRect()
71
+ const isHorizontalToolbar = toolbar
72
+ ? getComputedStyle(toolbar).flexDirection === 'row'
73
+ : false
74
+
75
+ let left
76
+ let top
77
+
78
+ if (isHorizontalToolbar) {
79
+ // 水平工具栏：面板在触发按钮左上方展开，并钳制在视口内
80
+ left = buttonRect.left - panelRect.width - PANEL_GAP
81
+ top = buttonRect.top - panelRect.height
82
+
83
+ if (left < margin) {
84
+ left = buttonRect.right + PANEL_GAP
85
+ }
86
+
87
+ if (top < margin) top = margin
88
+ if (top + panelRect.height > window.innerHeight - margin) {
89
+ top = window.innerHeight - panelRect.height - margin
90
+ }
91
+ if (left + panelRect.width > window.innerWidth - margin) {
92
+ left = window.innerWidth - panelRect.width - margin
93
+ }
94
+ if (left < margin) left = margin
95
+
96
+ left += PANEL_POSITION_OFFSET.left
97
+ top += PANEL_POSITION_OFFSET.top
98
+ } else {
99
+ // 竖直工具栏：保持原逻辑，面板在工具栏右侧
100
+ left = (toolbarRect?.left || 0) + (toolbarRect?.width || 0)
101
+ top = buttonRect.bottom - panelRect.height
102
+
103
+ if (top < 0) top = margin
104
+ if (top + panelRect.height > window.innerHeight) {
105
+ top = window.innerHeight - panelRect.height - margin
106
+ }
85
107
  }
86
- if (left < margin) left = margin
87
-
88
- left += PANEL_POSITION_OFFSET.left
89
- top += PANEL_POSITION_OFFSET.top
90
108
 
91
109
  panel.style.position = 'fixed'
92
110
  panel.style.right = 'auto'
package/js/utils/basemapSwitcher.js CHANGED
@@ -53,7 +53,7 @@ export function createBasemapSwitcher() {
53
53
  if (!viewer?.container) return
54
54
 
55
55
  const PANEL_ID = 'cesium-basemap-picker-panel'
56
- /** 面板相对锚点的微调（工具栏靠右下时避免溢出视口） */
56
+ /** 水平工具栏时，面板相对锚点的微调 */
57
57
  const PANEL_POSITION_OFFSET = { top: -26, left: -2 }
58
58
  const PANEL_GAP = 8
59
59
  let panel = document.getElementById(PANEL_ID)
@@ -65,27 +65,45 @@ export function createBasemapSwitcher() {
65
65
 
66
66
  const margin = 35
67
67
  const panelRect = panel.getBoundingClientRect()
68
-
69
- // 默认：面板在触发按钮左上方展开（适配右下工具栏）
70
- let left = buttonRect.left - panelRect.width - PANEL_GAP
71
- let top = buttonRect.top - panelRect.height
72
-
73
- // 左侧放不下时，改到按钮右侧
74
- if (left < margin) {
75
- left = buttonRect.right + PANEL_GAP
76
- }
77
-
78
- if (top < margin) top = margin
79
- if (top + panelRect.height > window.innerHeight - margin) {
80
- top = window.innerHeight - panelRect.height - margin
81
- }
82
- if (left + panelRect.width > window.innerWidth - margin) {
83
- left = window.innerWidth - panelRect.width - margin
68
+ const toolbar = document.querySelector('.cesium-viewer-toolbar')
69
+ const toolbarRect = toolbar?.getBoundingClientRect()
70
+ const isHorizontalToolbar = toolbar
71
+ ? getComputedStyle(toolbar).flexDirection === 'row'
72
+ : false
73
+
74
+ let left
75
+ let top
76
+
77
+ if (isHorizontalToolbar) {
78
+ // 水平工具栏：面板在触发按钮左上方展开，并钳制在视口内
79
+ left = buttonRect.left - panelRect.width - PANEL_GAP
80
+ top = buttonRect.top - panelRect.height
81
+
82
+ if (left < margin) {
83
+ left = buttonRect.right + PANEL_GAP
84
+ }
85
+
86
+ if (top < margin) top = margin
87
+ if (top + panelRect.height > window.innerHeight - margin) {
88
+ top = window.innerHeight - panelRect.height - margin
89
+ }
90
+ if (left + panelRect.width > window.innerWidth - margin) {
91
+ left = window.innerWidth - panelRect.width - margin
92
+ }
93
+ if (left < margin) left = margin
94
+
95
+ left += PANEL_POSITION_OFFSET.left
96
+ top += PANEL_POSITION_OFFSET.top
97
+ } else {
98
+ // 竖直工具栏：保持原逻辑，面板在工具栏右侧
99
+ left = (toolbarRect?.left || 0) + (toolbarRect?.width || 0)
100
+ top = buttonRect.bottom - panelRect.height
101
+
102
+ if (top < 0) top = margin
103
+ if (top + panelRect.height > window.innerHeight) {
104
+ top = window.innerHeight - panelRect.height - margin
105
+ }
84
106
  }
85
- if (left < margin) left = margin
86
-
87
- left += PANEL_POSITION_OFFSET.left
88
- top += PANEL_POSITION_OFFSET.top
89
107
 
90
108
  panel.style.position = 'fixed'
91
109
  panel.style.right = 'auto'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "huweili-cesium",
3
- "version": "1.2.90",
3
+ "version": "1.2.91",
4
4
  "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
5
5
  "type": "module",
6
6
  "main": "./index.js",