easy-three-utils 0.0.346 → 0.0.347

package/cesium/index.ts

@@ -87,7 +87,9 @@ const useCesium = () => {
     const clipping = hooks.useClipping(viewer)
     const weather = hooks.useWeather(viewer)
     const measure = hooks.useMeasure(viewer, {
-      distanceCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.MEASURE_DISTANCE)
+      distanceCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.MEASURE_DISTANCE),
+      heightCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.MEASURE_HEIGHT),
+      areaCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.MEASURE_AREA)
     })
 
     if (config.controllerStyle === cesiumConfigDict.EControllerStyle.THREE) {

package/cesium/utils/useCustomCollection.ts

@@ -5,12 +5,14 @@ enum ECollectionWhiteListNames {
   POLYGON = 'polygon',
 
   MEASURE_DISTANCE = 'measure_distance',
+  MEASURE_HEIGHT = 'measure_height',
+  MEASURE_AREA = 'measure_area'
 }
 
 const useCustomCollection = (viewer: Cesium.Viewer) => {
 
   let collectionNames: string[] = ([])
-  let whiteList: string[] = ['polygon', 'polygon_node']
+  let whiteList: string[] = ['polygon', 'polygon_node', 'measure_distance', 'measure_height', 'measure_area']
 
   const addCollection = (name: string) => {
     const index = collectionNames.findIndex(item => item === name)

package/cesium/utils/useMeasure.ts

@@ -1,17 +1,12 @@
 import * as Cesium from 'cesium'
+import * as turf from "@turf/turf"
 
 const useMeasure = (viewer: Cesium.Viewer, options: {
-    distanceCollection: Cesium.CustomDataSource
+    distanceCollection: Cesium.CustomDataSource,
+    heightCollection: Cesium.CustomDataSource,
+    areaCollection: Cesium.CustomDataSource
 }) => {
 
-    const point = {
-        color: Cesium.Color.fromCssColorString("rgb(249,157,11)"),
-        outlineColor: Cesium.Color.WHITE,
-        outlineWidth: 2,
-        pixelSize: 10,
-        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
-    }
-
     const angleMeasurement = () => {
         let anglePoints = []
         let angleEntities = []
@@ -66,7 +61,7 @@ const useMeasure = (viewer: Cesium.Viewer, options: {
                 }
             }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
 
-            angleMeasurementHandler.setInputAction(function (movement) {
+            angleMeasurementHandler.setInputAction((movement) => {
                 if (anglePoints.length > 0 && anglePoints.length < 3) {
                     const ray = viewer.camera.getPickRay(movement.endPosition)
                     const cartesian = viewer.scene.globe.pick(ray, viewer.scene)
@@ -154,11 +149,20 @@ const useMeasure = (viewer: Cesium.Viewer, options: {
     const distanceMeasurement = () => {
         let positions = []
         let tempPositions = []
+        let currentLineEntity: Cesium.Entity
         let handler = null
 
+        const point = {
+            color: Cesium.Color.fromCssColorString("rgb(249,157,11)"),
+            outlineColor: Cesium.Color.WHITE,
+            outlineWidth: 2,
+            pixelSize: 10,
+            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+        }
+
         const draw = () => {
             if (handler) {
-                console.log('请先右键结束上次测量！');
+                console.log('请使用右键结束上次测量！')
                 return
             }
             handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
@@ -168,6 +172,10 @@ const useMeasure = (viewer: Cesium.Viewer, options: {
         }
 
         const stopDraw = () => {
+            if (currentLineEntity) {
+                options.distanceCollection.entities.remove(currentLineEntity)
+            }
+
             if (handler) {
                 handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
                 handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
@@ -181,11 +189,12 @@ const useMeasure = (viewer: Cesium.Viewer, options: {
         }
 
         const removeAll = () => {
+            stopDraw()
             options.distanceCollection.entities.removeAll()
         }
 
         const createLine = () => {
-            options.distanceCollection.entities.add({
+            currentLineEntity = options.distanceCollection.entities.add({
                 polyline: {
                     positions: new Cesium.CallbackProperty(() => tempPositions, false),
                     material: Cesium.Color.fromCssColorString("rgb(249,157,11)"),
@@ -232,7 +241,14 @@ const useMeasure = (viewer: Cesium.Viewer, options: {
         }
 
         const leftClickEvent = () => {
+            let lastClickTime = 0
+            const MIN_INTERVAL = 250
+
             handler.setInputAction(event => {
+                const now = Date.now()
+                if (now - lastClickTime < MIN_INTERVAL) return
+                lastClickTime = now
+
                 let position = viewer.scene.pickPosition(event.position)
                 if (!position)
                     position = viewer.scene.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid)
@@ -266,7 +282,7 @@ const useMeasure = (viewer: Cesium.Viewer, options: {
 
         const rightClickEvent = () => {
             handler.setInputAction(() => {
-                if (positions.length < 1) {
+                if (positions.length <= 1) {
                     removeAll()
                     stopDraw()
                 } else {
@@ -290,15 +306,447 @@ const useMeasure = (viewer: Cesium.Viewer, options: {
     }
 
     const heightMeasurement = () => {
+        let positions = []
+        let currentLineEntity: Cesium.Entity
+        let currentPointEntities: Cesium.Entity[] = []
+        let currentLabelEntity: Cesium.Entity
+        let handler = null
+
+        const cartesian3Point3 = (pos) => {
+            const ellipsoid = viewer.scene.globe.ellipsoid
+            const cartographic = ellipsoid.cartesianToCartographic(pos)
+            return [
+                Cesium.Math.toDegrees(cartographic.longitude),
+                Cesium.Math.toDegrees(cartographic.latitude),
+                cartographic.height
+            ]
+        }
+
+        const draw = () => {
+            if (handler) {
+                console.log('请先结束上次测量！')
+                return
+            }
+            handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+            leftClickEvent()
+            mouseMoveEvent()
+        }
+
+        const createLine = () => {
+            currentLineEntity = options.heightCollection.entities.add({
+                polyline: {
+                    positions: new Cesium.CallbackProperty(() => positions, false),
+                    width: 2,
+                    material: Cesium.Color.fromCssColorString("rgb(249,157,11)")
+                }
+            })
+        }
+
+        const createPoint = (index) => {
+            const entity = options.heightCollection.entities.add({
+                position: new Cesium.CallbackProperty(() => positions[index], false) as Cesium.CallbackPositionProperty,
+                point: {
+                    color: Cesium.Color.fromCssColorString("rgb(249,157,11)"),
+                    outlineColor: Cesium.Color.WHITE,
+                    outlineWidth: 2,
+                    pixelSize: 10
+                }
+            })
+
+            currentPointEntities.push(entity)
+        }
+
+        const createLabel = () => {
+            currentLabelEntity = options.heightCollection.entities.add({
+                position: new Cesium.CallbackProperty(() => positions[1], false) as Cesium.CallbackPositionProperty,
+                label: {
+                    text: "",
+                    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
+                }
+            })
+        }
+
+        const leftClickEvent = () => {
+            let lastClickTime = 0
+            const MIN_INTERVAL = 250
+
+            handler.setInputAction(e => {
+                const now = Date.now()
+                if (now - lastClickTime < MIN_INTERVAL) return
+                lastClickTime = now
+
+                let position = viewer.scene.pickPosition(e.position)
+                if (!position) position = viewer.scene.camera.pickEllipsoid(e.position, viewer.scene.globe.ellipsoid)
+                if (!position) return
+
+                if (positions.length === 0) {
+                    positions.push(position)
+                    createPoint(0)
+                    createLine()
+                    createLabel()
+                } else if (positions.length > 2) {
+                    options.heightCollection.entities.add({
+                        polyline: {
+                            positions: positions,
+                            width: 2,
+                            material: Cesium.Color.fromCssColorString("rgb(249,157,11)")
+                        }
+                    })
+
+                    positions.forEach(pos => {
+                        options.heightCollection.entities.add({
+                            position: pos,
+                            point: {
+                                color: Cesium.Color.fromCssColorString("rgb(249,157,11)"),
+                                outlineColor: Cesium.Color.WHITE,
+                                outlineWidth: 2,
+                                pixelSize: 10
+                            }
+                        })
+                    })
+
+                    options.heightCollection.entities.add({
+                        position: positions[1],
+                        label: {
+                            text: currentLabelEntity.label.text,
+                            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
+                        }
+                    })
+
+                    stopDraw()
+                }
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+        }
+
+        const mouseMoveEvent = () => {
+            handler.setInputAction(e => {
+                let position = viewer.scene.pickPosition(e.endPosition)
+                if (!position) position = viewer.scene.camera.pickEllipsoid(e.startPosition, viewer.scene.globe.ellipsoid)
+                if (!position) return
+
+                handleMove(position)
+            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+        }
+
+        const handleMove = (position) => {
+            if (positions.length < 1) return
+            const first = cartesian3Point3(positions[0])
+            const move = cartesian3Point3(position)
+
+            const h = move[2] - first[2]
+            first[2] = move[2]
+            const twoPos = Cesium.Cartesian3.fromDegrees(first[0], first[1], move[2])
+
+            if (positions.length < 2) {
+                positions.push(twoPos, position)
+                createPoint(1)
+                createPoint(2)
+            } else {
+                positions[1] = twoPos
+                positions[2] = position
+                if (currentLabelEntity) {
+                    (currentLabelEntity.label.text as any) = `高度：${h.toFixed(3)} 米`
+                }
+            }
+        }
+
+        const stopDraw = () => {
+            if (handler) {
+                handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+                handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+                handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+                handler.destroy()
+                handler = null
+            }
+
+            if (currentLineEntity) {
+                options.heightCollection.entities.remove(currentLineEntity)
+                currentLineEntity = null
+            }
+            if (currentLabelEntity) {
+                options.heightCollection.entities.remove(currentLabelEntity)
+                currentLabelEntity = null
+            }
+            if (currentPointEntities.length) {
+                currentPointEntities.forEach(entity => options.heightCollection.entities.remove(entity))
+                currentPointEntities = []
+            }
+
+            positions = []
+        }
+
+        const removeAll = () => {
+            stopDraw()
+            options.heightCollection.entities.removeAll()
+        }
+
+        return {
+            draw,
+            removeAll
+        }
+    }
+
+    const areaMeasurement = () => {
+        let handler = null
+        let currentPolygonEntity = null
+        let currentLabelEntity = null
+        let positions = []
+        let tempPositions = []
+        let height = undefined
+
+        const draw = () => {
+            if (handler) {
+                console.log('请使用右键结束上次测量！')
+                return
+            }
+            handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+            leftClickEvent()
+            mouseMoveEvent()
+            rightClickEvent()
+        }
+
+        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
+            }
+
+            tempPositions = []
+            positions = []
+            currentPolygonEntity = null
+            currentLabelEntity = null
+            height = undefined
+        }
+
+        const removeAll = () => {
+            stopDraw()
+            options.areaCollection.entities.removeAll()
+        }
+
+        const createPolygon = () => {
+            currentPolygonEntity = options.areaCollection.entities.add({
+                polygon: {
+                    hierarchy: new Cesium.CallbackProperty(() => {
+                        return new Cesium.PolygonHierarchy(tempPositions)
+                    }, false),
+                    material: Cesium.Color.fromCssColorString("rgb(249, 157, 11,.6)")
+                },
+                polyline: {
+                    clampToGround: true,
+                    positions: new Cesium.CallbackProperty(() => {
+                        return tempPositions.concat(tempPositions[0])
+                    }, false),
+                    width: 1,
+                    material: new Cesium.PolylineOutlineMaterialProperty({
+                        outlineWidth: 2,
+                        outlineColor: Cesium.Color.WHITE
+                    })
+                }
+            })
+        }
+
+        const createPoint = () => {
+            options.areaCollection.entities.add({
+                position: positions[positions.length - 1],
+                point: {
+                    color: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
+                    outlineColor: Cesium.Color.WHITE,
+                    outlineWidth: 2,
+                    pixelSize: 10,
+                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+                }
+            })
+        }
+
+        const createLabel = () => {
+            currentLabelEntity = options.areaCollection.entities.add({
+                position: new Cesium.CallbackProperty(() => getCenterPosition(), false) as Cesium.CallbackPositionProperty,
+                label: {
+                    text: new Cesium.CallbackProperty(() => {
+                        return "面积 " + computeArea(tempPositions)
+                    }, false),
+                    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,
+                    disableDepthTestDistance: Number.POSITIVE_INFINITY
+                }
+            })
+        }
+
+        const getCenterPosition = () => {
+            if (tempPositions.length < 3) return tempPositions[0]
+            const points = tempPositions.map(p => {
+                const c = cartesian3ToPoint3D(p)
+                return [c.x, c.y]
+            })
+            const geo = turf.lineString(points)
+            const bbox = turf.bbox(geo)
+            const bboxPolygon = turf.bboxPolygon(bbox)
+            const center = turf.center(bboxPolygon)
+            const [lon, lat] = center.geometry.coordinates
+            return Cesium.Cartesian3.fromDegrees(lon, lat, height + 0.3)
+        }
+
+        const leftClickEvent = () => {
+            let lastClickTime = 0
+            const MIN_INTERVAL = 250
+
+            handler.setInputAction(e => {
+                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
+                    position = viewer.scene.camera.pickEllipsoid(e.position, ellipsoid)
+                }
+                if (!position) return
+
+                positions.push(position)
+                height = unifiedHeight(positions, height)
+                if (positions.length === 1) {
+                    createPolygon()
+                }
+                createPoint()
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+        }
+
+        const mouseMoveEvent = () => {
+            handler.setInputAction(e => {
+                let position = viewer.scene.pickPosition(e.endPosition)
+                if (!position)
+                    position = viewer.scene.camera.pickEllipsoid(
+                        e.startPosition,
+                        viewer.scene.globe.ellipsoid
+                    )
+                if (!position) return
+                handleMoveEvent(position)
+            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+        }
+
+        const rightClickEvent = () => {
+            handler.setInputAction(e => {
+                if (positions.length < 3) {
+                    stopDraw()
+                    removeAll()
+                } else {
+                    tempPositions = [...positions]
+                    currentPolygonEntity.polygon.hierarchy = new Cesium.PolygonHierarchy(tempPositions)
+                    currentLabelEntity.position = getCenterPosition()
+                    currentLabelEntity.label.text = "总面积为 " + computeArea(positions)
+                    stopDraw()
+                }
+            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+        }
+
+        const handleMoveEvent = (position) => {
+            if (positions.length < 1) return
+            height = unifiedHeight(positions, height)
+            tempPositions = positions.concat(position)
+            if (tempPositions.length >= 3 && !currentLabelEntity) createLabel()
+        }
+
+        const unifiedHeight = (positions, height) => {
+            if (!height) height = getPositionHeight(positions[0])
+            for (let i = 0; i < positions.length; i++) {
+                const p = cartesian3ToPoint3D(positions[i])
+                positions[i] = Cesium.Cartesian3.fromDegrees(p.x, p.y, height)
+            }
+            return height
+        }
+
+        const computeArea = (points) => {
+            let res = 0
+            for (let i = 0; i < points.length - 2; i++) {
+                const j = (i + 1) % points.length
+                const k = (i + 2) % points.length
+                const angle = Angle(points[i], points[j], points[k])
+                const dis1 = distance(points[j], points[0])
+                const dis2 = distance(points[k], points[0])
+                res += (dis1 * dis2 * Math.sin(angle)) / 2
+            }
+            return res < 1000000
+                ? Math.abs(res).toFixed(4) + " 平方米"
+                : Math.abs(res / 1000000).toFixed(4) + " 平方公里"
+        }
+
+        const Bearing = (from, to) => {
+            from = Cesium.Cartographic.fromCartesian(from)
+            to = Cesium.Cartographic.fromCartesian(to)
+            const lat1 = from.latitude, lon1 = from.longitude
+            const lat2 = to.latitude, lon2 = to.longitude
+            let angle = -Math.atan2(
+                Math.sin(lon1 - lon2) * Math.cos(lat2),
+                Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2)
+            )
+            if (angle < 0) angle += Math.PI * 2.0
+            return (angle * 180.0) / Math.PI
+        }
 
+        const Angle = (p1, p2, p3) => {
+            const b21 = Bearing(p2, p1)
+            const b23 = Bearing(p2, p3)
+            let angle = b21 - b23
+            if (angle < 0) angle += 360
+            return angle
+        }
+
+        const distance = (p1, p2) => {
+            const c1 = Cesium.Cartographic.fromCartesian(p1)
+            const c2 = Cesium.Cartographic.fromCartesian(p2)
+            const geodesic = new Cesium.EllipsoidGeodesic()
+            geodesic.setEndPoints(c1, c2)
+            let s = geodesic.surfaceDistance
+            return Math.sqrt(s * s + Math.pow(c2.height - c1.height, 2))
+        }
+
+        const getPositionHeight = (p) => {
+            const c = Cesium.Cartographic.fromCartesian(p)
+            return c.height
+        }
+
+        const cartesian3ToPoint3D = (p) => {
+            const c = Cesium.Cartographic.fromCartesian(p)
+            return {
+                x: Cesium.Math.toDegrees(c.longitude),
+                y: Cesium.Math.toDegrees(c.latitude),
+                z: c.height
+            }
+        }
+
+        return {
+            draw,
+            removeAll
+        }
     }
 
     const angle = angleMeasurement()
     const distance = distanceMeasurement()
+    const height = heightMeasurement()
+    const area = areaMeasurement()
 
     return {
         angle,
-        distance
+        distance,
+        height,
+        area
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.346",
+  "version": "0.0.347",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"