easy-three-utils 0.0.347 → 0.0.349

package/cesium/utils/useSlope.ts

@@ -0,0 +1,300 @@
+import * as Cesium from "cesium"
+import * as turf from "@turf/turf"
+import CreatePolygonOnGround from "./lib/CreatePolygonOnGround"
+// import CreateRemindertip from "./lib/ReminderTip"
+
+const useSlope = (viewer: Cesium.Viewer, options: {
+    collection: Cesium.CustomDataSource
+}) => {
+
+    let result = []
+    // let handler = null
+    // let toolTip = ""
+    let arrowWidth = 20
+
+    const Cartesian3ListToWGS84 = (cartesianList) => {
+        const ellipsoid = Cesium.Ellipsoid.WGS84
+        return cartesianList.map((cartesian) => {
+            const cartographic = ellipsoid.cartesianToCartographic(cartesian)
+            return {
+                lng: Cesium.Math.toDegrees(cartographic.longitude),
+                lat: Cesium.Math.toDegrees(cartographic.latitude),
+                alt: cartographic.height,
+            }
+        })
+    }
+
+    const calculateSlopeColor = (value, alpha) => {
+        if (value < 0.0087) return `rgba(85,182,43,${alpha})`
+        if (value < 0.0349) return `rgba(135,211,43,${alpha})`
+        if (value < 0.0874) return `rgba(204,244,44,${alpha})`
+        if (value < 0.2679) return `rgba(245,233,44,${alpha})`
+        if (value < 0.7002) return `rgba(255,138,43,${alpha})`
+        if (value < 1.4281) return `rgba(255,84,43,${alpha})`
+        return `rgba(255,32,43,${alpha})`
+    }
+
+    // const openTip = () => {
+    //     handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+    //     handler.setInputAction((movement) => {
+    //         const pick = viewer.scene.pick(movement.endPosition)
+    //         if (pick && pick.id && pick.id.type === "SlopeAspect") {
+    //             toolTip = pick.id.value.toFixed(2)
+    //             CreateRemindertip(toolTip, movement.endPosition, true)
+    //         } else {
+    //             toolTip = ""
+    //             CreateRemindertip(toolTip, movement.endPosition, false)
+    //         }
+    //     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+    // }
+
+    // const closeTip = () => {
+    //     if (handler) {
+    //         handler.destroy()
+    //         handler = null
+    //     }
+    // }
+
+    const drawByDistance = (distance = 0.1, onDrawStart?: (ev: () => void) => void, onComplete?: () => void) => {
+        const width = distance * 200 > 35 ? 35 : distance * 200
+        arrowWidth = width < 15 ? 15 : width
+
+        CreatePolygonOnGround({
+            viewer,
+            collection: options.collection
+        }, [],
+            {
+                color: Cesium.Color.RED.withAlpha(0.1),
+                outlineColor: Cesium.Color.YELLOW,
+                outlineWidth: 2,
+            },
+            (polygon) => {
+                const degrees = Cartesian3ListToWGS84(polygon.pottingPoint)
+                options.collection.entities.remove(polygon)
+
+                const boundary = degrees.map((p) => [p.lng, p.lat])
+                const bbox = turf.bbox(turf.polygon([boundary.concat([boundary[0]])]))
+                const mask = turf.polygon([boundary.concat([boundary[0]])])
+                const gridSquare = turf.squareGrid(bbox, distance, { mask })
+                createEllipse(gridSquare)
+
+                onComplete && onComplete()
+            },
+            (drawHandler: () => void) => onDrawStart && onDrawStart(drawHandler)
+        )
+    }
+
+    const drawByNum = (num = 10, onDrawStart?: (ev: () => void) => void, onComplete?: () => void) => {
+        CreatePolygonOnGround({
+            viewer,
+            collection: options.collection
+        }, [],
+            {
+                color: Cesium.Color.RED.withAlpha(0.1),
+                outlineColor: Cesium.Color.YELLOW,
+                outlineWidth: 2,
+            },
+            (polygon) => {
+                const degrees = Cartesian3ListToWGS84(polygon.pottingPoint)
+                options.collection.entities.remove(polygon)
+
+                const boundary = degrees.map((p) => [p.lng, p.lat])
+                const bbox = turf.bbox(turf.polygon([boundary.concat([boundary[0]])]))
+
+                const [minX, minY, maxX, maxY] = bbox
+                const step = Math.max(maxX - minX, maxY - minY) / num
+
+                const width = step * 2000 > 35 ? 35 : step * 2000
+                arrowWidth = width < 15 ? 15 : width
+
+                const mask = turf.polygon([boundary.concat([boundary[0]])])
+                const gridSquare = turf.squareGrid(bbox, step, {
+                    units: "degrees",
+                    mask,
+                })
+                createEllipse(gridSquare)
+
+                onComplete && onComplete()
+            },
+            (drawHandler: () => void) => { onDrawStart && onDrawStart(drawHandler) }
+        )
+    }
+
+    const createEllipse = (gridSquare) => {
+        const boxResults = []
+
+        for (const feature of gridSquare.features) {
+            const coordinates = feature.geometry.coordinates[0]
+            const centerdegree = [
+                (coordinates[0][0] + coordinates[2][0]) / 2,
+                (coordinates[0][1] + coordinates[2][1]) / 2,
+            ]
+            const centerCarto = Cesium.Cartographic.fromDegrees(
+                centerdegree[0],
+                centerdegree[1]
+            )
+            boxResults.push(centerCarto)
+
+            for (let i = 0; i < coordinates.length; i++) {
+                const coord = coordinates[i]
+                const carto = Cesium.Cartographic.fromDegrees(coord[0], coord[1])
+                boxResults.push(carto)
+
+                const next = coordinates[i + 1]
+                if (next) {
+                    const mid = Cesium.Cartographic.fromDegrees(
+                        (coord[0] + next[0]) / 2,
+                        (coord[1] + next[1]) / 2
+                    )
+                    boxResults.push(mid)
+                }
+            }
+        }
+
+        Cesium.sampleTerrainMostDetailed(viewer.scene.terrainProvider, boxResults)
+            .then((updatePositions) => {
+                const group = []
+                for (let i = 0; i < updatePositions.length; i += 10) {
+                    const slice = updatePositions.slice(i, i + 10)
+                    if (slice.length) group.push(slice)
+                }
+                calculateSlope(group)
+            })
+    }
+
+    const createPolygonInstance = (points, color) => {
+        const positions = points
+            .slice(1, -1)
+            .map((p) => Cesium.Cartographic.toCartesian(p))
+        const polygon = new Cesium.PolygonGeometry({
+            polygonHierarchy: new Cesium.PolygonHierarchy(positions),
+        })
+
+        return new Cesium.GeometryInstance({
+            geometry: polygon,
+            attributes: {
+                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
+                    Cesium.Color.fromCssColorString(color)
+                ),
+                show: new Cesium.ShowGeometryInstanceAttribute(true),
+            },
+        })
+    }
+
+    const createArrowInstance = (target, center, diagonal, heightDiff, slope) => {
+        const mid0 = new Cesium.Cartographic(
+            (target.longitude + center.longitude) / 2,
+            (target.latitude + center.latitude) / 2,
+            (target.height + center.height) / 2
+        )
+        const mid1 = new Cesium.Cartographic(
+            (diagonal.longitude + center.longitude) / 2,
+            (diagonal.latitude + center.latitude) / 2,
+            (diagonal.height + center.height) / 2
+        )
+
+        const positions =
+            heightDiff > 0
+                ? [
+                    Cesium.Cartographic.toCartesian(mid0),
+                    Cesium.Cartographic.toCartesian(mid1),
+                ]
+                : [
+                    Cesium.Cartographic.toCartesian(mid1),
+                    Cesium.Cartographic.toCartesian(mid0),
+                ]
+
+        return new Cesium.GeometryInstance({
+            id: { type: "SlopeAspect", value: slope },
+            geometry: new Cesium.GroundPolylineGeometry({
+                positions,
+                width: arrowWidth,
+            }),
+            attributes: {
+                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
+                    Cesium.Color.BLUE.withAlpha(0.6)
+                ),
+                show: new Cesium.ShowGeometryInstanceAttribute(true),
+            },
+        })
+    }
+
+    const calculateSlope = (groups) => {
+        const polygons = []
+        const arrows = []
+
+        for (const ellipse of groups) {
+            const center = ellipse[0]
+            let maxHD = 0
+            let maxIndex = 0
+
+            for (let i = 1; i < ellipse.length; i++) {
+                const hd = ellipse[i].height - center.height
+                if (Math.abs(hd) > Math.abs(maxHD)) {
+                    maxHD = hd
+                    maxIndex = i
+                }
+            }
+
+            const p0 = new Cesium.Cartographic(center.longitude, center.latitude, 0)
+            const p1 = new Cesium.Cartographic(
+                ellipse[maxIndex].longitude,
+                ellipse[maxIndex].latitude,
+                0
+            )
+
+            const dist = Cesium.Cartesian3.distance(
+                Cesium.Cartographic.toCartesian(p0),
+                Cesium.Cartographic.toCartesian(p1)
+            )
+            const slope = Math.abs(maxHD / dist)
+            const color = calculateSlopeColor(slope, 0.4)
+
+            polygons.push(createPolygonInstance(ellipse, color))
+
+            const diag = ellipse[maxIndex > 4 ? maxIndex - 4 : maxIndex + 4]
+            arrows.push(createArrowInstance(ellipse[maxIndex], center, diag, maxHD, slope))
+        }
+
+        const polyPrimitive = viewer.scene.primitives.add(
+            new Cesium.GroundPrimitive({
+                geometryInstances: polygons,
+                appearance: new Cesium.PerInstanceColorAppearance({
+                    translucent: true,
+                    closed: false,
+                }),
+            })
+        )
+
+        const arrowPrimitive = viewer.scene.primitives.add(
+            new Cesium.GroundPolylinePrimitive({
+                geometryInstances: arrows,
+                appearance: new Cesium.PolylineMaterialAppearance({
+                    material: new Cesium.Material({
+                        fabric: {
+                            type: "PolylineArrow",
+                            uniforms: { color: new Cesium.Color(1, 1, 0, 0.8) },
+                        },
+                    }),
+                }),
+            })
+        )
+
+        result.push(polyPrimitive, arrowPrimitive)
+    }
+
+    const removeAll = () => {
+        result.forEach((p) => viewer.scene.primitives.remove(p))
+        result = []
+    }
+
+    return {
+        drawByDistance,
+        drawByNum,
+        removeAll
+    }
+}
+
+export {
+    useSlope
+}

package/package.json

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