feat:道路结构除斑马线

src/graphic/CanvasStyle/ImageLabels/SVGIcons.js

@@ -1,4 +1,76 @@
 const SVGIcons = {
+  "ZebraCrossing": {
+    text: "尸体",
+    draw: function (ctx, fillStyle, strokeStyle) {
+      ctx.save();
+      ctx.strokeStyle="rgba(0,0,0,0)";
+      ctx.miterLimit = 4;
+      // ctx.font="15px ''";
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      // ctx.font="   15px ''";
+      ctx.save();
+      ctx.fillStyle=fillStyle;
+      ctx.strokeStyle=strokeStyle;
+      // ctx.font="   15px ''";
+      ctx.beginPath();
+      ctx.arc(32, 13, 8, 0, 6.283185307179586, false);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      ctx.strokeStyle=strokeStyle;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      // ctx.font="   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(32, 44.5);
+      ctx.lineTo(24, 59.5);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      ctx.strokeStyle=strokeStyle;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      // ctx.font="   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(32, 44.5);
+      ctx.lineTo(40, 59.5);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      ctx.strokeStyle=strokeStyle;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      // ctx.font="   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(25, 33);
+      ctx.lineTo(32, 21);
+      ctx.lineTo(39, 33);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.fillStyle = "rgba(0,0,0,0)";
+      ctx.strokeStyle=strokeStyle;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      // ctx.font="   15px ''";
+      ctx.beginPath();
+      ctx.moveTo(32, 21);
+      ctx.lineTo(32, 44.5);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.restore();
+    }
+
+  },
   "chemotuoche_p.svg": {
     text: "侧三轮平面",
     draw: function (ctx, fillStyle, strokeStyle) {
@@ -3280,6 +3352,12 @@ export const typeKeys = [
       "jtxx_ryydfx.svg",
     ]
   },
+
+  // 道路结构
+  {
+    type: "道路结构",
+    children: ['ZebraCrossing']
+  },
 ]
 const types = typeKeys.map(item => item.children).flat()
 console.log("yl", Object.keys(SVGIcons).filter(type => !types.includes(type)))

src/graphic/Controls/AddRoadStructure.js

@@ -1,41 +0,0 @@
-import { mathUtil } from "../Util/MathUtil";
-import { roadStructureService } from "../Service/RoadStructureService";
-import { listenLayer } from "../ListenLayer";
-
-export default class AddRoadStructure {
-  constructor() {
-    this.newRoadStructure = null;
-    this.center = null;
-    this.value = null;
-  }
-
-  // build(position) {
-  //   const roadStructure = uiService.getSelectRoadStructure();
-  //   console.error(roadStructure)
-  
-  // }
-  setCenter(value) {
-    this.center = {};
-    mathUtil.clonePoint(this.center, value);
-  }
-
-  setValue(value) {
-    this.value = value;
-  }
-
-  buildRoadStructure(center, type) {
-    this.newRoadStructure = roadStructureService.create(center, type);
-    listenLayer.clear();
-  }
-
-  clear() {
-    this.newRoadStructure = null;
-    this.center = null;
-    this.value = null;
-  }
-
-}
-
-
-const addRoadStructure = new AddRoadStructure();
-export { addRoadStructure };

src/graphic/Controls/UIControl.js

@@ -2,7 +2,6 @@ import { coordinate } from "../Coordinate.js";
 import LayerEvents from "../enum/LayerEvents.js";
 import UIEvents from "../enum/UIEvents.js";
 import RoadTemplate from "../enum/RoadTemplate.js";
-import RoadStructure from "../enum/RoadStructure.js";
 import VectorType from "../enum/VectorType.js";
 import VectorStyle from "../enum/VectorStyle.js";
 import VectorWeight from "../enum/VectorWeight.js";
@@ -131,7 +130,6 @@ export default class UIControl {
         } else if (uiService.isBelongRoadTemplate(selectUI)) {
           stateService.setEventName(LayerEvents.AddRoadTemplate);
         } else if (uiService.isBelongRoadStructure(selectUI)) {
-          stateService.setEventName(LayerEvents.AddRoadStructure);
         } else if (selectUI == Constant.angleLocationMode) {
           uiService.setSelectLocationMode(Constant.angleLocationMode);
           let msg = locationModeControl.setAngle();

src/graphic/Geometry/Geometry.js

@@ -172,4 +172,5 @@ export default class Geometry {
   setRoadWidthTipsPos(roadWidthTipsPos) {
     this.roadWidthTipsPos = roadWidthTipsPos;
   }
+  
 }

src/graphic/Geometry/RoadStructure.js

@@ -1,134 +0,0 @@
-import VectorType from "../enum/VectorType.js";
-import Geometry from "./Geometry.js";
-import { mathUtil } from "../Util/MathUtil.js";
-import { coordinate } from "../Coordinate.js";
-import Constant from "../Constant.js";
-
-//const sideWidth = 10;
-export default class RoadStructure extends Geometry {
-  constructor(center, type, vectorId) {
-    super();
-    this.center = center;
-    this.points = null; //包裹的矩形的四个顶点
-    this.angle = 0; //逆时针为负，顺时针为正。单位是：°
-    this.type = type;
-    this.geoType = VectorType.RoadStructure;
-    this.scale = this.getScale(); //缩放比例
-    this.setBoundingVertexs();
-    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,
-  //   };
-  // }
-
-  setBoundingVertexs() {
-    this.points = [];
-    const rec = this.getLengthWidth();
-    const length = this.scale * rec.length;
-    const width = this.scale * rec.width;
-
-    const minX = this.center.x - length / 2;
-    const minY = this.center.y - width / 2;
-    const maxX = this.center.x + length / 2;
-    const maxY = this.center.y + width / 2;
-
-    const point1 = this.rotatePoint(
-      {
-        x: minX,
-        y: maxY,
-      },
-      this.center,
-      this.angle
-    );
-
-    const point2 = this.rotatePoint(
-      {
-        x: maxX,
-        y: maxY,
-      },
-      this.center,
-      this.angle
-    );
-
-    const point3 = this.rotatePoint(
-      {
-        x: maxX,
-        y: minY,
-      },
-      this.center,
-      this.angle
-    );
-
-    const point4 = this.rotatePoint(
-      {
-        x: minX,
-        y: minY,
-      },
-      this.center,
-      this.angle
-    );
-
-    this.points.push(point1);
-    this.points.push(point2);
-    this.points.push(point3);
-    this.points.push(point4);
-  }
-  setPoints(points){
-    this.points = points
-  }
-  setScale(scale) {
-    this.scale = scale
-  }
-
-
-  setBoundingVertexs2(position, pointIndex) {
-    if (mathUtil.getDistance(position, this.center) < Constant.minAdsorbPix) {
-      return;
-    }
-    mathUtil.clonePoint(this.points[pointIndex], position);
-    // 【注意】angle 逆时针为正，顺时针为负
-    let nextIndex = this.getNextIndex(pointIndex);
-    this.points[nextIndex] = this.rotatePoint(position, this.center, 90);
-    nextIndex = this.getNextIndex(nextIndex);
-    this.points[nextIndex] = this.rotatePoint(position, this.center, 180);
-    nextIndex = this.getNextIndex(nextIndex);
-    this.points[nextIndex] = this.rotatePoint(position, this.center, 270);
-  }
-
-  getNextIndex(index) {
-    let nextIndex = index + 1;
-    if (nextIndex > 3) {
-      nextIndex = nextIndex - 4;
-    }
-    return nextIndex;
-  }
-
-  //不同图例，缩放比不一样
-  getScale() {
-    return 1;
-  }
-
-  getLengthWidth() {
-    return {
-      length: 100,
-      width: 100,
-    };
-  }
-}

src/graphic/Geometry/SVG.js

@@ -3,11 +3,15 @@ import Geometry from "./Geometry.js";
 import { mathUtil } from "../Util/MathUtil.js";
 import { coordinate } from "../Coordinate.js";
 import Constant from "../Constant.js";
+import VectorCategory from "../enum/VectorCategory";
+import RoadStructure from "../enum/RoadStructure";
+import SVGType from "../enum/SVGType";
 
 //const sideWidth = 10;
 export default class SVG extends Geometry {
   constructor(center, type, vectorId) {
     super();
+    this.category = null;
     this.center = center;
     this.points = null; //包裹的矩形的四个顶点
     this.angle = 0; //逆时针为负，顺时针为正。单位是：°
@@ -16,6 +20,7 @@ export default class SVG extends Geometry {
     this.scale = this.getScale(); //缩放比例
     this.setBoundingVertexs();
     this.setId(vectorId);
+    this.checkCategory(type)
   }
 
   // createDefaultPoints() {
@@ -37,7 +42,19 @@ export default class SVG extends Geometry {
   //     y: this.center.y - sideWidth / 2,
   //   };
   // }
-
+  checkCategory(type){
+    // this.setCategory()
+    let category = ''
+    if(RoadStructure[type]){
+      category = VectorCategory.SVG['RoadStructure']
+    }else if(SVGType[type]){
+      category = VectorCategory.SVG['SVG']
+    }
+    this.setCategory(category)
+  }
+  setCategory(value) {
+    this.category = value;
+  }
   setBoundingVertexs() {
     this.points = [];
     const rec = this.getLengthWidth();

src/graphic/Layer.js

@@ -11,7 +11,6 @@ import { moveSVG } from "./Controls/MoveSVG";
 import { moveMagnifier } from "./Controls/MoveMagnifier";
 import { addRoad } from "./Controls/AddRoad";
 import { addCrossRoad } from "./Controls/AddCrossRoad";
-import { addRoadStructure } from "./Controls/AddRoadStructure";
 import { addLine } from "./Controls/AddLine";
 import { addPoint } from "./Controls/AddPoint";
 import { addCircle } from "./Controls/AddCircle";
@@ -185,20 +184,12 @@ export default class Layer {
         break;
       case LayerEvents.AddSVG:
         stateService.setEventName(LayerEvents.MoveSVG);
-        addSVG.buildSVG(position);
-        addSVG.newSVG.setType(Settings.selectSVGType);
+        addSVG.buildSVG(position,Settings.selectSVGType);
+        // addSVG.newSVG.setType(Settings.selectSVGType);
 
         stateService.setSelectItem(addSVG.newSVG.vectorId, VectorType.SVG, -1);
         addSVG.clear();
         break;
-      case LayerEvents.AddRoadStructure:
-        stateService.setEventName(LayerEvents.MoveRoadStructure);
-        addRoadStructure.buildRoadStructure(position);
-        addRoadStructure.newRoadStructure.setType(Settings.selectRoadStructure);
-
-        stateService.setSelectItem(addRoadStructure.newRoadStructure.vectorId, VectorType.RoadStructure, -1);
-        addRoadStructure.clear();
-        break;
       case LayerEvents.AddMagnifier:
         stateService.setEventName(LayerEvents.MoveMagnifier);
         addMagnifier.buildMagnifier(position);
@@ -1278,12 +1269,6 @@ export default class Layer {
         this.history.save();
         this.renderer.autoRedraw();
         break;
-      // case LayerEvents.AddRoadStructure:
-      //   // addRoadStructure.build(position);
-      //   this.history.save();
-      //   this.renderer.autoRedraw();
-      //   break;
-        
     }
     this.setEventName("mouseUp");
     stateService.clearDraggingItem();

src/graphic/Service/DataService.js

@@ -575,22 +575,6 @@ export class DataService {
   getSVGs() {
     return this.vectorData.svgs;
   }
-  addRoadStructure(RoadStructure) {
-    this.vectorData.roadStructures[RoadStructure.vectorId] = RoadStructure;
-  }
-
-  getRoadStructure(RoadStructureId) {
-    return this.vectorData.roadStructures[RoadStructureId];
-  }
-
-  deleteRoadStructure(RoadStructureId) {
-    delete this.vectorData.roadStructures[RoadStructureId];
-  }
-
-  getRoadStructures() {
-    return this.vectorData.roadStructures;
-  }
-
   clear() {
     //直路
     this.vectorData.roadPoints = {};

src/graphic/Service/RoadStructureService.js

@@ -1,31 +0,0 @@
-import RoadStructure from "../Geometry/RoadStructure.js";
-import { dataService } from "./DataService.js";
-import { mathUtil } from "../Util/MathUtil.js";
-import { uiService } from "./UIService.js";
-export default class RoadStructureService {
-  constructor() {}
-
-  create(position, type, roadStructureId) {
-    let roadStructure = new RoadStructure(position, type, roadStructureId);
-    dataService.addRoadStructure(roadStructure);
-    return roadStructure;
-  }
-
-  copy(vectorId) {
-    let roadStructure = dataService.getRoadStructure(vectorId);
-    let newCenter = uiService.getNewPositionForPop(roadStructure.center);
-    let newRoadStructure = this.create(newCenter, roadStructure.type);
-    newRoadStructure.setScale(roadStructure.scale);
-    for (let i = 0; i < roadStructure.points.length; ++i) {
-      let dx = roadStructure.points[i].x - roadStructure.center.x;
-      let dy = roadStructure.points[i].y - roadStructure.center.y;
-
-      newRoadStructure.points[i].x = newRoadStructure.center.x + dx;
-      newRoadStructure.points[i].y = newRoadStructure.center.y + dy;
-    }
-    return newRoadStructure.vectorId;
-  }
-}
-
-const roadStructureService = new RoadStructureService();
-export { roadStructureService };

src/graphic/Service/SVGService.js

@@ -8,6 +8,7 @@ export default class SVGService {
   create(position, type, svgId) {
     let svg = new SVG(position, type, svgId);
     dataService.addSVG(svg);
+  
     return svg;
   }
 

src/graphic/enum/LayerEvents.js

@@ -49,6 +49,5 @@ const LayerEvents = {
   AddRoadTemplate: "addRoadTemplate",
 
   AddRoadStructure: "addRoadStructure",
-  MoveRoadStructure: "moveRoadStructure",
 };
 export default LayerEvents;

src/graphic/enum/VectorCategory.js

@@ -27,5 +27,9 @@ const VectorCategory = {
     FixPoint: "FixPoint", //固定点
     GuidePoint: "GuidePoint", //辅助点，定位法需要
   },
+  SVG:{
+    SVG: "SVG",
+    RoadStructure: "RoadStructure"
+  }
 };
 export default VectorCategory;

src/graphic/enum/VectorType.js

@@ -17,7 +17,6 @@ const VectorType = {
   CurveRoadPoint: 'CurveRoadPoint',
   Text: 'Text',
   SVG: 'SVG',
-  RoadStructure: 'RoadStructure',
   BackgroundImg: 'BackgroundImg',
   Magnifier: 'Magnifier', // 放大镜
 };