继续

src/graphic/Controls/AddSVG.js

@@ -6,6 +6,7 @@ export default class AddSVG {
   constructor() {
     this.newSVG = null;
     this.center = null;
+    this.value = null;
   }
 
   setCenter(value) {
@@ -13,13 +14,19 @@ export default class AddSVG {
     mathUtil.clonePoint(this.center, value);
   }
 
+  setValue(value) {
+    this.value = value;
+  }
+
   buildSVG(center) {
     this.newSVG = svgService.create(center);
+    listenLayer.clear();
   }
 
   clear() {
     this.newSVG = null;
     this.center = null;
+    this.value = null;
   }
 }
 

src/graphic/Controls/UIControl.js

@@ -97,6 +97,8 @@ export default class UIControl {
           stateService.setEventName(LayerEvents.AddSVG);
         } else if (selectUI == UIEvents.Img) {
           stateService.setEventName(LayerEvents.Img);
+        } else if (uiService.isBelongSVG(selectUI)) {
+          stateService.setEventName(LayerEvents.AddSVG);
         }
       }
     }

src/graphic/Geometry/Geometry.js

@@ -76,6 +76,10 @@ export default class Geometry {
     return this.value;
   }
 
+  getCenter() {
+    return this.center;
+  }
+
   setCenter(center) {
     if (center) {
       this.center = {};

src/graphic/Geometry/Magnifier.js

@@ -34,7 +34,10 @@ export default class Magnifier extends Geometry {
     } else {
       let line = mathUtil.createLine1(position, center);
       let vLine = mathUtil.getVerticalLine(line, position);
-      let parallelLines = mathUtil.getParallelLineForDistance(vLine, distance);
+      let parallelLines = mathUtil.getParallelLineForDistance(
+        vLine,
+        (distance * coordinate.zoom) / coordinate.defaultZoom
+      );
       let join1 = mathUtil.getJoinLinePoint(center, parallelLines.line1);
       let join2 = mathUtil.getJoinLinePoint(center, parallelLines.line2);
 
@@ -65,7 +68,6 @@ export default class Magnifier extends Geometry {
   }
 
   setImageData() {
-
     return new Promise((resolve, reject) => {
       if (this.photoUrl) {
         this.photoImage = new Image();
@@ -77,8 +79,8 @@ export default class Magnifier extends Geometry {
           reject();
         };
       } else {
-        this.photoImage = null
-        resolve()
+        this.photoImage = null;
+        resolve();
       }
     });
   }

src/graphic/Geometry/SVG.js

@@ -4,12 +4,103 @@ import { mathUtil } from "../Util/MathUtil.js";
 import { coordinate } from "../Coordinate.js";
 import Constant from "../Constant.js";
 
+//const sideWidth = 10;
 export default class SVG extends Geometry {
   constructor(center, vectorId) {
     super();
     this.center = center;
+    this.points = null; //包裹的矩形的四个顶点
+    this.angle = 0; //逆时针为负，顺时针为正。单位是：°
+    this.scale = 1; //缩放比例
     this.name = null;
     this.geoType = VectorType.SVG;
     this.setId(vectorId);
   }
+
+  // createDefaultPoints() {
+  //   this.points = [];
+  //   this.points[0] = {
+  //     x: this.center.x - sideWidth / 2,
+  //     y: this.center.y + sideWidth / 2,
+  //   };
+  //   this.points[1] = {
+  //     x: this.center.x + sideWidth / 2,
+  //     y: this.center.y + sideWidth / 2,
+  //   };
+  //   this.points[2] = {
+  //     x: this.center.x + sideWidth / 2,
+  //     y: this.center.y - sideWidth / 2,
+  //   };
+  //   this.points[3] = {
+  //     x: this.center.x - sideWidth / 2,
+  //     y: this.center.y - sideWidth / 2,
+  //   };
+  // }
+
+  getBoundingVertexs(center) {
+    const boundingVertexs = [];
+    const rec = this.getLengthWidth();
+    const length = this.getScale() * rec.length * this.scale;
+    const width = this.getScale() * rec.width * this.scale;
+
+    const minX = center.x - length / 2;
+    const minY = center.y - width / 2;
+    const maxX = center.x + length / 2;
+    const maxY = center.y + width / 2;
+
+    const point1 = this.rotatePoint(
+      {
+        x: minX,
+        y: maxY,
+      },
+      center,
+      this.angle
+    );
+
+    const point2 = this.rotatePoint(
+      {
+        x: maxX,
+        y: maxY,
+      },
+      center,
+      this.angle
+    );
+
+    const point3 = this.rotatePoint(
+      {
+        x: maxX,
+        y: minY,
+      },
+      center,
+      this.angle
+    );
+
+    const point4 = this.rotatePoint(
+      {
+        x: minX,
+        y: minY,
+      },
+      center,
+      this.angle
+    );
+
+    boundingVertexs.push(point1);
+    boundingVertexs.push(point2);
+    boundingVertexs.push(point3);
+    boundingVertexs.push(point4);
+
+    return boundingVertexs;
+  }
+
+  //不同图例，缩放比不一样
+  getScale() {
+    return 1;
+  }
+
+  getLengthWidth() {
+    return {
+      length: 32,
+      width: 32,
+    };
+  }
 }

src/graphic/Layer.js

@@ -169,6 +169,16 @@ export default class Layer {
         );
         addText.clear();
         break;
+      case LayerEvents.AddSVG:
+        stateService.setEventName(LayerEvents.MoveSVG);
+        addSVG.buildSVG(position);
+        stateService.setSelectItem(
+          addSVG.newSVG.vectorId,
+          VectorType.SVG,
+          SelectState.Select
+        );
+        addSVG.clear();
+        break;
       case LayerEvents.AddMagnifier:
         stateService.setEventName(LayerEvents.MoveMagnifier);
         addMagnifier.buildMagnifier(position);
@@ -705,6 +715,12 @@ export default class Layer {
           moveText.moveFullText(position, draggingItem.vectorId);
         }
         break;
+      case LayerEvents.MoveSVG:
+        needAutoRedraw = true;
+        if (draggingItem != null) {
+          moveSVG.moveFullSVG(position, draggingItem.vectorId);
+        }
+        break;
       case LayerEvents.MoveMagnifier:
         needAutoRedraw = true;
         if (draggingItem != null) {
@@ -872,6 +888,11 @@ export default class Layer {
         this.history.save();
         elementService.hideAll();
         break;
+      case LayerEvents.MoveSVG:
+        needAutoRedraw = true;
+        this.history.save();
+        elementService.hideAll();
+        break;
       case LayerEvents.MoveMagnifier:
         needAutoRedraw = true;
         this.history.save();

src/graphic/ListenLayer.js

@@ -31,6 +31,7 @@ export default class ListenLayer {
           exceptCurveRoadId,
           exceptCrossCrossPointId,
           exceptTextId,
+          exceptSVGId,
   }  
    * @returns 
    */
@@ -86,6 +87,10 @@ export default class ListenLayer {
       position,
       exceptVectorIds.exceptTextId
     );
+    selectInfo.svgInfo = this.isSelectSVG(
+      position,
+      exceptVectorIds.exceptSVGId
+    );
     selectInfo.magnifierInfo = this.isSelectMagnifier(
       position,
       exceptVectorIds.exceptMagnifierId
@@ -905,6 +910,34 @@ export default class ListenLayer {
     return textInfo;
   }
 
+  isSelectSVG(position, exceptSVGId) {
+    let svgInfo = {
+      svgId: null,
+      type: null,
+      distance: null,
+    };
+    const svgs = dataService.getSVGs();
+    for (const svgId in svgs) {
+      if (svgId == exceptSVGId) {
+        continue;
+      }
+      const svg = dataService.getSVG(svgId);
+      const distance = this.getDistance(position, svg.center);
+
+      if (distance < Constant.minAdsorbPix) {
+        svgInfo = {
+          svgId: svgId,
+          type: VectorType.SVG,
+          distance: distance,
+          x: svg.center.x,
+          y: svg.center.y,
+        };
+      }
+    }
+
+    return svgInfo;
+  }
+
   isSelectMagnifier(position, exceptMagnifierId) {
     let magnifierInfo = {
       magnifierId: null,

src/graphic/Renderer/Render.js

@@ -46,10 +46,13 @@ export default class Render {
         draw.drawPoint(vector);
         break;
       case VectorType.CurveLine:
-        //draw.drawCurveLine(vector);
+        draw.drawCurveLine(vector);
         break;
       case VectorType.Text:
-        draw.drawText(vector, styleType, flag);
+        draw.drawText(vector);
+        break;
+      case VectorType.SVG:
+        draw.drawSVG(vector);
         break;
       case VectorType.Circle:
         draw.drawCircle(vector);

src/graphic/Service/UIService.js

@@ -101,6 +101,13 @@ export default class UIService {
     return false;
   }
 
+  isBelongSVG(ui) {
+    if (ui == UIEvents.BusPlane) {
+      this.setSelectSVGType(ui);
+      return true;
+    }
+  }
+
   setWayType(value) {
     Settings.wayType = value;
   }
@@ -154,6 +161,10 @@ export default class UIService {
     return Settings.locationMode;
   }
 
+  setSelectSVGType(value) {
+    Settings.selectSVGType = value;
+  }
+
   //如果position在屏幕左上角，返回的就朝向右下角，如果是右下角，则返回的是左上角。其他情况以此类推
   getNewPositionForPop(position) {
     const offset = 50;

src/graphic/Settings.js

@@ -25,5 +25,6 @@ const Settings = {
   baseLineId: null, //基准线id，有且只有一条
   selectBasePointId: null, //选中的基准点
   isMobile: !os.isPc,
+  selectSVGType: null,
 };
-export default Settings;
+export default Settings;