huweili-cesium 1.2.12 → 1.2.14

package/js/index.js

@@ -8,6 +8,7 @@ export { getClickHandler, openDroneDetailById, closeDroneDetailById, bindDroneLa
 export { createCustomToolbarButtons } from './customToolbarButtons.js'
 export { drawFence } from './drawFence.js'
 export { drawFenceNew } from './drawFenceNew.js'
+export { measureDistance } from './measureDistance.js'
 export { createDroneRippleDom } from './droneRipple.js'
 export { geometryConfig } from './geometry.js'
 export { groundLinkConfig } from './groundLink.js'

package/js/measureDistance.js

@@ -0,0 +1,413 @@
+/**
+ * 两点地面直线测距模块
+ *
+ * 点击地图上第一个点作为起点，再点击第二个点作为终点，测量两点之间的地面直线距离。
+ * 无论地图处于 2D 还是 3D，采样点都会被转换为贴地坐标（height = 0），不携带高度。
+ *
+ * @author huweili
+ * @email czxyhuweili@163.com
+ * @version 1.0.0
+ */
+import * as Cesium from 'cesium'
+import { useMapStore } from './stores/mapStore.js'
+
+export function measureDistance() {
+  const mapStore = useMapStore()
+
+  const formatDistance = (distance) => {
+    if (!Number.isFinite(distance)) return '0 m'
+    if (distance >= 1000) return `${(distance / 1000).toFixed(2)} km`
+    return `${distance.toFixed(2)} m`
+  }
+
+  const createMouseTipEntity = (map, options) => {
+    return map.entities.add({
+      id: options.id,
+      position: new Cesium.CallbackProperty(() => options.getPosition(), false),
+      label: {
+        text: new Cesium.CallbackProperty(() => options.getText(), false),
+        font: options.font || '10px Microsoft YaHei',
+        fillColor: options.fillColor || Cesium.Color.WHITE,
+        showBackground: true,
+        backgroundColor: Cesium.Color.fromCssColorString(options.backgroundColor || 'rgba(0, 0, 0, 0.6)'),
+        backgroundPadding: options.backgroundPadding || new Cesium.Cartesian2(10, 6),
+        verticalOrigin: options.verticalOrigin || Cesium.VerticalOrigin.BOTTOM,
+        horizontalOrigin: options.horizontalOrigin || Cesium.HorizontalOrigin.LEFT,
+        pixelOffset: options.pixelOffset || new Cesium.Cartesian2(16, -16),
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, options.maxDistance || Number.POSITIVE_INFINITY)
+      }
+    })
+  }
+
+  /**
+   * 从屏幕坐标拾取地面点，并强制转换为 height = 0 的地面坐标。
+   * @param {Cesium.Viewer} map Cesium Viewer 实例
+   * @param {Cesium.Cartesian2} screenPosition 屏幕坐标
+   * @returns {Cesium.Cartesian3|null}
+   */
+  const getGroundCartesianFromScreen = (map, screenPosition) => {
+    if (!screenPosition) return null
+
+    const scene = map.scene
+    let cartesian = null
+
+    if (scene.pickPositionSupported) {
+      cartesian = scene.pickPosition(screenPosition)
+    }
+
+    if (!Cesium.defined(cartesian)) {
+      const ray = map.camera.getPickRay(screenPosition)
+      if (!ray) return null
+      cartesian = scene.globe.pick(ray, scene)
+    }
+
+    if (!Cesium.defined(cartesian)) return null
+
+    const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+    return Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0)
+  }
+
+  const cartesianToLngLatHeight = (cartesian) => {
+    const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+    return {
+      lng: Cesium.Math.toDegrees(cartographic.longitude),
+      lat: Cesium.Math.toDegrees(cartographic.latitude),
+      height: 0
+    }
+  }
+
+  const createGroundPolylinePositions = (startPosition, endPosition, segmentCount = 32) => {
+    if (!startPosition || !endPosition) return []
+
+    const start = Cesium.Cartographic.fromCartesian(startPosition)
+    const end = Cesium.Cartographic.fromCartesian(endPosition)
+    const positions = []
+
+    for (let i = 0; i <= segmentCount; i += 1) {
+      const t = i / segmentCount
+      positions.push(
+        Cesium.Cartesian3.fromRadians(
+          Cesium.Math.lerp(start.longitude, end.longitude, t),
+          Cesium.Math.lerp(start.latitude, end.latitude, t),
+          0
+        )
+      )
+    }
+
+    return positions
+  }
+
+  const getGroundDistance = (startPosition, endPosition) => {
+    if (!startPosition || !endPosition) return 0
+    return Cesium.Cartesian3.distance(startPosition, endPosition)
+  }
+
+  /**
+   * 开始两点地面直线测距
+   * @param {Object} options 配置项
+   * @param {string} [options.mapId] 地图实例 ID
+   * @param {string} options.id 测距图形唯一标识
+   * @param {string} [options.color='#00ffff'] 线和点颜色
+   * @param {number} [options.width=3] 线宽
+   * @param {(result: Object) => void} [options.onFinish] 测距完成回调
+   * @param {(result: Object) => void} [options.onChange] 测距过程回调
+   * @param {() => void} [options.onCancel] 取消回调
+   * @returns {Object|null} 测距控制器
+   */
+  const startMeasure = (options = {}) => {
+    const map = mapStore.getMap(options.mapId)
+    if (!map) {
+      console.error('地图实例不存在')
+      return null
+    }
+
+    if (!options.id) {
+      console.error('测距时必须提供 id')
+      return null
+    }
+
+    if (mapStore.hasGraphicMap(options.id, options.mapId)) {
+      console.warn(`id: ${options.id} 测距结果已存在`)
+      return null
+    }
+
+    const color = Cesium.Color.fromCssColorString(options.color || '#00ffff')
+    const width = options.width ?? 3
+    const clampToGround = options.clampToGround ?? true
+    const lineMaterial =
+      options.lineMaterial ||
+      new Cesium.PolylineGlowMaterialProperty({
+        color: Cesium.Color.fromAlpha(color, options.opacity ?? 0.95),
+        glowPower: options.glowPower ?? 0.12,
+        taperPower: options.taperPower ?? 0
+      })
+
+    let startPosition = null
+    let endPosition = null
+    let floatingPosition = null
+    let cursorPosition = null
+    let startPointEntity = null
+    let endPointEntity = null
+    let lineEntity = null
+    let distanceLabelEntity = null
+    let tipEntity = null
+    let handler = null
+    let isFinished = false
+
+    const tempIds = {
+      startPoint: `${options.id}_measure_start_point`,
+      endPoint: `${options.id}_measure_end_point`,
+      line: `${options.id}_measure_line`,
+      label: `${options.id}_measure_label`,
+      tip: `${options.id}_measure_tip`
+    }
+
+    const getLinePositions = () => {
+      if (!startPosition) return []
+      const targetPosition = endPosition || floatingPosition
+      if (!targetPosition) return [startPosition]
+      return createGroundPolylinePositions(startPosition, targetPosition, options.segmentCount ?? 48)
+    }
+
+    const getCurrentDistance = () => getGroundDistance(startPosition, endPosition || floatingPosition)
+
+    const getMidPosition = () => {
+      const targetPosition = endPosition || floatingPosition
+      if (!startPosition || !targetPosition) return startPosition || targetPosition || cursorPosition || null
+      const startCartographic = Cesium.Cartographic.fromCartesian(startPosition)
+      const endCartographic = Cesium.Cartographic.fromCartesian(targetPosition)
+      return Cesium.Cartesian3.fromRadians(
+        (startCartographic.longitude + endCartographic.longitude) / 2,
+        (startCartographic.latitude + endCartographic.latitude) / 2,
+        0
+      )
+    }
+
+    const getTipText = () => {
+      if (!startPosition) return '点击确定起点'
+      if (!endPosition) return `点击确定终点，当前距离：${formatDistance(getCurrentDistance())}`
+      return `测距完成：${formatDistance(getCurrentDistance())}`
+    }
+
+    const buildResult = () => ({
+      id: options.id,
+      start: startPosition ? cartesianToLngLatHeight(startPosition) : null,
+      end: endPosition ? cartesianToLngLatHeight(endPosition) : null,
+      distance: getGroundDistance(startPosition, endPosition),
+      distanceText: formatDistance(getGroundDistance(startPosition, endPosition))
+    })
+
+    const emitChange = () => {
+      if (typeof options.onChange !== 'function' || !startPosition) return
+      options.onChange({
+        id: options.id,
+        start: cartesianToLngLatHeight(startPosition),
+        end: (endPosition || floatingPosition) ? cartesianToLngLatHeight(endPosition || floatingPosition) : null,
+        distance: getCurrentDistance(),
+        distanceText: formatDistance(getCurrentDistance())
+      })
+    }
+
+    const ensurePreviewEntities = () => {
+      if (!startPointEntity) {
+        startPointEntity = map.entities.add({
+          id: tempIds.startPoint,
+          position: startPosition,
+          point: {
+            pixelSize: 10,
+            color,
+            outlineColor: Cesium.Color.WHITE,
+            outlineWidth: 2,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+          }
+        })
+      }
+
+      if (!lineEntity) {
+        lineEntity = map.entities.add({
+          id: tempIds.line,
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => getLinePositions(), false),
+            width,
+            material: lineMaterial,
+            clampToGround,
+            arcType: Cesium.ArcType.GEODESIC,
+            granularity: options.granularity ?? Cesium.Math.toRadians(0.2),
+            depthFailMaterial: options.depthFailMaterial || new Cesium.ColorMaterialProperty(Cesium.Color.fromAlpha(color, 0.7))
+          }
+        })
+      }
+
+      if (!distanceLabelEntity) {
+        distanceLabelEntity = map.entities.add({
+          id: tempIds.label,
+          position: new Cesium.CallbackProperty(() => getMidPosition(), false),
+          label: {
+            text: new Cesium.CallbackProperty(() => formatDistance(getCurrentDistance()), false),
+            font: '14px Microsoft YaHei',
+            fillColor: Cesium.Color.WHITE,
+            showBackground: true,
+            backgroundColor: Cesium.Color.fromCssColorString('rgba(0, 0, 0, 0.65)'),
+            backgroundPadding: new Cesium.Cartesian2(10, 6),
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            pixelOffset: new Cesium.Cartesian2(0, -12),
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, Number.POSITIVE_INFINITY)
+          }
+        })
+      }
+    }
+
+    const createEndPointEntity = () => {
+      if (endPointEntity || !endPosition) return
+      endPointEntity = map.entities.add({
+        id: tempIds.endPoint,
+        position: endPosition,
+        point: {
+          pixelSize: 10,
+          color,
+          outlineColor: Cesium.Color.WHITE,
+          outlineWidth: 2,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+        }
+      })
+    }
+
+    const removeTemporaryEntities = () => {
+      ;[startPointEntity, endPointEntity, lineEntity, distanceLabelEntity, tipEntity].forEach((entity) => {
+        if (entity) map.entities.remove(entity)
+      })
+      startPointEntity = null
+      endPointEntity = null
+      lineEntity = null
+      distanceLabelEntity = null
+      tipEntity = null
+    }
+
+    const destroyHandler = () => {
+      if (handler) {
+        handler.destroy()
+        handler = null
+      }
+    }
+
+    const cancel = () => {
+      if (isFinished) return
+      destroyHandler()
+      removeTemporaryEntities()
+      if (typeof options.onCancel === 'function') options.onCancel()
+    }
+
+    const finalize = () => {
+      if (isFinished || !startPosition || !endPosition) return null
+      isFinished = true
+      destroyHandler()
+      if (tipEntity) {
+        map.entities.remove(tipEntity)
+        tipEntity = null
+      }
+      createEndPointEntity()
+      const result = buildResult()
+      const graphic = {
+        id: options.id,
+        startPointEntity,
+        endPointEntity,
+        lineEntity,
+        labelEntity: distanceLabelEntity,
+        result,
+        type: 'measureDistance'
+      }
+      mapStore.setGraphicMap(options.id, graphic, options.mapId)
+      if (typeof options.onFinish === 'function') options.onFinish(result)
+      return result
+    }
+
+    tipEntity = createMouseTipEntity(map, {
+      id: tempIds.tip,
+      getPosition: () => cursorPosition || endPosition || floatingPosition || startPosition,
+      getText: getTipText
+    })
+
+    handler = new Cesium.ScreenSpaceEventHandler(map.scene.canvas)
+
+    handler.setInputAction((movement) => {
+      if (isFinished) return
+      cursorPosition = getGroundCartesianFromScreen(map, movement.endPosition)
+      if (startPosition && cursorPosition) {
+        floatingPosition = cursorPosition
+        emitChange()
+      }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+
+    handler.setInputAction((click) => {
+      if (isFinished) return
+      const cartesian = getGroundCartesianFromScreen(map, click.position)
+      if (!cartesian) return
+
+      if (!startPosition) {
+        startPosition = cartesian
+        floatingPosition = cartesian
+        cursorPosition = cartesian
+        ensurePreviewEntities()
+        emitChange()
+        return
+      }
+
+      endPosition = cartesian
+      floatingPosition = null
+      createEndPointEntity()
+      finalize()
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+    handler.setInputAction(() => {
+      cancel()
+    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+
+    return {
+      id: options.id,
+      finish: finalize,
+      cancel,
+      destroy: cancel,
+      getStart: () => (startPosition ? cartesianToLngLatHeight(startPosition) : null),
+      getEnd: () => (endPosition ? cartesianToLngLatHeight(endPosition) : null),
+      getDistance: () => getGroundDistance(startPosition, endPosition || floatingPosition),
+      getDistanceText: () => formatDistance(getGroundDistance(startPosition, endPosition || floatingPosition))
+    }
+  }
+
+  /**
+   * 删除测距结果
+   * @param {string} id 测距图形 ID
+   * @param {string} [mapId] 地图实例 ID
+   * @returns {boolean}
+   */
+  const destroyMeasure = (id, mapId) => {
+    const map = mapStore.getMap(mapId)
+    if (!map) {
+      console.error('地图实例不存在')
+      return false
+    }
+
+    const graphic = mapStore.getGraphicMap(id, mapId)
+    if (!graphic) {
+      console.warn(`id: ${id} 测距结果不存在`)
+      return false
+    }
+
+    ;[graphic.startPointEntity, graphic.endPointEntity, graphic.lineEntity, graphic.labelEntity].forEach((entity) => {
+      if (entity) map.entities.remove(entity)
+    })
+    mapStore.removeGraphicMap(id, mapId)
+    return true
+  }
+
+  return {
+    startMeasure,
+    destroyMeasure,
+    formatDistance
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huweili-cesium",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
   "type": "module",
   "main": "./index.js",
@@ -39,6 +39,8 @@
     "./drawFence.js": "./js/drawFence.js",
     "./drawFenceNew": "./js/drawFenceNew.js",
     "./drawFenceNew.js": "./js/drawFenceNew.js",
+    "./measureDistance": "./js/measureDistance.js",
+    "./measureDistance.js": "./js/measureDistance.js",
     "./dronePlannedRoute": "./js/dronePlannedRoute.js",
     "./dronePlannedRoute.js": "./js/dronePlannedRoute.js",
     "./droneRipple": "./js/droneRipple.js",