文本框 拖拉拽功能

src/YJEarth/index.js

@@ -46,16 +46,18 @@ class YJEarth {
     // setCesiumIndexedDBMaxSize(getCesiumIndexedDBMaxSize())
     setCesiumManageIndexexDBState(getCesiumManageIndexexDBState())
     this.proj = new Proj()
+    this.clickTextDom = undefined
+    this.isLeftClick = false
     this.init()
     setSvg()
   }
 
   addIncetance(id, obj) {
-    this.entityMap.set(id, obj)
+    this.entityMap.set(id + '', obj)
   }
 
   getIncetance(id) {
-    return this.entityMap.get(id)
+    return this.entityMap.get(id + '')
   }
 
   removeIncetance(id) {
@@ -221,11 +223,11 @@ class YJEarth {
 
     document.fonts.ready.then(() => {
       for (let [id, obj] of this.entityMap) {
-        if('labelFontFamily' in obj) {
+        if ('labelFontFamily' in obj) {
           obj.labelFontFamily = obj.labelFontFamily
         }
       }
-      
+
     });
 
     // const font = new FontFace(
@@ -413,6 +415,94 @@ class YJEarth {
         })
       )
     }
+
+
+    let ClickHandler = new Cesium.ScreenSpaceEventHandler(_this.viewer.canvas)
+    ClickHandler.setInputAction((movement) => {
+      let textList = document.getElementsByClassName('popup-textarea')
+      _this.isLeftClick = false
+      for (let i = textList.length - 1; i > -1; i--) {
+        let left = returnNumber(textList[i].style.left)
+        let top = returnNumber(textList[i].style.top)
+        let width = textList[i].clientWidth * 1
+        let height = textList[i].clientHeight * 1
+        let x = movement.position.x
+        let y = movement.position.y
+        if (x > left && x < left + width && y > top && y < top + height) {
+          if (_this.clickTextDom) {
+            _this.clickTextDom.style['pointer-events'] = 'none'
+          }
+          _this.clickTextDom = textList[i]
+          textList[i].style['pointer-events'] = 'all'
+          textList[i].querySelector('textarea').focus()
+          _this.isLeftClick = true
+          break;
+        }
+      }
+
+      let mousedown = undefined
+      let mousemove = undefined
+      let mouseup = undefined
+      let fun = undefined
+      let handler = undefined
+
+      if (_this.isLeftClick) {
+        let click = false
+        let layerX = 0
+        let layerY = 0
+
+        mousedown = function (e) {
+          layerX = e.layerX
+          layerY = e.layerY
+          click = true
+        }
+        mousemove = function (e) {
+          if (!click) {
+            return
+          }
+          let width = _this.clickTextDom.clientWidth * 1
+          let height = _this.clickTextDom.clientHeight * 1
+          let param = {
+            x: e.clientX - layerX + width / 2,
+            y: e.clientY - layerY + height,
+          }
+          _this.entityMap.get(_this.clickTextDom.id).setHandeler(param)
+
+        }
+        mouseup = function (e) {
+          if (!click) {
+            return
+          }
+          click = false
+        }
+
+        _this.clickTextDom.addEventListener('mousedown', mousedown);
+        document.addEventListener('mousemove', mousemove);
+        document.addEventListener('mouseup', mouseup);
+      }
+      // 点击其他地方取消
+      if (!_this.isLeftClick && _this.clickTextDom) {
+        _this.clickTextDom.removeEventListener('mousedown', mousedown);
+        document.removeEventListener('mousemove', mousemove);
+        document.removeEventListener('mouseup', mouseup);
+
+        _this.clickTextDom.style['pointer-events'] = 'none'
+        _this.clickTextDom = undefined
+
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+    // ClickHandler.setInputAction((movement) => {
+    //   if (_this.clickTextDom) {
+    //     _this.clickTextDom.style['pointer-events'] = 'none'
+    //     _this.clickTextDom = undefined
+    //   }
+    // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    function returnNumber(str) {
+      let index = str.indexOf('px')
+      return Number(str.slice(0, index))
+    }
+
   }
 
   destroy() {