easy-three-utils 0.0.398 → 0.0.400

package/cesium/components/react/SunshineLine/index.tsx

@@ -42,7 +42,7 @@ const SunshineLine: React.FC<{
 
     const sliderBoxRef = useRef(null)
     useEffect(() => {
-        sliderBoxRef.current.style.bottom = `calc(-100vh + ${sliderBoxRef.current.clientHeight + 20}px)`
+        sliderBoxRef.current!.style.bottom = `${sliderBoxRef.current!.clientHeight + 20}px`
     }, [])
 
     return (

package/cesium/components/react/TerrainLine/index.tsx

@@ -29,7 +29,7 @@ const TerrainLine: React.FC<{
 
     const sliderBoxRef = useRef(null)
     useEffect(() => {
-        sliderBoxRef.current.style.bottom = `calc(-100vh + ${sliderBoxRef.current.clientHeight + 20}px)`
+        sliderBoxRef.current!.style.bottom = `${sliderBoxRef.current!.clientHeight + 20}px`
     }, [])
 
     return (

package/cesium/utils/useProfileAnalysis.ts

@@ -1,303 +1,272 @@
 import * as Cesium from 'cesium'
-import glsl from "../glsl/viewable"
 
-const useViewshedAnalysis = (viewer: Cesium.Viewer, options: {
-  collection: Cesium.CustomDataSource
+const useProfileAnalysis = (viewer: Cesium.Viewer, options: {
+    collection: Cesium.CustomDataSource
 }) => {
 
-  let i = 0
-  let handler: Cesium.ScreenSpaceEventHandler | null = null
-  let viewPosition = null
-  let viewDistance = 100.0
-  let viewHeading = 0.0
-  let viewPitch = 0.0
-  let horizontalViewAngle = 90.0
-  let verticalViewAngle = 60.0
-  let visibleAreaColor = Cesium.Color.GREEN
-  let invisibleAreaColor = Cesium.Color.RED
-  let enabled = true
-  let softShadows = true
-  let size = 2048
-  let lightCamera = null
-  let shadowMap = null
-  let sketch = null
-  let postStage = null
-  let frustumOutline = null
+    let handler = null
+    let positions = []
+    let positionsCartographic = []
+    let positions_Inter = []
+    let poly = null
+    let distance = null
+    let cartesian = null
+    let DistanceArray = []
+    let profileItem: {
+        distance: number
+        point: ReturnType<typeof cartesian3ToDegrees>
+    }[] = []
 
-  const add = () => {
-    createLightCamera()
-    createShadowMap()
-    drawFrustumOutline()
-    drawSketch()
-    createPostStage()
-  }
+    class PolyLinePrimitive {
+        options: Cesium.Entity.ConstructorOptions
+        positions: Cesium.Cartesian3[]
 
-  const update = () => {
-    removeAll()
-    add()
-  }
+        constructor(positions: Cesium.Cartesian3[]) {
+            this.options = {
+                polyline: {
+                    show: true,
+                    positions: [],
+                    width: 3,
+                    material: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
+                    clampToGround: true
+                }
+            }
+            this.positions = positions
+            this.init()
+        }
 
-  const removeAll = () => {
-    stopDraw()
+        init = () => {
+            const _self = this
+            const _update = function () {
+                return _self.positions
+            }
+            this.options.polyline.positions = new Cesium.CallbackProperty(_update, false)
+            options.collection.entities.add(this.options)
+        }
+    }
 
-    if (sketch) {
-      options.collection.entities.remove(sketch)
-      sketch = null
+    const draw = (cb: (data: {
+        min: number;
+        value: (number | string)[][]
+    }) => void) => {
+        if (handler) {
+            console.log('请使用右键结束上次测量！')
+            return
+        }
+        options.collection.entities.removeAll()
+        handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+        leftClickEvent()
+        mouseMoveEvent()
+        rightClickEvent(cb)
     }
-    if (postStage) {
-      viewer.scene.postProcessStages.remove(postStage)
-      postStage = null
+
+    const stopDraw = () => {
+        if (handler) {
+            handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+            handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+            handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+            handler.destroy()
+            handler = null
+        }
+
+        positions = []
+        positionsCartographic = []
+        positions_Inter = []
+        poly = null
+        distance = null
+        cartesian = null
+        DistanceArray = []
+        profileItem = []
     }
-    if (frustumOutline) {
-      viewer.scene.primitives.remove(frustumOutline)
-      frustumOutline = null
+
+    const removeAll = () => {
+        stopDraw()
+        options.collection.entities.removeAll()
     }
-  }
 
-  const updatePosition = (position) => {
-    viewDistance = Cesium.Cartesian3.distance(viewPosition, position)
-    viewHeading = getHeading(viewPosition, position)
-    viewPitch = getPitch(viewPosition, position)
-  }
+    const leftClickEvent = () => {
+        handler.setInputAction(((movement) => {
+            cartesian = viewer.scene.pickPosition(movement.position)
+            console.log(cartesian,'123')
+            if (positions.length == 0) {
+                positions.push(cartesian.clone())
+            }
+            positions.push(cartesian)
+            if (poly) {
+                interPoints(poly.positions)
+                distance = getSpaceDistance(positions_Inter)
+            } else {
+                distance = getSpaceDistance(positions)
+            }
 
-  const createLightCamera = () => {
-    const camera = new Cesium.Camera(viewer.scene)
-    camera.position = viewPosition
-    camera.frustum.near = viewDistance * 0.001
-    camera.frustum.far = viewDistance
+            const textDisance = distance + "米"
+            DistanceArray.push(distance)
+            options.collection.entities.add({
+                position: positions[positions.length - 1],
+                point: {
+                    color: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
+                    outlineColor: Cesium.Color.WHITE,
+                    outlineWidth: 2,
+                    pixelSize: 10
+                },
+                label: {
+                    text: textDisance,
+                    scale: 0.5,
+                    font: "normal 28px MicroSoft YaHei",
+                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                    pixelOffset: new Cesium.Cartesian2(0, -30),
+                    outlineWidth: 9,
+                    outlineColor: Cesium.Color.WHITE,
+                    heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+                    disableDepthTestDistance: Number.POSITIVE_INFINITY
+                }
+            })
+        }) as Cesium.ScreenSpaceEventHandler.PositionedEventCallback, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    }
 
-    const hr = Cesium.Math.toRadians(horizontalViewAngle)
-    const vr = Cesium.Math.toRadians(verticalViewAngle)
-    const aspectRatio = (viewDistance * Math.tan(hr / 2) * 2) / (viewDistance * Math.tan(vr / 2) * 2);
-    (camera.frustum as any).aspectRatio = aspectRatio;
-    (camera.frustum as any).fov = Math.max(hr, vr)
+    const mouseMoveEvent = () => {
+        handler.setInputAction(((movement) => {
+            cartesian = viewer.scene.pickPosition(movement.endPosition)
+            if (positions.length >= 2) {
+                if (!Cesium.defined(poly)) {
+                    poly = new PolyLinePrimitive(positions)
+                } else {
+                    positions.pop()
+                    positions.push(cartesian)
+                }
+            }
+        }) as Cesium.ScreenSpaceEventHandler.MotionEventCallback, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+    }
 
-    camera.setView({
-      destination: viewPosition,
-      orientation: {
-        heading: Cesium.Math.toRadians(viewHeading || 0),
-        pitch: Cesium.Math.toRadians(viewPitch || 0),
-        roll: 0
-      }
-    })
-    lightCamera = camera
-  }
+    const rightClickEvent = (cb: (data: {
+        min: number;
+        value: (number | string)[][]
+    }) => void) => {
+        handler.setInputAction((() => {
+            positions.pop()
+            createProfileChart(profileItem, cb)
+            stopDraw()
+        }) as Cesium.ScreenSpaceEventHandler.PositionedEventCallback, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+    }
 
-  const createShadowMap = () => {
-    const shadow = new (Cesium.ShadowMap as any)({
-      context: (viewer.scene as any).context,
-      lightCamera: lightCamera,
-      enabled: enabled,
-      isPointLight: true,
-      pointLightRadius: viewDistance,
-      cascadesEnabled: false,
-      size: size,
-      softShadows: softShadows,
-      normalOffset: false,
-      fromLightSource: false
-    })
-    viewer.scene.shadowMap = shadow
-    shadowMap = shadow
-  }
+    const cartesian3ToDegrees = (pos: Cesium.Cartesian3) => {
+        const ellipsoid = viewer.scene.globe.ellipsoid
+        const cartographic = ellipsoid.cartesianToCartographic(pos)
+        const lat = Cesium.Math.toDegrees(cartographic.latitude)
+        const lon = Cesium.Math.toDegrees(cartographic.longitude)
+        const height = cartographic.height
 
-  const createPostStage = () => {
-    const fs = glsl
-    const cutomPostStage = new Cesium.PostProcessStage({
-      fragmentShader: fs,
-      uniforms: {
-        shadowMap_textureCube: () => {
-          shadowMap.update(Reflect.get(viewer.scene, '_frameState'))
-          return Reflect.get(shadowMap, '_shadowMapTexture')
-        },
-        shadowMap_matrix: () => {
-          shadowMap.update(Reflect.get(viewer.scene, '_frameState'))
-          return Reflect.get(shadowMap, '_shadowMapMatrix')
-        },
-        shadowMap_lightPositionEC: () => {
-          shadowMap.update(Reflect.get(viewer.scene, '_frameState'))
-          return Reflect.get(shadowMap, '_lightPositionEC')
-        },
-        shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness: () => {
-          shadowMap.update(Reflect.get(viewer.scene, '_frameState'))
-          const bias = shadowMap._pointBias
-          return Cesium.Cartesian4.fromElements(
-            bias.normalOffsetScale,
-            shadowMap._distance,
-            shadowMap.maximumDistance,
-            0.0,
-            new Cesium.Cartesian4()
-          )
-        },
-        shadowMap_texelSizeDepthBiasAndNormalShadingSmooth: () => {
-          shadowMap.update(Reflect.get(viewer.scene, '_frameState'))
-          const bias = shadowMap._pointBias
-          const texelStepSize = new Cesium.Cartesian2(
-            1.0 / shadowMap._textureSize.x,
-            1.0 / shadowMap._textureSize.y
-          )
-          return Cesium.Cartesian4.fromElements(
-            texelStepSize.x,
-            texelStepSize.y,
-            bias.depthBias,
-            bias.normalShadingSmooth,
-            new Cesium.Cartesian4()
-          )
-        },
-        camera_projection_matrix: lightCamera.frustum.projectionMatrix,
-        camera_view_matrix: lightCamera.viewMatrix,
-        helsing_viewDistance: () => viewDistance,
-        helsing_visibleAreaColor: visibleAreaColor,
-        helsing_invisibleAreaColor: invisibleAreaColor
-      }
-    })
-    postStage = viewer.scene.postProcessStages.add(cutomPostStage)
-  }
+        return {
+            lat,
+            lon,
+            height
+        }
+    }
 
-  const drawFrustumOutline = () => {
-    const direction = lightCamera.directionWC
-    const up = lightCamera.upWC
-    const right = Cesium.Cartesian3.negate(lightCamera.rightWC, new Cesium.Cartesian3())
-    const rotation = Cesium.Matrix3.setColumn(
-      new Cesium.Matrix3(),
-      0,
-      right,
-      new Cesium.Matrix3()
-    )
-    Cesium.Matrix3.setColumn(rotation, 1, up, rotation)
-    Cesium.Matrix3.setColumn(rotation, 2, direction, rotation)
-    const orientation = Cesium.Quaternion.fromRotationMatrix(rotation, new Cesium.Quaternion())
+    const getSpaceDistance = (positions: Cesium.Cartesian3[]) => {
+        profileItem = [
+            {
+                point: cartesian3ToDegrees(positions[0]),
+                distance: 0
+            }
+        ]
+        let distance = 0
+        for (let i = 0; i < positions.length - 1; i++) {
+            const point1cartographic = Cesium.Cartographic.fromCartesian(positions[i])
+            const point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1])
+            const geodesic = new Cesium.EllipsoidGeodesic()
+            geodesic.setEndPoints(point1cartographic, point2cartographic)
+            let s = geodesic.surfaceDistance
+            s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2))
+            distance = distance + s
 
-    const instance = new Cesium.GeometryInstance({
-      geometry: new Cesium.FrustumOutlineGeometry({
-        frustum: lightCamera.frustum,
-        origin: viewPosition,
-        orientation
-      }),
-      attributes: {
-        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.YELLOWGREEN),
-        show: new Cesium.ShowGeometryInstanceAttribute(true)
-      }
-    })
+            const m_Item = {
+                point: cartesian3ToDegrees(positions[i + 1]),
+                distance: distance
+            }
+            profileItem.push(m_Item)
+        }
+        return distance.toFixed(2)
+    }
 
-    frustumOutline = viewer.scene.primitives.add(
-      new Cesium.Primitive({
-        geometryInstances: [instance],
-        appearance: new Cesium.PerInstanceColorAppearance({
-          flat: true,
-          translucent: false
-        })
-      })
-    )
-  }
+    const interPoints = (positions: Cesium.Cartesian3[]) => {
+        positionsCartographic = []
+        var terrainSamplePositions = []
+        for (let index = 0; index < positions.length - 1; index++) {
+            const element = positions[index]
+            var ellipsoid = viewer.scene.globe.ellipsoid
+            var cartographic = ellipsoid.cartesianToCartographic(element)
+            positionsCartographic.push(cartographic)
+        }
+        for (let i = 0; i < positionsCartographic.length; i++) {
+            const m_Cartographic0 = positionsCartographic[i]
+            const m_Cartographic1 = positionsCartographic[i + 1]
+            if (m_Cartographic1) {
+                var a = Math.abs(m_Cartographic0.longitude - m_Cartographic1.longitude) * 10000000
+                var b = Math.abs(m_Cartographic0.latitude - m_Cartographic1.latitude) * 10000000
+                if (a > b) b = a
+                let length = parseInt((b / 2) as any)
+                if (length > 1000) length = 1000
+                if (length < 2) length = 2
+                for (var j = 0; j < length; j++) {
+                    terrainSamplePositions.push(
+                        new Cesium.Cartographic(
+                            Cesium.Math.lerp(m_Cartographic0.longitude, m_Cartographic1.longitude, j / (length - 1)),
+                            Cesium.Math.lerp(m_Cartographic0.latitude, m_Cartographic1.latitude, j / (length - 1))
+                        )
+                    )
+                }
+                terrainSamplePositions.pop()
+            } else {
+                terrainSamplePositions.push(m_Cartographic0)
+            }
+        }
+        positions_Inter = []
+        for (var n = 0; n < terrainSamplePositions.length; n++) {
+            var m_cartographic = terrainSamplePositions[n]
+            var height = viewer.scene.globe.getHeight(m_cartographic)
+            var point = Cesium.Cartesian3.fromDegrees(m_cartographic.longitude / Math.PI * 180, m_cartographic.latitude / Math.PI * 180, height)
+            positions_Inter.push(point)
+        }
+    }
 
-  const drawSketch = () => {
-    sketch = options.collection.entities.add({
-      name: 'sketch',
-      position: viewPosition,
-      orientation: new Cesium.CallbackProperty(() => {
-        return Cesium.Transforms.headingPitchRollQuaternion(
-          viewPosition,
-          Cesium.HeadingPitchRoll.fromDegrees(
-            viewHeading - horizontalViewAngle,
-            viewPitch,
-            0.5
-          )
-        )
-      }, false),
-      ellipsoid: {
-        radii: new Cesium.CallbackProperty(
-          () => new Cesium.Cartesian3(viewDistance, viewDistance, viewDistance),
-          false
-        ),
-        innerRadii: new Cesium.Cartesian3(2.0, 2.0, 2.0),
-        minimumClock: Cesium.Math.toRadians(-horizontalViewAngle / 2),
-        maximumClock: Cesium.Math.toRadians(horizontalViewAngle / 2),
-        minimumCone: Cesium.Math.toRadians(verticalViewAngle + 7.75),
-        maximumCone: Cesium.Math.toRadians(180 - verticalViewAngle - 7.75),
-        fill: false,
-        outline: true,
-        subdivisions: 256,
-        stackPartitions: 64,
-        slicePartitions: 64,
-        outlineColor: Cesium.Color.YELLOWGREEN
-      }
-    })
-  }
+    const createProfileChart = (pos: typeof profileItem, cb: (data: {
+        min: number;
+        value: (number | string)[][]
+    }) => void) => {
+        const ProfileData = []
+        const ProfileData_Lon = []
 
-  const getHeading = (from, to) => {
-    const result = new Cesium.Cartesian3()
-    const matrix4 = Cesium.Matrix4.inverse(Cesium.Transforms.eastNorthUpToFixedFrame(from), new Cesium.Matrix4())
-    Cesium.Matrix4.multiplyByPoint(matrix4, to, result)
-    Cesium.Cartesian3.normalize(result, result)
-    return Cesium.Math.toDegrees(Math.atan2(result.x, result.y))
-  }
+        let min = 0
 
-  const getPitch = (from, to) => {
-    const result = new Cesium.Cartesian3()
-    const matrix4 = Cesium.Matrix4.inverse(Cesium.Transforms.eastNorthUpToFixedFrame(from), new Cesium.Matrix4())
-    Cesium.Matrix4.multiplyByPoint(matrix4, to, result)
-    Cesium.Cartesian3.normalize(result, result)
-    return Cesium.Math.toDegrees(Math.asin(result.z))
-  }
+        for (let index = 0; index < pos.length; index++) {
+            const el = pos[index]
+            const m_distance = el.distance.toFixed(2)
 
-  const leftClickEvent = () => {
-    handler.setInputAction(((movement) => {
-      i++
-      if (i === 1) {
-        let startPosition = viewer.scene.pickPosition(movement.position)
-        if (!startPosition) return
-        viewPosition = startPosition
-        mouseMoveEvent()
-      }
-      if (i === 2) {
-        i = 0
-        let endPosition = viewer.scene.pickPosition(movement.position)
-        updatePosition(endPosition)
-        update()
-        stopDraw()
-      }
-    }) as Cesium.ScreenSpaceEventHandler.PositionedEventCallback, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-  }
+            const m_Lon = el.point.lon.toFixed(5)
+            const m_Lat = el.point.lat.toFixed(5)
+            const m_height = Number(el.point.height.toFixed(2))
 
-  const mouseMoveEvent = () => {
-    handler.setInputAction(((movement) => {
-      const endPosition = viewer.scene.pickPosition(movement.endPosition)
-      if (!endPosition) return
-      updatePosition(endPosition)
-      if (!sketch) {
-        drawSketch()
-      }
-    }) as Cesium.ScreenSpaceEventHandler.MotionEventCallback, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
-  }
+            if (m_height < min) {
+                min = m_height
+            }
+            var m_data = [m_distance, m_height]
+            ProfileData.push(m_data)
+            ProfileData_Lon.push([m_Lon, m_Lat])
+        }
 
-  const draw = () => {
-    if (handler) {
-      console.log('请先结束上次测量！')
-      return
+        cb({
+            min,
+            value: ProfileData
+        })
     }
-    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
-    leftClickEvent()
-    viewer.scene.camera.frustum.near = 100.0
-    viewer.scene.logarithmicDepthBuffer = true
-    viewer.scene.globe.enableLighting = false
-    viewer.scene.globe.showGroundAtmosphere = false
-  }
 
-  const stopDraw = () => {
-    if (handler) {
-      handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
-      handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
-      handler.destroy()
-      handler = null
+    return {
+        draw,
+        removeAll
     }
-  }
-
-  return {
-    draw,
-    removeAll
-  }
 }
 
 export {
-  useViewshedAnalysis
+    useProfileAnalysis
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.398",
+  "version": "0.0.400",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -8,5 +8,5 @@
   "author": "",
   "license": "ISC",
   "types": "./index.d.ts",
-  "description": "修复剖面分析点击位置不正确的bug"
+  "description": ""
 }