文本框拖拉拽功能

2025-08-14 11:53:06 +08:00
parent 6bd3778ad9
commit b4f7e7ad8f
6 changed files with 247 additions and 5 deletions
--- a/src/Obj/Base/TextBox/index.js
+++ b/src/Obj/Base/TextBox/index.js
@ -0,0 +1,109 @@
+/**
+ * 文本框
+ */
+import Base from "../index";
+class TextBox extends Base {
+  constructor(sdk, options = {}) {
+    // this.sdk = { ...sdk }
+    // this.options = { ...options }
+    super(sdk, options)
+    this.clickTextDom = undefined
+    this.handler = undefined
+    this.textDom = undefined
+    this.create(this)
+    this.sdk.addIncetance(this.options.id, this)
+  }
+
+  async create(that) {
+    let viewer = that.sdk.viewer
+    // 创建div元素
+    let dom = document.createElement('span');
+    dom.id = that.options.id
+    dom.className = 'popup-textarea'
+    // 创建textarea元素
+    var textarea = document.createElement('textarea');
+    textarea.className = 'textarea'
+    // 设置textarea的属性，例如行数和列数
+    textarea.rows = 6;
+    textarea.style.resize = 'none'
+    // 将textarea添加到div中
+    dom.appendChild(textarea);
+    // 将div添加到body中
+    // document.body.appendChild(dom);
+
+    // 配置CSS样式和内容结构
+    viewer.cesiumWidget.container.appendChild(dom);
+    let posi = Cesium.Cartesian3.fromDegrees(that.options.positions.lng, that.options.positions.lat, that.options.positions.alt)
+
+    that.handler = function () {
+      const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+        viewer.scene, posi
+      );
+      let width = dom.clientWidth * 1
+      let height = dom.clientHeight * 1
+      dom.style.left = `${position.x - width / 2}px`;
+      dom.style.top = `${position.y - height}px`;
+    }
+    viewer.scene.postRender.addEventListener(that.handler);
+    that.textDom = dom
+  }
+  async setHandeler(data) {
+    let that = this
+    const ray = this.sdk.viewer.camera.getPickRay(new Cesium.Cartesian2(data.x, data.y));
+    var cartesian = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene);
+    if (Cesium.defined(cartesian)) {
+      that.sdk.viewer.scene.postRender.removeEventListener(that.handler);
+
+      var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+      var longitude = Cesium.Math.toDegrees(cartographic.longitude);
+      var latitude = Cesium.Math.toDegrees(cartographic.latitude);
+      that.positions = {
+        lng: longitude,
+        lat: latitude,
+        alt: cartographic.height
+      }
+      let posi = Cesium.Cartesian3.fromDegrees(longitude, latitude, cartographic.height)
+
+      that.handler = function () {
+        const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+          that.sdk.viewer.scene, posi
+        );
+        let width = that.textDom.clientWidth * 1
+        let height = that.textDom.clientHeight * 1
+        that.textDom.style.left = `${position.x - width / 2}px`;
+        that.textDom.style.top = `${position.y - height}px`;
+      }
+      that.sdk.viewer.scene.postRender.addEventListener(that.handler);
+    }
+  }
+  async returnFun() {
+    return this.handler
+  }
+  get show() {
+    return this.options.show
+  }
+  set show(v) {
+    this.options.show = v
+    this.textDom && (this.textDom.style.display = v ? 'block' : 'none');
+  }
+  get positions() {
+    return this.options.positions
+  }
+  set positions(v) {
+    this.options.positions = v
+  }
+
+  async remove() {
+    if (this.handler) {
+      this.sdk.viewer.scene.postRender.removeEventListener(this.handler);
+      this.handler = undefined
+    }
+    if (this.textDom && this.textDom.parentNode) {
+      this.sdk.viewer.cesiumWidget.container.removeChild(this.textDom);
+    }
+  }
+
+  flicker() { }
+}
+
+export default TextBox