easy-three-utils 0.0.345 → 0.0.346

package/cesium/index.ts

@@ -82,11 +82,13 @@ const useCesium = () => {
     const customCollection = hooks.useCustomCollection(viewer)
     const drawPolygon = hooks.useDrawPolygon(viewer, {
       nodeCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.POLYGON_NODE),
-      polygonCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.POLYGON),
+      polygonCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.POLYGON)
     })
     const clipping = hooks.useClipping(viewer)
     const weather = hooks.useWeather(viewer)
-    const measure = hooks.useMeasure(viewer)
+    const measure = hooks.useMeasure(viewer, {
+      distanceCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.MEASURE_DISTANCE)
+    })
 
     if (config.controllerStyle === cesiumConfigDict.EControllerStyle.THREE) {
       updateController(viewer)

package/cesium/utils/useCustomCollection.ts

@@ -1,8 +1,10 @@
 import * as Cesium from 'cesium'
 
 enum ECollectionWhiteListNames {
+  POLYGON_NODE = 'polygon_node',
   POLYGON = 'polygon',
-  POLYGON_NODE = 'polygon_node'
+
+  MEASURE_DISTANCE = 'measure_distance',
 }
 
 const useCustomCollection = (viewer: Cesium.Viewer) => {

package/cesium/utils/useMeasure.ts

@@ -1,6 +1,16 @@
 import * as Cesium from 'cesium'
 
-const useMeasure = (viewer: Cesium.Viewer) => {
+const useMeasure = (viewer: Cesium.Viewer, options: {
+    distanceCollection: 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 = []
@@ -15,14 +25,14 @@ const useMeasure = (viewer: Cesium.Viewer) => {
                 angleMeasurementHandler = null
             }
 
-            angleMeasurementHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+            angleMeasurementHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
 
             angleMeasurementHandler.setInputAction((movement) => {
-                const ray = viewer.camera.getPickRay(movement.position);
-                const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+                const ray = viewer.camera.getPickRay(movement.position)
+                const cartesian = viewer.scene.globe.pick(ray, viewer.scene)
 
                 if (cartesian) {
-                    anglePoints.push(cartesian);
+                    anglePoints.push(cartesian)
 
                     const pointEntity = viewer.entities.add({
                         position: cartesian,
@@ -33,7 +43,7 @@ const useMeasure = (viewer: Cesium.Viewer) => {
                             pixelSize: 10,
                             heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                         }
-                    });
+                    })
                     angleEntities.push(pointEntity)
 
                     if (anglePoints.length >= 2) {
@@ -44,7 +54,7 @@ const useMeasure = (viewer: Cesium.Viewer) => {
                                 material: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
                                 clampToGround: true,
                             }
-                        });
+                        })
                         angleLines.push(lineEntity)
                     }
 
@@ -70,7 +80,7 @@ const useMeasure = (viewer: Cesium.Viewer) => {
                                     material: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
                                     clampToGround: true
                                 }
-                            });
+                            })
                             angleLines.push(lineEntity)
                         } else {
                             const line = angleLines[angleLines.length - 1]
@@ -78,7 +88,7 @@ const useMeasure = (viewer: Cesium.Viewer) => {
                         }
                     }
                 }
-            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
         }
 
         const calculateAndDisplayAngle = () => {
@@ -110,7 +120,7 @@ const useMeasure = (viewer: Cesium.Viewer) => {
                     heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                     disableDepthTestDistance: Number.POSITIVE_INFINITY
                 }
-            });
+            })
             angleLabels.push(angleLabel)
         }
 
@@ -141,10 +151,154 @@ const useMeasure = (viewer: Cesium.Viewer) => {
         }
     }
 
