easy-three-utils 0.0.331 → 0.0.332

package/cesium/js/lib/CreatePolygonOnGround.js

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

@@ -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;