制作4铺需求

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/4dmap/example/storeData.json

@@ -224,6 +224,7 @@
         "x": 114.108479753191,
         "y": 24.924434913749,
         "id": "65",
+        "type": "边界点",
         "rtk": true,
         "title": "0"
       },
@@ -246,6 +247,7 @@
         "y": 24.9244845900276,
         "id": "68",
         "rtk": true,
+        "type": "边界点",
         "title": "3"
       },
       {
@@ -519,6 +521,7 @@
         "y": 24.9244845900276,
         "id": "52",
         "rtk": true,
+        "type": "边界点",
         "title": "3"
       },
       {
@@ -533,6 +536,7 @@
         "y": 24.9245532362898,
         "id": "54",
         "rtk": true,
+        "type": "边界点",
         "title": "1"
       },
       {
@@ -560,6 +564,7 @@
         "x": 114.108590244609,
         "y": 24.9245532362898,
         "id": "58",
+        "type": "边界点",
         "rtk": true,
         "title": "1"
       },
@@ -567,6 +572,7 @@
         "x": 114.108495964645,
         "y": 24.9246236813815,
         "id": "59",
+        "type": "边界点",
         "rtk": true,
         "title": "2"
       },
@@ -860,6 +866,7 @@
       {
         "x": 114.1090742813118,
         "y": 24.92361522459587,
+        "type": "其他",
         "id": "111",
         "rtk": false,
         "title": ""
@@ -869,12 +876,14 @@
         "title": "",
         "x": 114.10863393389405,
         "y": 24.922668016723673,
+        "type": "边界点",
         "id": "112"
       },
       {
         "rtk": false,
         "title": "",
         "x": 114.10991066538514,
+        "type": "中心点",
         "y": 24.922555363945047,
         "id": "113"
       },
@@ -883,6 +892,7 @@
         "title": "",
         "x": 114.10889142595948,
         "y": 24.92320982294468,
+        "type": "标志点",
         "id": "114"
       }
     ],

src/app/4dmap/point.ts

@@ -8,7 +8,7 @@ import {
   openEntityDrag,
   wholeLineStyle,
 } from "../../board";
-import { PolygonsPointAttrib } from "./type";
+import { pointColorMap, PointTypeEnum, PolygonsPointAttrib } from "./type";
 import { Group } from "konva/lib/Group";
 import { Text } from "konva/lib/shapes/Text";
 import { Circle } from "konva/lib/shapes/Circle";
@@ -107,19 +107,21 @@ const pointActShapeFactory = (attrib: PolygonsPointAttrib, tree: PoPoint) => {
   const group = new Group();
   group.add(offsetGroup, wlp.shape);
 
+  const setColor = (color: string) => {
+    out.fill(color);
+    select.fill(color);
+  };
+
   const result = {
     shape: group,
     common() {
-      out.fill(attrib.rtk ? "rgba(230, 162, 60, 1)" : "#409EFF");
-      select.fill(attrib.rtk ? "rgba(230, 162, 60, 1)" : "#409EFF");
       wlp.common();
       label.visible(false);
     },
     hover: () => {
       label.visible(true);
       if (!attrib.rtk) {
-        out.fill("#409EFF");
-        select.fill("#409EFF");
+        setColor("#409EFF");
       }
     },
     setData(data: number[]) {
@@ -128,6 +130,12 @@ const pointActShapeFactory = (attrib: PolygonsPointAttrib, tree: PoPoint) => {
       group.x(data[0]);
       group.y(data[1]);
       text.text(tree.attrib.title || `P${attrib.id}`);
+      setColor(
+        !tree.attrib.rtk
+          ? pointColorMap[PointTypeEnum.mapSelect]
+          : pointColorMap[tree.attrib.type] ||
+              pointColorMap[PointTypeEnum.other]
+      );
 
       if (~tree.editPolygonNdx) {
         index.text((tree.editPolygonNdx + 1).toString()).visible(true);
@@ -142,8 +150,7 @@ const pointActShapeFactory = (attrib: PolygonsPointAttrib, tree: PoPoint) => {
     },
     draging() {
       if (~tree.editPolygonNdx) {
-        out.fill("#e0403c");
-        select.fill("#e0403c");
+        setColor("#e0403c");
       }
     },
   };

src/app/4dmap/type.ts

@@ -4,14 +4,34 @@ import {
   WholeLinePolygonAttrib,
 } from "../../board";
 
+export enum PointTypeEnum {
+  border = "边界点",
+  center = "中心点",
+  marker = "标志点",
+  mapSelect = "地图选点",
+  other = "其他",
+}
+
+export const pointColorMap = {
+  [PointTypeEnum.border]: "#409EFF",
+  [PointTypeEnum.center]: "#41bf7a",
+  [PointTypeEnum.marker]: "#f76065",
+  [PointTypeEnum.mapSelect]: "#58d2e7",
+  [PointTypeEnum.other]: "#e2a33f",
+};
+
 export type PolygonsPointAttrib = WholeLinePointAttrib & {
+  type?: PointTypeEnum;
   rtk: boolean;
-  title: string;
+  title?: string;
 };
 export type PolygonsLineAttrib = WholeLineLineAttrib;
 
+export type PolygonAttrib = WholeLinePolygonAttrib & { name?: string };
+
 export type PolygonsAttrib = {
+  id: string;
   lines: PolygonsLineAttrib[];
-  polygons: (WholeLinePolygonAttrib & { name: string })[];
+  polygons: PolygonAttrib[];
   points: PolygonsPointAttrib[];
 };

src/board/plugins/bound-plugin.ts

@@ -108,7 +108,7 @@ export class BoundQueryPlugin {
     } = this.tree;
 
     const whellHandler = (ev: WheelEvent) => {
-      const scale = 1 + ev.deltaY / 1000;
+      const scale = 1 + ev.deltaY / 200;
 
       const pointer = stage.getRelativePointerPosition();
       const center = [pointer.x, pointer.y];
@@ -125,6 +125,8 @@ export class BoundQueryPlugin {
 
       this.bound = newBound;
       this.update();
+      ev.stopPropagation();
+      ev.preventDefault();
     };
     dom.addEventListener("wheel", whellHandler);
     this.wheelDestory = () => dom.removeEventListener("wheel", whellHandler);