+    const distanceMeasurement = () => {
+        let positions = []
+        let tempPositions = []
+        let handler = null
+
+        const draw = () => {
+            if (handler) {
+                console.log('请先右键结束上次测量！');
+                return
+            }
+            handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+            leftClickEvent()
+            rightClickEvent()
+            mouseMoveEvent()
+        }
+
+        const stopDraw = () => {
+            if (handler) {
+                handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+                handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+                handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+                handler.destroy()
+                handler = null
+            }
+
+            positions = []
+            tempPositions = []
+        }
+
+        const removeAll = () => {
+            options.distanceCollection.entities.removeAll()
+        }
+
+        const createLine = () => {
+            options.distanceCollection.entities.add({
+                polyline: {
+                    positions: new Cesium.CallbackProperty(() => tempPositions, false),
+                    material: Cesium.Color.fromCssColorString("rgb(249,157,11)"),
+                    width: 2,
+                    clampToGround: true
+                }
+            })
+        }
+
+        const createPoint = () => {
+            const pos = positions[positions.length - 1]
+            const text = getSpaceDistance(positions) + " 米"
+            options.distanceCollection.entities.add({
+                position: pos,
+                label: {
+                    text: positions.length === 1 ? '起始点' : 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,
+                    heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+                    disableDepthTestDistance: Number.POSITIVE_INFINITY
+                },
+                point
+            })
+        }
+
+        const getSpaceDistance = (positions) => {
+            if (positions.length < 2) return 0
+            let distance = 0
+
+            for (let i = 0; i < positions.length - 1; i++) {
+                const c1 = Cesium.Cartographic.fromCartesian(positions[i])
+                const c2 = Cesium.Cartographic.fromCartesian(positions[i + 1])
+                const geodesic = new Cesium.EllipsoidGeodesic(c1, c2)
+                let s = geodesic.surfaceDistance
+                s = Math.sqrt(Math.pow(s, 2) + Math.pow(c2.height - c1.height, 2))
+                distance += s
+            }
+
+            return distance.toFixed(2)
+        }
+
+        const leftClickEvent = () => {
+            handler.setInputAction(event => {
+                let position = viewer.scene.pickPosition(event.position)
+                if (!position)
+                    position = viewer.scene.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid)
+                if (!position) return
+
+                positions.push(position)
+
+                if (positions.length === 1) {
+                    createPoint()
+                    createLine()
+                } else {
+                    createPoint()
+                }
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+        }
+
+        const mouseMoveEvent = () => {
+            handler.setInputAction(event => {
+                let position = viewer.scene.pickPosition(event.endPosition)
+                if (!position)
+                    position = viewer.scene.camera.pickEllipsoid(event.endPosition, viewer.scene.globe.ellipsoid)
+                if (!position) return
+                handleMoveEvent(position)
+            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+        }
+
+        const handleMoveEvent = (position) => {
+            if (positions.length < 1) return
+            tempPositions = positions.concat(position)
+        }
+
+        const rightClickEvent = () => {
+            handler.setInputAction(() => {
+                if (positions.length < 1) {
+                    removeAll()
+                    stopDraw()
+                } else {
+                    options.distanceCollection.entities.add({
+                        polyline: {
+                            positions: positions,
+                            material: Cesium.Color.fromCssColorString("rgb(249,157,11)"),
+                            width: 2,
+                            clampToGround: true
+                        }
+                    })
+                    stopDraw()
+                }
+            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+        }
+
+        return {
+            draw,
+            removeAll
+        }
+    }
+
+    const heightMeasurement = () => {
+
+    }
+
     const angle = angleMeasurement()
+    const distance = distanceMeasurement()
 
     return {
-        angle
+        angle,
+        distance
     }
 }
 

package/cesium/utils/usePath.ts

@@ -1,6 +1,6 @@
 import * as Cesium from 'cesium'
 
-export enum EPlayStatus {
+export enum EMovementType {
     SPEED = 'speed',
     TIME = 'time'
 }
@@ -14,14 +14,14 @@ export interface IPathType {
     modelParams: {
         id: string;
         name: string;
-        uri: string;
+        url: string;
     };
     path: {
         duration: number;
         point: Cesium.Cartesian3;
         speed: number;
     }[];
-    playStatus: EPlayStatus;
+    movementType: EMovementType;
     totalDuration: number;
 }
 
@@ -40,11 +40,11 @@ const usePath = () => {
                 }
                 if (i > 0) {
                     const distance = Cesium.Cartesian3.distance(item.path[i - 1].point, value.point).toFixed();
-                    if (item.playStatus === EPlayStatus.SPEED) {
+                    if (item.movementType === EMovementType.SPEED) {
                         const time = Number(distance) / value.speed
                         item.totalDuration = item.totalDuration + time
                         property.addSample(Cesium.JulianDate.addSeconds(startTime, item.totalDuration, new Cesium.JulianDate()), value.point);
-                    } else if (item.playStatus === EPlayStatus.TIME) {
+                    } else if (item.movementType === EMovementType.TIME) {
                         item.totalDuration = item.totalDuration + Number(value.duration)
                         property.addSample(Cesium.JulianDate.addSeconds(startTime, item.totalDuration, new Cesium.JulianDate()), value.point);
                     }
@@ -62,7 +62,7 @@ const usePath = () => {
                     position: property,
                     orientation: new Cesium.VelocityOrientationProperty(property),
                     model: {
-                        uri: item.modelParams.uri,
+                        uri: item.modelParams.url,
                         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                     }
                 })
@@ -76,22 +76,11 @@ const usePath = () => {
 
         viewer.clock.currentTime = startTime.clone();
         viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
-        viewer.clock.shouldAnimate = true;
         viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
     }
 
-    const controlAction = (viewer: Cesium.Viewer, status: EControlAction) => {
-        viewer.clock.shouldAnimate = (status === EControlAction.PAUSE ? false : true)
-    }
-
-    const reset = () => {
-        //todo
-    }
-
     return {
         playAnimation,
-        controlAction,
-        reset
     }
 }
 

package/cesium/utils/useWeather.ts

@@ -104,7 +104,7 @@ const useWeather = (viewer: Cesium.Viewer) => {
                     return color;
                 }
             }
-        });
+        })
         viewer.scene.postProcessStages.add(stage);
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.345",
+  "version": "0.0.346",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -8,5 +8,5 @@
   "author": "",
   "license": "ISC",
   "types": "./index.d.ts",
-  "description": "延长j标使用时间"
+  "description": "更新长度测量"
 }