easy-three-utils 0.0.397 → 0.0.398

package/cesium/components/react/ProFileEcharts/index.module.less

@@ -1,11 +1,8 @@
 .profile-echarts-box {
-    position: absolute;
-    bottom: 30px;
-    left: 20vw;
-    z-index: 180;
 
     .profile-echarts {
-        width: 60vw;
+        min-width: 500px;
         height: 300px;
+        width: 100%;
     }
 }

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

@@ -9,6 +9,7 @@ const ProFileEchartCom: React.FC<{
         value: (number | string)[][]
     }
     display: boolean
+    style?: React.CSSProperties
 }> = memo((props) => {
 
     const { data, display } = props
@@ -117,7 +118,7 @@ const ProFileEchartCom: React.FC<{
 
     return (
         <>
-            <div className={Styles['profile-echarts-box']} style={{ display: display ? '' : 'none' }}>
+            <div className={Styles['profile-echarts-box']} style={{ display: display ? '' : 'none', ...props.style }}>
                 <div ref={chartRef} className={Styles['profile-echarts']} />
             </div>
         </>

package/cesium/utils/useProfileAnalysis.ts

@@ -1,271 +1,303 @@
 import * as Cesium from 'cesium'
+import glsl from "../glsl/viewable"
 
-const useProfileAnalysis = (viewer: Cesium.Viewer, options: {
-    collection: Cesium.CustomDataSource
+const useViewshedAnalysis = (viewer: Cesium.Viewer, options: {
+  collection: Cesium.CustomDataSource
 }) => {
 
-    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>
-    }[] = []
+  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
 
-    class PolyLinePrimitive {
-        options: Cesium.Entity.ConstructorOptions
-        positions: Cesium.Cartesian3[]
+  const add = () => {
+    createLightCamera()
+    createShadowMap()
+    drawFrustumOutline()
+    drawSketch()
+    createPostStage()
+  }
 
-        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 update = () => {
+    removeAll()
+    add()
+  }
 
-        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)
-        }
-    }
+  const removeAll = () => {
+    stopDraw()
 
-    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 as any)._imageryLayerCollection)
-        leftClickEvent()
-        mouseMoveEvent()
-        rightClickEvent(cb)
+    if (sketch) {
+      options.collection.entities.remove(sketch)
+      sketch = 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 (postStage) {
+      viewer.scene.postProcessStages.remove(postStage)
+      postStage = null
     }
-
-    const removeAll = () => {
-        stopDraw()
-        options.collection.entities.removeAll()
+    if (frustumOutline) {
+      viewer.scene.primitives.remove(frustumOutline)
+      frustumOutline = null
     }
+  }
 
-    const leftClickEvent = () => {
-        handler.setInputAction(((movement) => {
-            cartesian = viewer.scene.pickPosition(movement.position)
-            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 updatePosition = (position) => {
+    viewDistance = Cesium.Cartesian3.distance(viewPosition, position)
+    viewHeading = getHeading(viewPosition, position)
+    viewPitch = getPitch(viewPosition, position)
+  }
 
-            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 createLightCamera = () => {
+    const camera = new Cesium.Camera(viewer.scene)
+    camera.position = viewPosition
+    camera.frustum.near = viewDistance * 0.001
+    camera.frustum.far = viewDistance
 
-    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)
-    }
+    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 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)
-    }
+    camera.setView({
+      destination: viewPosition,
+      orientation: {
+        heading: Cesium.Math.toRadians(viewHeading || 0),
+        pitch: Cesium.Math.toRadians(viewPitch || 0),
+        roll: 0
+      }
+    })
+    lightCamera = camera
+  }
 
-    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 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
+  }
 
-        return {
-            lat,
-            lon,
-            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)
+  }
 
-    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 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 m_Item = {
-                point: cartesian3ToDegrees(positions[i + 1]),
-                distance: distance
-            }
-            profileItem.push(m_Item)
-        }
-        return distance.toFixed(2)
-    }
+    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 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)
-        }
-    }
+    frustumOutline = viewer.scene.primitives.add(
+      new Cesium.Primitive({
+        geometryInstances: [instance],
+        appearance: new Cesium.PerInstanceColorAppearance({
+          flat: true,
+          translucent: false
+        })
+      })
+    )
+  }
 
-    const createProfileChart = (pos: typeof profileItem, cb: (data: {
-        min: number;
-        value: (number | string)[][]
-    }) => void) => {
-        const ProfileData = []
-        const ProfileData_Lon = []
+  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
+      }
+    })
+  }
 
-        let min = 0
+  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))
+  }
 
-        for (let index = 0; index < pos.length; index++) {
-            const el = pos[index]
-            const m_distance = el.distance.toFixed(2)
+  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))
+  }
 
-            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 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)
+  }
 
-            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 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)
+  }
 
-        cb({
-            min,
-            value: ProfileData
-        })
+  const draw = () => {
+    if (handler) {
+      console.log('请先结束上次测量！')
+      return
     }
+    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
+  }
 
-    return {
-        draw,
-        removeAll
+  const stopDraw = () => {
+    if (handler) {
+      handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+      handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+      handler.destroy()
+      handler = null
     }
+  }
+
+  return {
+    draw,
+    removeAll
+  }
 }
 
 export {
-    useProfileAnalysis
+  useViewshedAnalysis
 }

package/package.json

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