huweili-cesium 1.2.43 → 1.2.45

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,16 +728,180 @@ 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 = () => {
+  const createToolbarExpandController = ({
+    storageKey = 'huweili-cesium-toolbar-position',
+  } = {}) => {
     let isToolbarExpanded = true
     let isToolbarDragging = false
 
+    const getStorage = () => {
+      try {
+        return window?.localStorage || null
+      } catch (_error) {
+        return null
+      }
+    }
+
+    const readToolbarPosition = () => {
+      const storage = getStorage()
+      if (!storage || !storageKey) return null
+
+      try {
+        const value = storage.getItem(storageKey)
+        if (!value) return null
+
+        const position = JSON.parse(value)
+        if (!Number.isFinite(position?.left) || !Number.isFinite(position?.top)) return null
+        return position
+      } catch (_error) {
+        return null
+      }
+    }
+
+    const saveToolbarPosition = (left, top) => {
+      const storage = getStorage()
+      if (!storage || !storageKey) return
+
+      try {
+        storage.setItem(storageKey, JSON.stringify({ left, top }))
+      } catch (_error) {
+        // ignore storage write error
+      }
+    }
+
+    const applyToolbarPosition = (toolbar, left, top) => {
+      if (!toolbar) return
+
+      const maxLeft = window.innerWidth - toolbar.offsetWidth
+      const maxTop = window.innerHeight - toolbar.offsetHeight
+      const nextLeft = Math.min(Math.max(left, 0), Math.max(maxLeft, 0))
+      const nextTop = Math.min(Math.max(top, 0), Math.max(maxTop, 0))
+
+      toolbar.style.position = 'fixed'
+      toolbar.style.left = `${nextLeft}px`
+      toolbar.style.top = `${nextTop}px`
+      toolbar.style.right = 'auto'
+      toolbar.style.bottom = 'auto'
+      toolbar.style.zIndex = toolbar.style.zIndex || '9999'
+      toolbar.style.margin = '0'
+    }
+
+    const restoreToolbarPosition = (btn) => {
+      const toolbar = btn?.parentElement
+      if (!toolbar) return
+
+      const position = readToolbarPosition()
+      if (!position) return
+
+      window.requestAnimationFrame(() => {
+        applyToolbarPosition(toolbar, position.left, position.top)
+      })
+    }
+
     const applyToggleExpand = (btn) => {
       const toolbar = btn?.parentElement
       if (!toolbar) return
@@ -752,6 +923,7 @@ export function basicConfig() {
 
       btn.dataset.toolbarDragReady = 'true'
       btn.style.cursor = 'move'
+      restoreToolbarPosition(btn)
 
       btn.addEventListener('dblclick', (event) => {
         event.preventDefault()
@@ -771,13 +943,7 @@ export function basicConfig() {
         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'
+        applyToolbarPosition(toolbar, startLeft, startTop)
 
         const moveToolbar = (moveEvent) => {
           const deltaX = moveEvent.clientX - startX
@@ -788,13 +954,7 @@ export function basicConfig() {
             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`
+          applyToolbarPosition(toolbar, startLeft + deltaX, startTop + deltaY)
         }
 
         const stopDrag = () => {
@@ -803,6 +963,9 @@ export function basicConfig() {
           window.removeEventListener('pointercancel', stopDrag)
 
           if (hasMoved) {
+            const currentRect = toolbar.getBoundingClientRect()
+            saveToolbarPosition(currentRect.left, currentRect.top)
+
             window.setTimeout(() => {
               isToolbarDragging = false
             }, 0)
@@ -884,6 +1047,7 @@ export function basicConfig() {
     applyOrthographicFrustum,
     restorePerspectiveFrustum,
     setInitialCameraView,
+    createDefaultHomeToolbarButtons,
     createToolbarExpandController,
     syncCameraInteractionMode: (map, mapId, sceneMode) =>
     syncCameraInteractionMode(map, mapId, sceneMode, orthoViewHelpers()),

package/package.json

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