easy-three-utils 0.0.347 → 0.0.348

package/cesium/index.ts

@@ -13,6 +13,7 @@ type TCesiumUtilsType = {
   clipping: ReturnType<typeof hooks.useClipping>;
   weather: ReturnType<typeof hooks.useWeather>;
   measure: ReturnType<typeof hooks.useMeasure>;
+  slope: ReturnType<typeof hooks.useSlope>;
 }
 
 let config;
@@ -89,7 +90,11 @@ 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)
     })
 
     if (config.controllerStyle === cesiumConfigDict.EControllerStyle.THREE) {
@@ -102,7 +107,8 @@ const useCesium = () => {
       drawPolygon,
       clipping,
       weather,
-      measure
+      measure,
+      slope
     })
 
     handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

package/cesium/utils/index.ts

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

package/cesium/utils/lib/CreatePolygonOnGround.js

@@ -0,0 +1,195 @@
+// import CreateRemindertip from "./ReminderTip";
+import * as Cesium from 'cesium'
+
+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 (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的轮廓线宽度
+  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+  cb && cb(handler)
+  let toolTip = "左键点击开始绘制";
+  let anchorpoints = [];
+  let polygon = undefined;
+  let drawStatus = true;
+  handler.setInputAction(function (event) {
+    let pixPos = event.position;
+    let cartesian = getCatesian3FromPX(viewer, pixPos);
+    if (anchorpoints.length == 0) {
+      toolTip = "左键添加第二个点";
+      anchorpoints.push(cartesian);
+      let linePoints = new Cesium.CallbackProperty(function () {
+        let verPoints = anchorpoints.concat([anchorpoints[0]]);
+        return verPoints;
+      }, false);
+      let dynamicPositions = new Cesium.CallbackProperty(function () {
+        return new Cesium.PolygonHierarchy(anchorpoints);
+      }, false);
+      polygon = collection.entities.add({
+        name: "Polygon",
+        id: id,
+        polyline: {
+          positions: linePoints,
+          width: outlineWidth,
+          material: outlineColor,
+          clampToGround: true,
+        },
+        polygon: {
+          heightReference: Cesium.HeightReference.None,
+          hierarchy: dynamicPositions,
+          material: color,
+        },
+      });
+      polygon.GeoType = "Polygon";
+    } else {
+      toolTip = "左键添加点，Ctrl+Z回退，右键完成绘制";
+    }
+    anchorpoints.push(cartesian);
+  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+  handler.setInputAction(function (movement) {
+    let endPos = movement.endPosition;
+    // CreateRemindertip(toolTip, endPos, true);
+    if (Cesium.defined(polygon)) {
+      anchorpoints.pop();
+      let cartesian = getCatesian3FromPX(viewer, endPos);
+      anchorpoints.push(cartesian);
+    }
+    if (anchorpoints.length === 3) {
+      polygon.polygon.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
+    }
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+  handler.setInputAction(function (event) {
+    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);
+  }, Cesium.ScreenSpaceEventType.RIGHT_DOWN);
+
+  //Ctrl + Z回退
+  document.onkeydown = function (event) {
+    if (event.ctrlKey && window.event.keyCode == 90) {
+      if (!drawStatus) {
+        return false;
+      }
+      anchorpoints.pop();
+      if (anchorpoints.length == 2) {
+        toolTip = "左键添加第二个点";
+      }
+    }
+  };
+};
+function getCatesian3FromPX(viewer, px) {
+  let picks = viewer.scene.drillPick(px);
+  let cartesian = null;
+  let isOn3dtiles = false,
+    isOnTerrain = false;
+  // drillPick
+  for (let i in picks) {
+    let pick = picks[i];
+    if (
+      (pick && pick.primitive instanceof Cesium.Cesium3DTileFeature) ||
+      (pick && pick.primitive instanceof Cesium.Cesium3DTileset) ||
+      (pick && pick.primitive instanceof Cesium.Model)
+    ) {
+      //模型上拾取
+      isOn3dtiles = true;
+    }
+    // 3dtilset
+    if (isOn3dtiles) {
+      viewer.scene.pick(px);
+      cartesian = viewer.scene.pickPosition(px);
+      if (cartesian) {
+        let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+        if (cartographic.height < 0) cartographic.height = 0;
+        let lon = Cesium.Math.toDegrees(cartographic.longitude),
+          lat = Cesium.Math.toDegrees(cartographic.latitude),
+          height = cartographic.height;
+        cartesian = transformWGS84ToCartesian(viewer, {
+          lng: lon,
+          lat: lat,
+          alt: height,
+        });
+      }
+    }
+  }
+  // 地形
+  let boolTerrain =
+    viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider;
+  // Terrain
+  if (!isOn3dtiles && !boolTerrain) {
+    let ray = viewer.scene.camera.getPickRay(px);
+    if (!ray) return null;
+    cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+    isOnTerrain = true;
+  }
+  // 地球
+  if (!isOn3dtiles && !isOnTerrain && boolTerrain) {
+    cartesian = viewer.scene.camera.pickEllipsoid(
+      px,
+      viewer.scene.globe.ellipsoid
+    );
+  }
+  if (cartesian) {
+    let position = transformCartesianToWGS84(viewer, cartesian);
+    if (position.alt < 0) {
+      cartesian = transformWGS84ToCartesian(viewer, position, 0.1);
+    }
+    return cartesian;
+  }
+  return false;
+}
+
+/***
+ * 坐标转换 84转笛卡尔
+ * @param {Object} {lng,lat,alt} 地理坐标
+ * @return {Object} Cartesian3 三维位置坐标
+ */
+function transformWGS84ToCartesian(viewer, position, alt) {
+  return position
+    ? Cesium.Cartesian3.fromDegrees(
+      position.lng || position.lon,
+      position.lat,
+      (position.alt = alt || position.alt),
+      Cesium.Ellipsoid.WGS84
+    )
+    : Cesium.Cartesian3.ZERO;
+}
+
+/***
+ * 坐标转换 笛卡尔转84
+ * @param {Object} Cartesian3 三维位置坐标
+ * @return {Object} {lng,lat,alt} 地理坐标
+ */
+function transformCartesianToWGS84(viewer, cartesian) {
+  let ellipsoid = Cesium.Ellipsoid.WGS84;
+  let cartographic = ellipsoid.cartesianToCartographic(cartesian);
+  return {
+    lng: Cesium.Math.toDegrees(cartographic.longitude),
+    lat: Cesium.Math.toDegrees(cartographic.latitude),
+    alt: cartographic.height,
+  };
+}
+function setSessionid(num) {
+  let len = num || 32;
+  let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
+  let maxPos = chars.length;
+  let pwd = "";
+  for (let i = 0; i < len; i++) {
+    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+  return pwd;
+}
+export default CreatePolygonOnGround;

package/cesium/utils/lib/ReminderTip.js

@@ -0,0 +1,71 @@
+const CreateRemindertip = function (arr, position, show) {
+  let tooltip = document.getElementById("toolTip");
+  let style, _x, _y, _color;
+  if (arr && typeof arr === "object") {
+    style = arr;
+  }
+  if (style && style.origin) {
+    style.origin === "center" && ((_x = 15), (_y = -12));
+    style.origin === "top" && ((_x = 15), (_y = -44));
+    style.origin === "bottom" && ((_x = 15), (_y = 20));
+  } else {
+    (_x = 15), (_y = 20);
+  }
+  if (style && style.color) {
+    style.color === "white" &&
+      (_color = "background: rgba(255, 255, 255, 0.8);color: black;");
+    style.color === "black" &&
+      (_color = "background: rgba(0, 0, 0, 0.5);color: white;");
+    style.color === "yellow" &&
+      (_color =
+        "color: black;background-color: #ffcc33;border: 1px solid white;");
+  } else {
+    _color = "background: rgba(0, 0, 0, 0.5);color: white;";
+  }
+  if (!tooltip) {
+    const viewerDom = document.getElementsByClassName("cesium-viewer")[0];
+    let elementbottom = document.createElement("div");
+    viewerDom.append(elementbottom);
+    let html =
+      '<div id="toolTip" style="display: none;pointer-events: none;position: absolute;z-index: 1000;opacity: 0.8;border-radius: 4px;padding: 4px 8px;white-space: nowrap;font-family:黑体;color:white;font-weight: bolder;font-size: 14px;' +
+      _color +
+      '"></div>';
+    viewerDom.insertAdjacentHTML("beforeend", html);
+    tooltip = document.getElementById("toolTip");
+  }
+  if (show) {
+    tooltip.innerHTML = arr;
+    tooltip.style.left = position.x + _x + "px";
+    tooltip.style.top = position.y + _y + "px";
+    tooltip.style.display = "block";
+  } else {
+    tooltip.style.display = "none";
+  }
+  return {
+    tooltip: tooltip,
+    style: style,
+    showAt: function (position, text) {
+      this.tooltip.innerHTML = text;
+      if (this.style && this.style.origin) {
+        this.style.origin === "center" &&
+          ((_x = 15), (_y = -this.tooltip.offsetHeight / 2));
+        this.style.origin === "top" &&
+          ((_x = 15), (_y = -this.tooltip.offsetHeight - 20));
+        this.style.origin === "bottom" && ((_x = 15), (_y = 20));
+      } else {
+        (_x = 15), (_y = -this.tooltip.offsetHeight / 2);
+      }
+      this.tooltip.style.left = position.x + _x + "px";
+      this.tooltip.style.top = position.y + _y + "px";
+      this.tooltip.style.display = "block";
+    },
+    show: function (show) {
+      if (show) {
+        this.tooltip.style.display = "block";
+      } else {
+        this.tooltip.style.display = "none";
+      }
+    },
+  };
+};
+export default CreateRemindertip;

package/cesium/utils/useCustomCollection.ts

@@ -6,13 +6,24 @@ enum ECollectionWhiteListNames {
 
   MEASURE_DISTANCE = 'measure_distance',
   MEASURE_HEIGHT = 'measure_height',
-  MEASURE_AREA = 'measure_area'
+  MEASURE_AREA = 'measure_area',
+  MEASURE_ALTITUDE = 'measure_altitude',
+
+  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',
+    '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/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.348",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"