easy-three-utils 0.0.347 → 0.0.349

package/cesium/components/index.ts

@@ -1,10 +1,12 @@
 import Timeline from './react/Timeline/index.tsx'
+import ProFileEcharts from './react/ProFileEcharts/index.tsx'
 
 const components = {
     vue: {
     },
     react: {
-        Timeline
+        Timeline,
+        ProFileEcharts
     }
 }
 

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

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

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

@@ -0,0 +1,127 @@
+import React, { useEffect, useRef } from "react"
+import echarts from 'echarts'
+
+import Styles from './index.module.less'
+
+const ProFileEchartCom: React.FC<{
+    data: {
+        min: number
+        value: (number | string)[][]
+    }
+    display: boolean
+}> = (props) => {
+
+    const { data, display } = props
+
+    const chartRef = useRef(null)
+    const option = {
+        color: ['white'],
+        backgroundColor: 'rgba(6, 38, 68, 0.7)',
+        title: {
+            text: '剖面分析',
+            textStyle: {
+                color: 'white',
+            },
+            padding: [15, 15]
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        grid: {
+            x: 60,
+            x2: 40,
+            y2: 30
+        },
+        calculable: true,
+        xAxis: [
+            {
+                type: 'value',
+                max: 'dataMax',
+                scale: true,
+                axisLabel: {
+                    textStyle: {
+                        color: 'white'
+                    },
+                    formatter(value) {
+                        return value + "米"
+                    }
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: 'white'
+                    },
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                min: data.min,
+                scale: true,
+                axisLabel: {
+                    textStyle: {
+                        color: 'white'
+                    },
+                    formatter(value) {
+                        return value + "米"
+                    }
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: 'white'
+                    },
+                }
+            }
+        ],
+        series: [
+            {
+                name: '当前高度',
+                type: 'line',
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgba(58,77,233,0.8)'
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgba(58,77,233,0.3)'
+                        }
+                    ])
+                },
+                data: data.value
+            }
+        ]
+    }
+
+    useEffect(() => {
+        const chart = echarts.init(chartRef.current)
+        chart.setOption(option)
+
+        return () => {
+            chart.dispose()
+        }
+    }, [data])
+
+    const echartsResize = () => {
+        echarts.init(chartRef.current).resize()
+    }
+
+    window.addEventListener('resize', echartsResize)
+
+    useEffect(() => {
+        return () => {
+            window.removeEventListener('resize', echartsResize)
+        }
+    }, [])
+
+    return (
+        <>
+            <div className={Styles['profile-echarts-box']} style={{ display: display ? '' : 'none' }}>
+                <div ref={chartRef} className={Styles['profile-echarts']} />
+            </div>
+        </>
+    )
+}
+
+export default ProFileEchartCom

package/cesium/index.ts

@@ -13,6 +13,8 @@ type TCesiumUtilsType = {
   clipping: ReturnType<typeof hooks.useClipping>;
   weather: ReturnType<typeof hooks.useWeather>;
   measure: ReturnType<typeof hooks.useMeasure>;
+  slope: ReturnType<typeof hooks.useSlope>;
+  profileAnalysis: ReturnType<typeof hooks.useProfileAnalysis>;
 }
 
 let config;
@@ -89,7 +91,14 @@ const useCesium = () => {
     const measure = hooks.useMeasure(viewer, {
       distanceCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.MEASURE_DISTANCE),
       heightCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.MEASURE_HEIGHT),
-      areaCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.MEASURE_AREA)
+      areaCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.MEASURE_AREA),
+      altitudeCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.MEASURE_ALTITUDE),
+    })
+    const slope = hooks.useSlope(viewer, {
+      collection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.SLOPE)
+    })
+    const profileAnalysis = hooks.useProfileAnalysis(viewer, {
+      collection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.PROFILEANALYSIS)
     })
 
     if (config.controllerStyle === cesiumConfigDict.EControllerStyle.THREE) {
@@ -102,7 +111,9 @@ const useCesium = () => {
       drawPolygon,
       clipping,
       weather,
-      measure
+      measure,
+      slope,
+      profileAnalysis
     })
 
     handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

package/cesium/utils/index.ts

@@ -3,6 +3,8 @@ import { useDrawPolygon } from './useDrawPolygon'
 import { useClipping } from './useClipping'
 import { useWeather, EWeatherType } from './useWeather'
 import { useMeasure } from './useMeasure'
