easy-three-utils 0.0.346 → 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;
@@ -87,7 +88,13 @@ 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),
+      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) {
@@ -100,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

@@ -5,12 +5,25 @@ enum ECollectionWhiteListNames {
   POLYGON = 'polygon',
 
   MEASURE_DISTANCE = 'measure_distance',
+  MEASURE_HEIGHT = 'measure_height',
+  MEASURE_AREA = 'measure_area',
+  MEASURE_ALTITUDE = 'measure_altitude',
+
+  SLOPE = 'slope'
 }
 
 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',
+    'measure_altitude',
+    'slope'
+  ]
 
   const addCollection = (name: string) => {
     const index = collectionNames.findIndex(item => item === name)

package/cesium/utils/useMeasure.ts

@@ -1,17 +1,13 @@
 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,
+    altitudeCollection: 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 +62,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)
@@ -112,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,
@@ -154,11 +150,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 +173,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 +190,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 +242,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 +283,7 @@ const useMeasure = (viewer: Cesium.Viewer, options: {
 
         const rightClickEvent = () => {
             handler.setInputAction(() => {
-                if (positions.length < 1) {
+                if (positions.length <= 1) {
                     removeAll()
                     stopDraw()
                 } else {
@@ -290,15 +307,514 @@ 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 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
+        distance,
+        height,
+        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.346",
+  "version": "0.0.348",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"