huweili-cesium 1.2.42 → 1.2.44

package/js/basis.js

@@ -15,6 +15,13 @@ import {
   teardownOrthographicWheelZoom,
   restorePerspectiveControllerState,
 } from './utils/cameraInteraction.js'
+import { getMapCenterPosition } from './utils/getMapCenterPosition.js'
+import { resetCompassDirection } from './toolbar/compass.js'
+import { createBasemapSwitcher } from './utils/basemapSwitcher.js'
+import { createZoomController } from './toolbar/zoomController.js'
+import { useEventBus } from './utils/useEventBus.js'
+import { applyOrthographicZoomFactor } from './utils/orthographicCameraZoom.js'
+import { measureDistance } from './measureDistance.js'
 
 export function basicConfig() {
 
@@ -721,6 +728,207 @@ export function basicConfig() {
     }
   }
 
+  /**
+   * 创建默认首页地图工具栏按钮
+   * @param {Object} options
+   * @param {string} options.mapId 地图实例 ID
+   * @param {string} [options.baseUrl='/'] 静态资源基础路径
+   * @param {number} [options.distance2D=8000] 2D 视角距离
+   * @param {number} [options.distance3D=15000] 3D 视角距离
+   * @returns {Object[]} 默认工具栏按钮配置
+   */
+  const createDefaultHomeToolbarButtons = ({
+    mapId,
+    baseUrl = '/',
+    distance2D = 8000,
+    distance3D = 15000,
+  } = {}) => {
+    const { zoomIn: zoomInDefault, zoomOut: zoomOutDefault } = createZoomController()
+    const { toggleBasemapPickerPanel } = createBasemapSwitcher()
+    const { startMeasure } = measureDistance()
+    const { emit } = useEventBus()
+
+    const zoomIn = (factor = 0.8) => {
+      const map = mapStore.getMap(mapId)
+      if (map && applyOrthographicZoomFactor(map, mapId, factor)) return
+      zoomInDefault(mapId, factor)
+    }
+
+    const zoomOut = (factor = 1.25) => {
+      const map = mapStore.getMap(mapId)
+      if (map && applyOrthographicZoomFactor(map, mapId, factor)) return
+      zoomOutDefault(mapId, factor)
+    }
+
+    return [
+      {
+        index: 0,
+        title: '指北针',
+        text: 'N',
+        isCompass: true,
+        onClick: () => resetCompassDirection(),
+      },
+      {
+        index: 1,
+        title: '测距',
+        iconSrc: `${baseUrl}/images/new/ceju.svg`,
+        onClick: () => {
+          const measureId = `home_measure_${Date.now()}`
+          startMeasure({
+            id: measureId,
+            mapId,
+            color: '#00ffff',
+            width: 3,
+          })
+        },
+      },
+      {
+        index: 2,
+        title: '返回初始点位',
+        iconSrc: `${baseUrl}/images/new/home.svg`,
+        onClick: (v) => {
+          const { lng, lat } = getMapCenterPosition({ mapInstanceId: mapId })
+          setCesiumCenter({ lng, lat, map: v, mapId })
+        },
+      },
+      {
+        index: 3,
+        title: '2D/3D视角切换',
+        text: '2D',
+        onClick: (_v, btn) => {
+          const result = toggleViewAtViewportCenter(mapId, {
+            distance2D,
+            distance3D,
+          })
+          if (result.success && btn) btn.innerText = result.currentMode
+          mapStore.setSceneMode(result.currentMode, mapId)
+          emit('map-scene-mode-changed', { mapId, sceneMode: result.currentMode })
+        },
+      },
+      {
+        index: 4,
+        title: '降低视角',
+        iconSrc: `${baseUrl}/images/new/jia.svg`,
+        onClick: () => zoomIn(),
+      },
+      {
+        index: 5,
+        title: '抬升视角',
+        iconSrc: `${baseUrl}/images/new/jian.svg`,
+        onClick: () => zoomOut(),
+      },
+      {
+        index: 6,
+        title: '切换底图',
+        iconSrc: `${baseUrl}/images/new/map.svg`,
+        onClick: (v, btn) => toggleBasemapPickerPanel(v, btn || null),
+      },
+    ]
+  }
+
+  /**
+   * 创建工具栏展开/折叠和拖拽控制器
+   * - 单击展开按钮：初始化拖拽能力，不触发展开/折叠
+   * - 双击展开按钮：展开/折叠同级工具栏按钮
+   * - 拖拽展开按钮：移动整个工具栏按钮组
+   */
+  const createToolbarExpandController = () => {
+    let isToolbarExpanded = true
+    let isToolbarDragging = false
+
+    const applyToggleExpand = (btn) => {
+      const toolbar = btn?.parentElement
+      if (!toolbar) return
+
+      isToolbarExpanded = !isToolbarExpanded
+
+      Array.from(toolbar.children).forEach((item) => {
+        if (item === btn) return
+        item.style.display = isToolbarExpanded ? '' : 'none'
+      })
+
+      btn.title = isToolbarExpanded ? '收缩' : '展开'
+      btn.setAttribute('aria-expanded', String(isToolbarExpanded))
+      btn.classList.toggle('is-collapsed', !isToolbarExpanded)
+    }
+
+    const setupToolbarDrag = (btn) => {
+      if (!btn || btn.dataset.toolbarDragReady === 'true') return
+
+      btn.dataset.toolbarDragReady = 'true'
+      btn.style.cursor = 'move'
+
+      btn.addEventListener('dblclick', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        if (isToolbarDragging) return
+        applyToggleExpand(btn)
+      })
+
+      btn.addEventListener('pointerdown', (event) => {
+        const toolbar = btn.parentElement
+        if (!toolbar) return
+
+        const startX = event.clientX
+        const startY = event.clientY
+        const rect = toolbar.getBoundingClientRect()
+        const startLeft = rect.left
+        const startTop = rect.top
+        let hasMoved = false
+
+        toolbar.style.position = 'fixed'
+        toolbar.style.left = `${startLeft}px`
+        toolbar.style.top = `${startTop}px`
+        toolbar.style.right = 'auto'
+        toolbar.style.bottom = 'auto'
+        toolbar.style.zIndex = toolbar.style.zIndex || '9999'
+        toolbar.style.margin = '0'
+
+        const moveToolbar = (moveEvent) => {
+          const deltaX = moveEvent.clientX - startX
+          const deltaY = moveEvent.clientY - startY
+
+          if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {
+            hasMoved = true
+            isToolbarDragging = true
+          }
+
+          const maxLeft = window.innerWidth - toolbar.offsetWidth
+          const maxTop = window.innerHeight - toolbar.offsetHeight
+          const nextLeft = Math.min(Math.max(startLeft + deltaX, 0), Math.max(maxLeft, 0))
+          const nextTop = Math.min(Math.max(startTop + deltaY, 0), Math.max(maxTop, 0))
+
+          toolbar.style.left = `${nextLeft}px`
+          toolbar.style.top = `${nextTop}px`
+        }
+
+        const stopDrag = () => {
+          window.removeEventListener('pointermove', moveToolbar)
+          window.removeEventListener('pointerup', stopDrag)
+          window.removeEventListener('pointercancel', stopDrag)
+
+          if (hasMoved) {
+            window.setTimeout(() => {
+              isToolbarDragging = false
+            }, 0)
+          }
+        }
+
+        window.addEventListener('pointermove', moveToolbar)
+        window.addEventListener('pointerup', stopDrag)
+        window.addEventListener('pointercancel', stopDrag)
+      })
+    }
+
+    return {
+      toggleExpand: (_viewer, btn) => {
+        setupToolbarDrag(btn)
+      },
+      setupToolbarDrag,
+      applyToggleExpand,
+    }
+  }
+
   /**
    * 以当前视口中心点为锚点，在 2D 俯视 / 3D 斜视之间切换（不依赖 RTK）
    * @param {string=} mapId 地图实例ID
@@ -781,8 +989,10 @@ export function basicConfig() {
     applyOrthographicFrustum,
     restorePerspectiveFrustum,
     setInitialCameraView,
+    createDefaultHomeToolbarButtons,
+    createToolbarExpandController,
     syncCameraInteractionMode: (map, mapId, sceneMode) =>
-      syncCameraInteractionMode(map, mapId, sceneMode, orthoViewHelpers()),
+    syncCameraInteractionMode(map, mapId, sceneMode, orthoViewHelpers()),
   }
 }
 

package/package.json

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