+import { useSlope } from './useSlope'
+import { useProfileAnalysis } from './useProfileAnalysis'
 
 const dict = {
   ECollectionWhiteListNames,
@@ -15,6 +17,8 @@ export {
   useClipping,
   useWeather,
   useMeasure,
+  useSlope,
+  useProfileAnalysis,
 
   dict
 }

package/cesium/{js → utils}/lib/CreatePolygonOnGround.js

@@ -1,16 +1,16 @@
-import CreateRemindertip from "./ReminderTip";
+// import CreateRemindertip from "./ReminderTip";
 import * as Cesium from 'cesium'
 
-const CreatePolygonOnGround = function (viewer, resultList, options, callback, cb) {
+const CreatePolygonOnGround = function ({ viewer, collection }, resultList, options, callback, cb) {
   if (!viewer) throw new Error("no viewer object!");
   options = options || {};
   let id = options.id || setSessionid(); //Polygon的id
-  if (viewer.entities.getById(id))
+  if (collection.entities.getById(id))
     throw new Error("the id parameter is an unique value");
   let color = options.color || Cesium.Color.RED; //Polygon的填充色
   let outlineColor = options.outlineColor || color.withAlpha(1); //Polygon的轮廓线颜色
   let outlineWidth = options.outlineWidth || 2; //Polygon的轮廓线宽度
-  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
   cb && cb(handler)
   let toolTip = "左键点击开始绘制";
   let anchorpoints = [];
@@ -29,7 +29,7 @@ const CreatePolygonOnGround = function (viewer, resultList, options, callback, c
       let dynamicPositions = new Cesium.CallbackProperty(function () {
         return new Cesium.PolygonHierarchy(anchorpoints);
       }, false);
-      polygon = viewer.entities.add({
+      polygon = collection.entities.add({
         name: "Polygon",
         id: id,
         polyline: {
@@ -68,7 +68,11 @@ const CreatePolygonOnGround = function (viewer, resultList, options, callback, c
     anchorpoints.pop();
     polygon.pottingPoint = anchorpoints;
     resultList.push(polygon);
+    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_DOWN)
+    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
     handler.destroy();
+    handler = null
     // CreateRemindertip(toolTip, event.position, false);
     drawStatus = false;
     if (typeof callback == "function") callback(polygon);

package/cesium/utils/useCustomCollection.ts

@@ -6,13 +6,26 @@ enum ECollectionWhiteListNames {
 
   MEASURE_DISTANCE = 'measure_distance',
   MEASURE_HEIGHT = 'measure_height',
-  MEASURE_AREA = 'measure_area'
+  MEASURE_AREA = 'measure_area',
+  MEASURE_ALTITUDE = 'measure_altitude',
+  PROFILEANALYSIS = 'profileAnalysis',
+
+  SLOPE = 'slope'
 }
 
 const useCustomCollection = (viewer: Cesium.Viewer) => {
 
   let collectionNames: string[] = ([])
-  let whiteList: string[] = ['polygon', 'polygon_node', 'measure_distance', 'measure_height', 'measure_area']
+  let whiteList: string[] = [
+    'polygon',
+    'polygon_node',
+    'measure_distance',
+    'measure_height',
+    'measure_area',
+    'measure_altitude',
+    'profileAnalysis',
+    'slope'
+  ]
 
   const addCollection = (name: string) => {
     const index = collectionNames.findIndex(item => item === name)

package/cesium/utils/useMeasure.ts

@@ -4,7 +4,8 @@ import * as turf from "@turf/turf"
 const useMeasure = (viewer: Cesium.Viewer, options: {
     distanceCollection: Cesium.CustomDataSource,
     heightCollection: Cesium.CustomDataSource,
-    areaCollection: Cesium.CustomDataSource
+    areaCollection: Cesium.CustomDataSource,
+    altitudeCollection: Cesium.CustomDataSource
 }) => {
 
     const angleMeasurement = () => {
@@ -107,7 +108,7 @@ const useMeasure = (viewer: Cesium.Viewer, options: {
                 position: p2,
                 label: {
                     text: angleDeg.toFixed(2) + '°',
-                    font: 'normal 22px MicroSoft YaHei',
+                    font: 'normal 28px MicroSoft YaHei',
                     style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                     fillColor: Cesium.Color.WHITE,
                     verticalOrigin: Cesium.VerticalOrigin.CENTER,
@@ -611,7 +612,7 @@ const useMeasure = (viewer: Cesium.Viewer, options: {
                 const now = Date.now()
                 if (now - lastClickTime < MIN_INTERVAL) return
                 lastClickTime = now
-                
+
                 let position = viewer.scene.pickPosition(e.position)
                 if (!position) {
                     const ellipsoid = viewer.scene.globe.ellipsoid
@@ -737,16 +738,83 @@ const useMeasure = (viewer: Cesium.Viewer, options: {
         }
     }
 
+    const altitudeMeasurement = () => {
+        let handler = null
+
+        const enable = () => {
+            disable();
+
+            (viewer.container as HTMLElement).style.cursor = "crosshair"
+
+            handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+            handler.setInputAction(async (event) => {
+                const cartesian = viewer.scene.pickPosition(event.position)
+                if (!cartesian) return
+
+                const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+                const lon = Cesium.Math.toDegrees(cartographic.longitude)
+                const lat = Cesium.Math.toDegrees(cartographic.latitude)
+                const height = await getHeightFromLonLat(lon, lat)
+
+                options.altitudeCollection.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(lon, lat, height + 2),
+                    point: {
+                        color: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
+                        outlineColor: Cesium.Color.WHITE,
+                        outlineWidth: 2,
+                        pixelSize: 10,
+                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+                    },
+                    label: {
+                        text: `${height.toFixed(2)} m`,
+                        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
+                    },
+                })
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+        }
+
+        const getHeightFromLonLat = async (lon, lat) => {
+            const positions = [Cesium.Cartographic.fromDegrees(lon, lat)]
+            const updated = await Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, positions)
+            return updated[0].height || 0
+        }
+
+        const disable = () => {
+            if (handler) {
+                handler.destroy()
+                handler = null
+            }
+            (viewer.container as HTMLElement).style.cursor = "default"
+        }
+
+        const removeAll = () => {
+            options.altitudeCollection.entities.removeAll()
+        }
+
+        return {
+            enable,
+            disable,
+            removeAll
+        }
+    }
+
     const angle = angleMeasurement()
     const distance = distanceMeasurement()
     const height = heightMeasurement()
     const area = areaMeasurement()
+    const altitude = altitudeMeasurement()
 
     return {
         angle,
         distance,
         height,
-        area
+        area,
+        altitude
     }
 }
 

package/cesium/utils/useProfileAnalysis.ts

@@ -0,0 +1,270 @@
+import * as Cesium from 'cesium'
+
+const useProfileAnalysis = (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>
+    }[] = []
+
+    class PolyLinePrimitive {
+        options: Cesium.Entity.ConstructorOptions
+        positions: Cesium.Cartesian3[]
+
+        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()
+        }
+
+        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 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)
+    }
+
+    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 = []
+    }
+
+    const removeAll = () => {
+        stopDraw()
+        options.collection.entities.removeAll()
+    }
+
+    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 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,
+                    font: '18px sans-serif',
+                    fillColor: Cesium.Color.GOLD,
+                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                    outlineWidth: 2,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    pixelOffset: new Cesium.Cartesian2(20, -20),
+                    heightReference: Cesium.HeightReference.NONE
+                }
+            })
+        }) as Cesium.ScreenSpaceEventHandler.PositionedEventCallback, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    }
+
+    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 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 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
+
+        return {
+            lat,
+            lon,
+            height
+        }
+    }
+
+    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 m_Item = {
+                point: cartesian3ToDegrees(positions[i + 1]),
+                distance: distance
+            }
+            profileItem.push(m_Item)
+        }
+        return distance.toFixed(2)
+    }
+
+    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 createProfileChart = (pos: typeof profileItem, cb: (data: {
+        min: number;
+        value: (number | string)[][]
+    }) => void) => {
+        const ProfileData = []
+        const ProfileData_Lon = []
+
+        let min = 0
+
+        for (let index = 0; index < pos.length; index++) {
+            const el = pos[index]
+            const m_distance = el.distance.toFixed(2)
+
+            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))
+
+            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])
+        }
+
+        cb({
+            min,
+            value: ProfileData
+        })
+    }
+
+    return {
+        draw,
+        removeAll
+    }
+}
+
+export {
+    useProfileAnalysis
+}