easy-three-utils 0.0.348 → 0.0.350

package/cesium/utils/useProfileAnalysis.ts

@@ -0,0 +1,270 @@
+import * as Cesium from 'cesium'
+
+const useProfileAnalysis = (viewer: Cesium.Viewer, options: {
+    collection: Cesium.CustomDataSource
+}) => {
+
+    let handler = null
+    let positions = []
+    let positionsCartographic = []
+    let positions_Inter = []
+    let poly = null
+    let distance = null
+    let cartesian = null
+    let DistanceArray = []
+    let profileItem: {
+        distance: number
+        point: ReturnType<typeof cartesian3ToDegrees>
+    }[] = []
+
+    class PolyLinePrimitive {
+        options: Cesium.Entity.ConstructorOptions
+        positions: Cesium.Cartesian3[]
+
+        constructor(positions: Cesium.Cartesian3[]) {
+            this.options = {
+                polyline: {
+                    show: true,
+                    positions: [],
+                    width: 3,
+                    material: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
+                    clampToGround: true
+                }
+            }
+            this.positions = positions
+            this.init()
+        }
+
+        init = () => {
+            const _self = this
+            const _update = function () {
+                return _self.positions
+            }
+            this.options.polyline.positions = new Cesium.CallbackProperty(_update, false)
+            options.collection.entities.add(this.options)
+        }
+    }
+
+    const draw = (cb: (data: {
+        min: number;
+        value: (number | string)[][]
+    }) => void) => {
+        if (handler) {
+            console.log('请使用右键结束上次测量！')
+            return
+        }
+        options.collection.entities.removeAll()
+        handler = new Cesium.ScreenSpaceEventHandler((viewer.scene as any)._imageryLayerCollection)
+        leftClickEvent()
+        mouseMoveEvent()
+        rightClickEvent(cb)
+    }
+
+    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
+        }
+
+        positions = []
+        positionsCartographic = []
+        positions_Inter = []
+        poly = null
+        distance = null
+        cartesian = null
+        DistanceArray = []
+        profileItem = []
+    }
+
+    const removeAll = () => {
+        stopDraw()
+        options.collection.entities.removeAll()
+    }
+
+    const leftClickEvent = () => {
+        handler.setInputAction(((movement) => {
+            cartesian = viewer.scene.pickPosition(movement.position)
+            if (positions.length == 0) {
+                positions.push(cartesian.clone())
+            }
+            positions.push(cartesian)
+            if (poly) {
+                interPoints(poly.positions)
+                distance = getSpaceDistance(positions_Inter)
+            } else {
+                distance = getSpaceDistance(positions)
+            }
+
+            const textDisance = distance + "米"
+            DistanceArray.push(distance)
+            options.collection.entities.add({
+                position: positions[positions.length - 1],
+                point: {
+                    color: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
+                    outlineColor: Cesium.Color.WHITE,
+                    outlineWidth: 2,
+                    pixelSize: 10
+                },
+                label: {
+                    text: textDisance,
+                    font: '18px sans-serif',
+                    fillColor: Cesium.Color.GOLD,
+                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                    outlineWidth: 2,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    pixelOffset: new Cesium.Cartesian2(20, -20),
+                    heightReference: Cesium.HeightReference.NONE
+                }
+            })
+        }) as Cesium.ScreenSpaceEventHandler.PositionedEventCallback, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    }
+
+    const mouseMoveEvent = () => {
+        handler.setInputAction(((movement) => {
+            cartesian = viewer.scene.pickPosition(movement.endPosition)
+            if (positions.length >= 2) {
+                if (!Cesium.defined(poly)) {
+                    poly = new PolyLinePrimitive(positions)
+                } else {
+                    positions.pop()
+                    positions.push(cartesian)
+                }
+            }
+        }) as Cesium.ScreenSpaceEventHandler.MotionEventCallback, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+    }
+
+    const rightClickEvent = (cb: (data: {
+        min: number;
+        value: (number | string)[][]
+    }) => void) => {
+        handler.setInputAction((() => {
+            positions.pop()
+            createProfileChart(profileItem, cb)
+            stopDraw()
+        }) as Cesium.ScreenSpaceEventHandler.PositionedEventCallback, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+    }
+
+    const cartesian3ToDegrees = (pos: Cesium.Cartesian3) => {
+        const ellipsoid = viewer.scene.globe.ellipsoid
+        const cartographic = ellipsoid.cartesianToCartographic(pos)
+        const lat = Cesium.Math.toDegrees(cartographic.latitude)
+        const lon = Cesium.Math.toDegrees(cartographic.longitude)
+        const height = cartographic.height
+
+        return {
+            lat,
+            lon,
+            height
+        }
+    }
+
+    const getSpaceDistance = (positions: Cesium.Cartesian3[]) => {
+        profileItem = [
+            {
+                point: cartesian3ToDegrees(positions[0]),
+                distance: 0
+            }
+        ]
+        let distance = 0
+        for (let i = 0; i < positions.length - 1; i++) {
+            const point1cartographic = Cesium.Cartographic.fromCartesian(positions[i])
+            const point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1])
+            const geodesic = new Cesium.EllipsoidGeodesic()
+            geodesic.setEndPoints(point1cartographic, point2cartographic)
+            let s = geodesic.surfaceDistance
+            s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2))
+            distance = distance + s
+
+            const m_Item = {
+                point: cartesian3ToDegrees(positions[i + 1]),
+                distance: distance
+            }
+            profileItem.push(m_Item)
+        }
+        return distance.toFixed(2)
+    }
+
+    const interPoints = (positions: Cesium.Cartesian3[]) => {
+        positionsCartographic = []
+        var terrainSamplePositions = []
+        for (let index = 0; index < positions.length - 1; index++) {
+            const element = positions[index]
+            var ellipsoid = viewer.scene.globe.ellipsoid
+            var cartographic = ellipsoid.cartesianToCartographic(element)
+            positionsCartographic.push(cartographic)
+        }
+        for (let i = 0; i < positionsCartographic.length; i++) {
+            const m_Cartographic0 = positionsCartographic[i]
+            const m_Cartographic1 = positionsCartographic[i + 1]
+            if (m_Cartographic1) {
+                var a = Math.abs(m_Cartographic0.longitude - m_Cartographic1.longitude) * 10000000
+                var b = Math.abs(m_Cartographic0.latitude - m_Cartographic1.latitude) * 10000000
+                if (a > b) b = a
+                let length = parseInt((b / 2) as any)
+                if (length > 1000) length = 1000
+                if (length < 2) length = 2
+                for (var j = 0; j < length; j++) {
+                    terrainSamplePositions.push(
+                        new Cesium.Cartographic(
+                            Cesium.Math.lerp(m_Cartographic0.longitude, m_Cartographic1.longitude, j / (length - 1)),
+                            Cesium.Math.lerp(m_Cartographic0.latitude, m_Cartographic1.latitude, j / (length - 1))
+                        )
+                    )
+                }
+                terrainSamplePositions.pop()
+            } else {
+                terrainSamplePositions.push(m_Cartographic0)
+            }
+        }
+        positions_Inter = []
+        for (var n = 0; n < terrainSamplePositions.length; n++) {
+            var m_cartographic = terrainSamplePositions[n]
+            var height = viewer.scene.globe.getHeight(m_cartographic)
+            var point = Cesium.Cartesian3.fromDegrees(m_cartographic.longitude / Math.PI * 180, m_cartographic.latitude / Math.PI * 180, height)
+            positions_Inter.push(point)
+        }
+    }
+
+    const createProfileChart = (pos: typeof profileItem, cb: (data: {
+        min: number;
+        value: (number | string)[][]
+    }) => void) => {
+        const ProfileData = []
+        const ProfileData_Lon = []
+
+        let min = 0
+
+        for (let index = 0; index < pos.length; index++) {
+            const el = pos[index]
+            const m_distance = el.distance.toFixed(2)
+
+            const m_Lon = el.point.lon.toFixed(5)
+            const m_Lat = el.point.lat.toFixed(5)
+            const m_height = Number(el.point.height.toFixed(2))
+
+            if (m_height < min) {
+                min = m_height
+            }
+            var m_data = [m_distance, m_height]
+            ProfileData.push(m_data)
+            ProfileData_Lon.push([m_Lon, m_Lat])
+        }
+
+        cb({
+            min,
+            value: ProfileData
+        })
+    }
+
+    return {
+        draw,
+        removeAll
+    }
+}
+
+export {
+    useProfileAnalysis
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.348",
+  "version": "0.0.350",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -8,5 +8,5 @@
   "author": "",
   "license": "ISC",
   "types": "./index.d.ts",
-  "description": "更新长度测量"
+  "description": "更新j标完成绘制回显功能和按照id删除功能"
 }

package/cesium/js/lib/CreatePolygonOnGround.js

@@ -1,191 +0,0 @@
-import CreateRemindertip from "./ReminderTip";
-import * as Cesium from 'cesium'
-
-const CreatePolygonOnGround = function (viewer, resultList, options, callback, cb) {
-  if (!viewer) throw new Error("no viewer object!");
-  options = options || {};
-  let id = options.id || setSessionid(); //Polygon的id
-  if (viewer.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的轮廓线宽度
-  const 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 = viewer.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.destroy();
-    // 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/js/lib/ReminderTip.js

@@ -1,71 +0,0 @@
-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;