feat(draw): update

package.json

@@ -13,6 +13,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "^2.1.0",
     "@types/qs": "^6.9.7",
+    "@vueuse/core": "^10.11.0",
     "@vueuse/router": "^10.11.0",
     "axios": "^1.4.0",
     "echarts": "^5.4.3",

src/app/map/App.vue

@@ -59,15 +59,17 @@ import { reactive } from "vue";
 import { watch } from "vue";
 import { ElLoading } from "element-plus";
 import linkIco from "@/assets/image/fire.ico";
+import { useUrlSearchParams } from "@vueuse/core";
+
+const params = useUrlSearchParams("history");
+console.log("params", params.caseId);
 
 const current = ref(0);
 const list = ref<any>([]);
 
-// const caseId = useRouteQuery("caseId");
-// console.log("caseId", caseId);
 const state = reactive({
-  deptId: "",
-  caseId: "",
+  // deptId: "",
+  caseId: params.caseId || "",
 });
 
 const link = document.querySelector<HTMLLinkElement>("#app-icon")!;
@@ -106,7 +108,7 @@ const getDataQuest = () => {
       {
         pageNum: 1,
         pageSize: 10000,
-        deptId: state.deptId,
+        caseId: state.caseId,
       }
     );
     console.log("res.data", res);
@@ -220,7 +222,10 @@ const loadMap = async () => {
   initMakers();
 };
 
-onMounted(loadMap);
+onMounted(() => {
+  // console.log("caseId", caseId);
+  loadMap();
+});
 const handCardClick = (id: number) => {
   const url = getQuery(id, true);
   console.log("url", url);

src/core/box/object/PureTextLabel.js

@@ -0,0 +1,42 @@
+import * as THREE from "three";
+
+export default class PureTextLabel extends THREE.Mesh {
+  constructor(text, outline) {
+    let res = 5;
+    const width = 150 * res;
+    const height = 15 * res;
+    var canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    let fontFamily = "Arial";
+    let fontSize = 7 * res;
+    let offsetX = 75 * res;
+    let offsetY = 10 * res;
+    var context = canvas.getContext("2d");
+
+    context.fillStyle = "transparent";
+    context.rect(0, 0, width, height);
+    context.fill();
+    context.font = "normal " + fontSize + "px " + fontFamily;
+    context.fillStyle = "#000000";
+    context.textAlign = "center";
+    context.fillText(text, offsetX, offsetY);
+    const canvas_map = new THREE.Texture(canvas);
+    canvas_map.colorSpace = THREE.SRGBColorSpace;
+    canvas_map.needsUpdate = true;
+    canvas_map.anisotropy = 4;
+
+    const g = new THREE.PlaneGeometry(1.5, 0.15);
+    g.rotateX(-Math.PI / 2);
+
+    // const texture = new THREE.CanvasTexture(canvas_map);
+
+    const m = new THREE.MeshBasicMaterial({
+      map: canvas_map,
+      transparent: true, // 允许材质透明
+    });
+    super(g, m);
+
+    this.name = "textlabel_" + text;
+  }
+}

src/core/player/Player.js

@@ -8,6 +8,7 @@ import Line from "../box/object/Line";
 import LinePoints from "../box/object/LinePoints.js";
 import Marker from "../box/object/marker.js";
 import CircleTextLabel from "../box/object/CircleTextLabel.js";
+import PureTextLabel from "../box/object/PureTextLabel.js";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 
 const convertScreenToNDC = function (event, domElement) {
@@ -38,6 +39,7 @@ export default class Player {
     this.symbol = null;
     this.symbolIndex = 0;
     this.text = null;
+    this.showText = "文本";
     this.selectItem = null;
 
     this.drawing = false;
@@ -87,6 +89,10 @@ export default class Player {
       let pos = new THREE.Vector3(0, 0, -1);
       pos.unproject(this.orthCamera);
       pos.y = 5;
+      this.text = new PureTextLabel(this.showText, true);
+      this.text.visible = false;
+      this.scene.scene.add(this.text);
+      this.drawing = true;
     }
 
     if (mode === 0) {
@@ -201,7 +207,6 @@ export default class Player {
         let pos = new THREE.Vector3(this.pointermove.x, this.pointermove.y, -1);
         pos.unproject(this.orthCamera);
         pos.y = 5;
-        // console.log("pos", pos);
         this.marker.position.copy(pos);
       }
     }
@@ -212,11 +217,19 @@ export default class Player {
         let pos = new THREE.Vector3(this.pointermove.x, this.pointermove.y, -1);
         pos.unproject(this.orthCamera);
         pos.y = 5;
-        // console.log("pos", pos);
-        // console.log("symbol", this.symbol);
         this.symbol.position.copy(pos);
       }
     }
+
+    if (this.mode === 4) {
+      if (this.text) {
+        this.text.visible = true;
+        let pos = new THREE.Vector3(this.pointermove.x, this.pointermove.y, -1);
+        pos.unproject(this.orthCamera);
+        pos.y = 5;
+        this.text.position.copy(pos);
+      }
+    }
   };
 
   onPointerDown = (e) => {
@@ -307,6 +320,23 @@ export default class Player {
         this.setMode(0);
       }
     }
+    if (this.mode === 4) {
+      if (this.text) {
+        let lasPos = new THREE.Vector3(
+          this.pointerdown.x,
+          this.pointerdown.y,
+          -1
+        );
+        this.scene.emit("lockText");
+        this.drawing = false;
+        // const activeSymbolItem = {
+        //   id: this.symbolIndex,
+        //   point: lasPos.toArray(),
+        // };
+
+        // this.setMode(0);
+      }
+    }
   };
   onPointerUp = (e) => {
     this.pointerup = convertScreenToNDC(e, this.scene.domElement);

yarn.lock

@@ -229,6 +229,11 @@
   resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz"
   integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
 
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
+
 "@vitejs/plugin-vue@^4.2.3":
   version "4.6.2"
   resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz"
@@ -368,6 +373,16 @@
   resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.31.tgz"
   integrity sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==
 
+"@vueuse/core@^10.11.0":
+  version "10.11.0"
+  resolved "https://registry.npmjs.org/@vueuse/core/-/core-10.11.0.tgz#b042585a8bf98bb29c177b33999bd0e3fcd9e65d"
+  integrity sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "10.11.0"
+    "@vueuse/shared" "10.11.0"
+    vue-demi ">=0.14.8"
+
 "@vueuse/core@^9.1.0":
   version "9.13.0"
   resolved "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz"
@@ -378,6 +393,11 @@
     "@vueuse/shared" "9.13.0"
     vue-demi "*"
 
+"@vueuse/metadata@10.11.0":
+  version "10.11.0"
+  resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.0.tgz#27be47cf115ee98e947a1bfcd0b1b5b35d785fb6"
+  integrity sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==
+
 "@vueuse/metadata@9.13.0":
   version "9.13.0"
   resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz"