继续绘图

src/graphic/Controls/AddMagnifier.js

@@ -0,0 +1,19 @@
+import { mathUtil } from "../Util/MathUtil";
+import { magnifierService } from "../Service/MagnifierService";
+
+export default class AddMagnifier {
+  constructor() {
+    this.newMagnifier = null;
+  }
+
+  buildMagnifier(position) {
+    this.newMagnifier = magnifierService.create(position);
+    listenLayer.clear();
+    this.clear();
+  }
+
+  clear() {}
+}
+
+const addMagnifier = new AddMagnifier();
+export { addMagnifier };

src/graphic/Controls/MoveMagnifier.js

@@ -0,0 +1,13 @@
+import { dataService } from "../Service/DataService";
+
+export default class MoveMagnifier {
+  constructor() {}
+
+  moveFullMagnifier(position, magnifierId) {
+    let magnifier = dataService.getMagnifier(magnifierId);
+    magnifier.setPosition(position);
+  }
+}
+
+const moveMagnifier = new MoveMagnifier();
+export { moveMagnifier };

src/graphic/Controls/UIControl.js

@@ -76,6 +76,8 @@ export default class UIControl {
           stateService.setEventName(LayerEvents.AddCircle);
         } else if (selectUI == UIEvents.Text) {
           stateService.setEventName(LayerEvents.AddText);
+        } else if (selectUI == UIEvents.magnifier) {
+          stateService.setEventName(LayerEvents.AddMagnifier);
         } else if (selectUI == UIEvents.SVG) {
           stateService.setEventName(LayerEvents.AddSVG);
         } else if (selectUI == UIEvents.Img) {

src/graphic/Geometry/Magnifier.js

@@ -0,0 +1,52 @@
+//放大镜
+
+import { coordinate } from "../Coordinate.js";
+import { mathUtil } from "../Util/MathUtil.js";
+import VectorType from "../enum/VectorType.js";
+import Geometry from "./Geometry";
+
+const distance = 120;
+export default class Magnifier extends Geometry {
+  constructor(position, vectorId) {
+    super();
+    this.position = {};
+    this.popPosition = {};
+    this.setPosition(position);
+    this.geoType = VectorType.Magnifier;
+    this.setId(vectorId);
+  }
+
+  setPosition(position) {
+    if (!position) {
+      return;
+    }
+    this.position.x = position.x;
+    this.position.y = position.y;
+    let position = coordinate.getScreenXY(this.position);
+    let center = {
+      x: coordinate.width / 2,
+      y: coordinate.height / 2,
+    };
+    if (mathUtil.equalPoint(position, center)) {
+      mathUtil.clonePoint(this.popPosition, this.position);
+    } else {
+      let line = mathUtil.createLine1(position, center);
+      let vLine = mathUtil.getVerticalLine(line, position);
+      let parallelLines = mathUtil.getParallelLineForDistance(vLine, distance);
+      let join1 = mathUtil.getJoinLinePoint(center, parallelLines.line1);
+      let join2 = mathUtil.getJoinLinePoint(center, parallelLines.line2);
+
+      if (
+        mathUtil.getDistance(join1, center) <
+        mathUtil.getDistance(join2, center)
+      ) {
+        this.popPosition = coordinate.getXYFromScreen(join1);
+      } else if (
+        mathUtil.getDistance(join2, center) <
+        mathUtil.getDistance(join1, center)
+      ) {
+        this.popPosition = coordinate.getXYFromScreen(join2);
+      }
+    }
+  }
+}

src/graphic/Geometry/Text.js

@@ -9,7 +9,9 @@ export default class Text extends Geometry {
   constructor(center, vectorId) {
     super();
     this.center = center;
-    this.value = "";
+    this.value = "固定点";
+    this.color = null;
+    this.fontSize = null;
     this.geoType = VectorType.Text;
     this.setId(vectorId);
   }
@@ -24,4 +26,12 @@ export default class Text extends Geometry {
   setValue(value) {
     this.value = value;
   }
+
+  setColor(value) {
+    this.color = value;
+  }
+
+  setFontSize(value) {
+    this.fontSize = value;
+  }
 }

src/graphic/Layer.js

@@ -8,10 +8,12 @@ import UIControl from "./Controls/UIControl";
 // import { moveRectangle } from "./Controls/MoveRectangle";
 import { moveText } from "./Controls/MoveText";
 import { moveSVG } from "./Controls/MoveSVG";
+import { moveMagnifier } from "./Controls/MoveMagnifier";
 import { addRoad } from "./Controls/AddRoad";
 import { addLine } from "./Controls/AddLine";
 import { addCircle } from "./Controls/AddCircle";
 import { addText } from "./Controls/AddText";
+import { addMagnifier } from "./Controls/AddMagnifier";
 import { addSVG } from "./Controls/AddSVG";
 import { moveRoad } from "./Controls/MoveRoad";
 import { moveLine } from "./Controls/MoveLine";
@@ -133,6 +135,15 @@ export default class Layer {
           SelectState.Select
         );
         break;
+      case LayerEvents.AddMagnifier:
+        stateService.setEventName(LayerEvents.MoveMagnifier);
+        addMagnifier.buildMagnifier(position);
+        stateService.setSelectItem(
+          addMagnifier.newMagnifier.vectorId,
+          VectorType.Magnifier,
+          SelectState.Select
+        );
+        break;
       case LayerEvents.AddSVG:
         stateService.setEventName(LayerEvents.MoveSVG);
         addSVG.buildSVG(position);
@@ -507,6 +518,12 @@ export default class Layer {
           moveText.moveFullText(position, draggingItem.vectorId);
         }
         break;
+      case LayerEvents.MoveMagnifier:
+        needAutoRedraw = true;
+        if (draggingItem != null) {
+          moveMagnifier.moveFullMagnifier(position, draggingItem.vectorId);
+        }
+        break;
       case LayerEvents.MoveSVG:
         needAutoRedraw = true;
         if (draggingItem != null) {
@@ -643,6 +660,11 @@ export default class Layer {
         this.history.save();
         elementService.hideAll();
         break;
+      case LayerEvents.MoveMagnifier:
+        needAutoRedraw = true;
+        this.history.save();
+        elementService.hideAll();
+        break;
       case LayerEvents.MoveSVG:
         needAutoRedraw = true;
         this.history.save();
@@ -923,6 +945,8 @@ export default class Layer {
           stateService.setEventName(LayerEvents.MoveCircle);
         } else if (selectItem.type == VectorType.Text) {
           stateService.setEventName(LayerEvents.MoveText);
+        } else if (selectItem.type == VectorType.Magnifier) {
+          stateService.setEventName(LayerEvents.MoveMagnifier);
         } else if (selectItem.type == VectorType.SVG) {
           stateService.setEventName(LayerEvents.MoveSVG);
         }

src/graphic/ListenLayer.js

@@ -77,6 +77,10 @@ export default class ListenLayer {
       position,
       exceptVectorIds.exceptTextId
     );
+    selectInfo.magnifierInfo = this.isSelectMagnifier(
+      position,
+      exceptMagnifierId.exceptMagnifierId
+    );
     this.setModifyPoint(position, selectInfo);
     flag = this.updateSelectItem();
     return flag;
@@ -702,6 +706,32 @@ export default class ListenLayer {
     return textInfo;
   }
 
+  isSelectMagnifier(position, exceptMagnifierId) {
+    let magnifierInfo = {
+      magnifierId: null,
+      type: null,
+      distance: null,
+    };
+    const magnifiers = dataService.getMagnifiers();
+    for (const magnifierId in magnifiers) {
+      if (magnifierId == exceptMagnifierId) {
+        continue;
+      }
+      const magnifier = dataService.getMagnifier(magnifierId);
+      const distance = mathUtil.getDistance(position, magnifier.position);
+      if (distance < Constant.minAdsorbPix) {
+        magnifierInfo = {
+          magnifierId: magnifierId,
+          type: VectorType.Magnifier,
+          distance: distance,
+          x: magnifier.position.x,
+          y: magnifier.position.y,
+        };
+      }
+    }
+
+    return magnifierInfo;
+  }
   /**
     * 
     * @param info:{ 
@@ -806,6 +836,11 @@ export default class ListenLayer {
       this.modifyPoint.textId = info.textInfo.textId;
       this.modifyPoint.x = info.textInfo.center.x;
       this.modifyPoint.y = info.textInfo.center.y;
+    } else if (info && info.magnifierInfo.magnifierId) {
+      this.modifyPoint = {};
+      this.modifyPoint.magnifierId = info.magnifierInfo.magnifierId;
+      this.modifyPoint.x = info.magnifierInfo.position.x;
+      this.modifyPoint.y = info.magnifierInfo.position.y;
     } else if (
       info &&
       (info.roadEdgeInfo.edgeId || info.curveRoadEdgeInfo.curveEdgeId)
@@ -941,6 +976,12 @@ export default class ListenLayer {
         VectorType.Text,
         SelectState.Select
       );
+    } else if (this.modifyPoint.magnifierId) {
+      stateService.setSelectItem(
+        this.modifyPoint.magnifierId,
+        VectorType.Magnifier,
+        SelectState.Select
+      );
     } else if (this.modifyPoint.linkedEdgeId) {
       stateService.setSelectItem(
         this.modifyPoint.linkedEdgeId,

src/graphic/Service/DataService.js

@@ -467,7 +467,26 @@ export class DataService {
     return this.vectorData.texts;
   }
 
-  //
+  /**
+   * 对放大镜的操作
+   */
+  addMagnifier(magnifier) {
+    this.vectorData.magnifiers[magnifier.vectorId] = magnifier;
+  }
+
+  getMagnifier(magnifierId) {
+    return this.vectorData.magnifiers[magnifierId];
+  }
+
+  deleteMagnifier(magnifierId) {
+    delete this.vectorData.magnifiers[magnifierId];
+  }
+
+  getMagnifiers() {
+    return this.vectorData.magnifiers;
+  }
+
+  //处理从svg转换来的图标
   addSVG(SVG) {
     this.vectorData.SVGs[SVG.vectorId] = SVG;
   }

src/graphic/Service/MagnifierService.js

@@ -0,0 +1,17 @@
+import Magnifier from "../Geometry/Magnifier.js";
+import { dataService } from "./DataService.js";
+import { mathUtil } from "../Util/MathUtil.js";
+
+export default class MagnifierService {
+  constructor() {}
+
+  // 新建magnifier
+  create(position, magnifierId) {
+    let magnifier = new Magnifier(position, magnifierId);
+    dataService.addMagnifier(magnifier);
+    return magnifier;
+  }
+}
+
+const magnifierService = new MagnifierService();
+export { magnifierService };

src/graphic/enum/LayerEvents.js

@@ -30,6 +30,9 @@ const LayerEvents = {
   AddText: "addText",
   MoveText: "moveText",
 
+  AddMagnifier: "addMagnifier",
+  MoveMagnifier: "moveMagnifier",
+
   AddSVG: "addSVG",
   MoveSVG: "moveSVG",
 

src/graphic/enum/VectorType.js

@@ -16,5 +16,6 @@ const VectorType = {
   Text: "Text",
   SVG: "SVG",
   BackgroundImg: "BackgroundImg",
+  Magnifier: "Magnifier", // 放大镜
 };
 export default VectorType;