fix: 1

src/App.vue

@@ -8,8 +8,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { ElButton } from "element-plus";
-import QueryBoard from "./app/4dmap/example/index.vue";
-// import QueryBoard from "./app/liantong/example/index.vue";
+// import QueryBoard from "./app/4dmap/example/index.vue";
+import QueryBoard from "./app/liantong/example/index.vue";
 
 const mound = ref(true);
 const width = window.innerWidth;

src/app/liantong/example/index.vue

@@ -63,7 +63,8 @@ const board = createBoard();
 board.bound.setRetainScale(true);
 
 setTimeout(() => {
-  board.setData({ rooms: rooms });
+  // board.setData({ rooms: rooms });
+  console.log(storeData);
   board.setData(storeData);
   board.bound.autoBound(20);
 }, 500);

src/app/liantong/example/storeData.json

@@ -144,6 +144,20 @@
       "x": -2.9458965517241387,
       "y": 0.4043017241379321,
       "type": "DDF"
+    },
+    {
+      "id": "1722907465889",
+      "x": -2.9458965517241387,
+      "y": 0.4043017241379321,
+      "text": "test123",
+      "type": "Tag"
+    },
+    {
+      "id": "17229074658819",
+      "x": -2.9458965517241387,
+      "y": 0.4043017241379321,
+      "text": "test123",
+      "type": "Tag"
     }
   ]
 }

src/app/liantong/icon.ts

@@ -6,6 +6,7 @@ import {
 } from "../../board";
 import { Label, Tag } from "konva/lib/shapes/Label";
 import { Text } from "konva/lib/shapes/Text";
+import { Group } from "konva/lib/Group";
 
 export const svgs = {
   wljg: [
@@ -204,24 +205,53 @@ export const svgs = {
   SingleBed: [
     `M800 96H224v832h576V96zM256 288V128h512v160h-96V240A80 80 0 0 0 592 160h-160A80 80 0 0 0 352 240V288H256z m128 0V240A48 48 0 0 1 432 192h160A48 48 0 0 1 640 240V288h-256z m-128 32h512v64H256v-64z m0 576V416h512v480H256z`,
   ],
+  Tag: [],
 };
 
 for (const key in svgs) {
   injectPoiType(key, (attrib, tree) => {
-    const svgAct = pathsToActShape(
-      {
-        paths: svgs[key],
-        size: [1000, 800],
-        realWidth: 0.8,
-        offset: [0, 100],
-        strokeWidth: 5,
-        fixed: false,
-        strokeColor: "#FFFFFF",
-      },
-      false
-    );
-
-    const paths = svgAct.shape.find<Path>(".path");
+    console.error(attrib);
+    let svgAct: ReturnType<typeof pathsToActShape>;
+    if (key === "Tag") {
+      const simpleText = new Text({
+        name: "rect",
+        text: attrib.text || "文本",
+        fontSize: 0.2,
+        fontFamily: "Calibri",
+      });
+      simpleText.offsetX(simpleText.width() / 2);
+      simpleText.offsetY(simpleText.height() / 2);
+      const group = new Group();
+      group.add(simpleText);
+      svgAct = {
+        shape: group,
+        getSize() {
+          return [simpleText.width(), simpleText.height()];
+        },
+        setData(data) {
+          group.position(data);
+          group.rotation(data.rotate || 0);
+          simpleText.text(data.text || "文本");
+        },
+        common() {
+          simpleText.fill("#ffffff");
+        },
+      };
+    } else {
+      svgAct = pathsToActShape(
+        {
+          paths: svgs[key],
+          size: [1000, 800],
+          realWidth: 0.8,
+          offset: [0, 100],
+          strokeWidth: 5,
+          fixed: false,
+          strokeColor: "#FFFFFF",
+        },
+        false
+      );
+    }
+    const paths = svgAct.shape.find<Path>(key === "Tag" ? ".rect" : ".path");
 
     const label = new Label({ opacity: 0.75, name: "label" });
     label.add(

src/app/liantong/index.ts

@@ -123,15 +123,17 @@ export const createBoard = (
     // x
     // 1.5097999572753906
     // 2.042250156402588
-    data.pois = data.pois.map((poi) => {
-      v.set(poi.x, poi.y);
-      v.applyMatrix3(mat);
-      return {
-        ...poi,
-        x: v.x,
-        y: v.y,
-      };
-    });
+    data.pois = data.pois
+      ? data.pois.map((poi) => {
+          v.set(poi.x, poi.y);
+          v.applyMatrix3(mat);
+          return {
+            ...poi,
+            x: v.x,
+            y: v.y,
+          };
+        })
+      : [];
     return data;
   };
 

src/board/packages/poi/poi.ts

@@ -7,6 +7,7 @@ type PoiData = {
   y: number;
   intersect?: boolean;
   rotate?: number;
+  text?: string;
   type: string;
 };
 export type PoiAttrib = Attrib & PoiData;