添加直路车道

src/graphic/Style/default.js

@@ -61,7 +61,7 @@ const CurvePoint = {
 
 const ControlPoint = {
   ...Point,
-  radius: 14
+  radius: 8
 }
 
 const Text = {
@@ -72,8 +72,8 @@ const Text = {
 
 const Measure = {
   txt: "rgba(255,255,255,1)", //画墙/选墙的时候 测量值的颜色
-    strokeStyle: "rgba(255,255,255,1)",
-    lineWidth: 1,
+  strokeStyle: "rgba(255,255,255,1)",
+  lineWidth: 1,
 }
 
 const Element = {

src/graphic/Style/focus.js

@@ -4,11 +4,18 @@ const Road = {
   ...def.Road,
   strokeStyle: "rgba(243, 255, 0, 1)",
 }
+
+const CurveRoad = {
+  ...def.CurveRoad,
+  ...Road
+}
+
 const Tag = {
   ...def.Tag,
   strokeStyle: "#00C8AF",
   fillStyle: "#00C8AF",
 }
+
 const Point = {
   ...def.Point,
   lineWidth: 2,
@@ -16,8 +23,21 @@ const Point = {
   strokeStyle: "rgba(245, 255, 255, 1)",
 }
 
+const CurvePoint = {
+  ...def.CurvePoint,
+  ...Point
+}
+
+const ControlPoint = {
+  ...def.ControlPoint,
+  ...Point,
+}
+
 export default {
   Road,
   Tag,
-  Point
+  Point,
+  CurvePoint,
+  ControlPoint,
+  CurveRoad
 }

src/graphic/Renderer/Draw.js

@@ -2,7 +2,7 @@ import { dataService } from "../Service/DataService.js";
 import { stateService } from "../Service/StateService.js";
 import { measureService } from "../Service/MeasureService";
 import { coordinate } from "../Coordinate.js";
-import Style from "../style/index.js";
+import Style from "@/graphic/CanvasStyle/index.js";
 import VectorType from "../enum/VectorType.js";
 import SelectState from "../enum/SelectState.js";
 import { mathUtil } from "../Util/MathUtil.js";
@@ -109,6 +109,7 @@ export default class Draw {
   drawRoad(vector, isTemp) {
     const startReal = isTemp ? vector.start : dataService.getPoint(vector.startId)
     const endReal = isTemp ? vector.end : dataService.getPoint(vector.endId)
+
     if (vector?.midDivide?.display) {
       const ctx = this.context;
       const startScreen = coordinate.getScreenXY(startReal);
@@ -129,8 +130,107 @@ export default class Draw {
         vector.vectorId
       );
     }
-    console.log(isTemp, "绘制")
     this.drawEdge(vector, isTemp);
+    vector.leftLanes && vector.leftLanes.forEach(this.drawLan.bind(this))
+    vector.rightLanes && vector.rightLanes.forEach(this.drawLan.bind(this))
+  }
+
+  drawLan(lan) {
+    const ctx = this.context;
+    const start = coordinate.getScreenXY(lan.start)
+    const end = coordinate.getScreenXY(lan.end)
+    console.log(start, end)
+    ctx.save();
+    help.setVectorStyle(ctx, null, "Lane");
+    ctx.setLineDash(Style.Lane.dash);
+    ctx.moveTo(start.x, start.y)
+    ctx.lineTo(end.x, end.y)
+    ctx.stroke();
+    ctx.restore()
+  }
+
+  drawEdge(vector, isTemp) {
+    //判断是否与road方向一致。角度足够小，路足够宽，有可能向量方向不一致
+    const start = isTemp ? vector.start : dataService.getPoint(vector.startId);
+    const end = isTemp ? vector.end : dataService.getPoint(vector.endId);
+
+    const drawEdgeChild = (edgeVector) => {
+      const flag = mathUtil.isSameDirForVector(
+        start,
+        end,
+        edgeVector.start,
+        edgeVector.end
+      );
+
+      if (flag) {
+        ctx.beginPath();
+        const point1 = coordinate.getScreenXY(edgeVector.start);
+        const point2 = coordinate.getScreenXY(edgeVector.end);
+        ctx.moveTo(point1.x, point1.y);
+        ctx.lineTo(point2.x, point2.y);
+        ctx.stroke();
+      }
+      this.drawText(
+        {
+          x: (edgeVector.start.x + edgeVector.end.x) / 2,
+          y: (edgeVector.start.y + edgeVector.end.y) / 2,
+        },
+        edgeVector.vectorId
+      );
+    }
+
+    const leftEdge = isTemp ? vector.leftEdge : dataService.getEdge(vector.leftEdgeId);
+    const rightEdge = isTemp ? vector.rightEdge : dataService.getEdge(vector.rightEdgeId);
+    const ctx = this.context
+    ctx.save();
+    help.setVectorStyle(ctx, vector, "Edge")
+    isTemp && (ctx.globalAlpha = 0.3);
+    drawEdgeChild(leftEdge)
+    drawEdgeChild(rightEdge)
+    ctx.restore()
+  }
+
+  drawControlPoint(vector) {
+    const start = coordinate.getScreenXY(
+      dataService
+        .getEdge(vector.edgeInfo1.id)
+        .getPosition(vector.edgeInfo1.dir)
+    );
+    const end = coordinate.getScreenXY(
+      dataService
+        .getEdge(vector.edgeInfo2.id)
+        .getPosition(vector.edgeInfo2.dir)
+    )
+    const pt2 = this.twoOrderBezier(
+      0.5,
+      start, coordinate.getScreenXY({ x: vector.x, y: vector.y }),
+      end
+    );
+    const pt = this.twoOrderBezier2(0.5, start, pt2, end);
+
+    const ctx = this.context;
+    ctx.save();
+    help.setVectorStyle(ctx, null, 'Edge')
+    //曲线
+    ctx.moveTo(start.x, start.y);
+    ctx.quadraticCurveTo(pt.x, pt.y, end.x, end.y);
+    ctx.stroke();
+    ctx.restore();
+
+    ctx.save();
+    ctx.beginPath();
+    help.setVectorStyle(ctx, vector)
+    ctx.arc(
+      pt.x,
+      pt.y,
+      Style.ControlPoint.radius * coordinate.ratio,
+      0,
+      Math.PI * 2,
+      true
+    );
+    ctx.stroke();
+    ctx.fill();
+    ctx.restore();
   }
 
   drawCurveRoad(vector) {
@@ -151,7 +251,6 @@ export default class Draw {
   }
 
   drawCurveEdge(vector, isTemp) {
-    console.log(vector.curves)
     const [coves] = help.getLinesCoves([vector.curves])
 
     const ctx = this.context;
@@ -173,72 +272,12 @@ export default class Draw {
     this.context.restore();
   }
 
-  drawEdge(vector, isTemp) {
-    //判断是否与road方向一致。角度足够小，路足够宽，有可能向量方向不一致
-    const ctx = this.context
-    const start = isTemp ? vector.start : dataService.getPoint(vector.startId);
-    const end = isTemp ? vector.end : dataService.getPoint(vector.endId);
-    const leftEdge = isTemp ? vector.leftEdge : dataService.getEdge(vector.leftEdgeId);
-    const rightEdge = isTemp ? vector.rightEdge : dataService.getEdge(vector.rightEdgeId);
-
-    const leftFlag = mathUtil.isSameDirForVector(
-      start,
-      end,
-      leftEdge.start,
-      leftEdge.end
-    );
-    const rightFlag = mathUtil.isSameDirForVector(
-      start,
-      end,
-      rightEdge.start,
-      rightEdge.end
-    );
-    if (!isTemp) {
-      console.log("===>", start, end, rightEdge.start, rightEdge.end, rightFlag)
-    }
-
-    ctx.save();
-    help.setVectorStyle(ctx, vector, "Edge")
-    isTemp && (ctx.globalAlpha = 0.3);
-
-    if (leftFlag) {
-      ctx.beginPath();
-      const point1 = coordinate.getScreenXY(leftEdge.start);
-      const point2 = coordinate.getScreenXY(leftEdge.end);
-      ctx.moveTo(point1.x, point1.y);
-      ctx.lineTo(point2.x, point2.y);
-      ctx.stroke();
-    }
-    if (rightFlag) {
-      const point1 = coordinate.getScreenXY(rightEdge.start);
-      const point2 = coordinate.getScreenXY(rightEdge.end);
-      ctx.moveTo(point1.x, point1.y);
-      ctx.lineTo(point2.x, point2.y);
-      ctx.stroke();
-    }
-
-    ctx.restore();
-    this.drawText(
-      {
-        x: (leftEdge.start.x + leftEdge.end.x) / 2,
-        y: (leftEdge.start.y + leftEdge.end.y) / 2,
-      },
-      vector.leftEdgeId
-    );
-    this.drawText(
-      {
-        x: (rightEdge.start.x + rightEdge.end.x) / 2,
-        y: (rightEdge.start.y + rightEdge.end.y) / 2,
-      },
-      vector.rightEdgeId
-    );
-  }
 
   drawPoint(vector) {
     const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
 
     const ctx = this.context;
-    help.setVectorStyle(ctx, vector)
+    help.setVectorStyle(ctx, vector, vector.geoType || "Point")
     ctx.beginPath();
     ctx.arc(
       pt.x,
@@ -257,48 +296,6 @@ export default class Draw {
     }
   }
 
-  drawControlPoint(vector) {
-    const start = coordinate.getScreenXY(
-      dataService
-        .getEdge(vector.edgeInfo1.id)
-        .getPosition(vector.edgeInfo1.dir)
-    );
-    const end = coordinate.getScreenXY(
-      dataService
-        .getEdge(vector.edgeInfo2.id)
-        .getPosition(vector.edgeInfo2.dir)
-    )
-    const pt2 = this.twoOrderBezier(
-      0.5,
-      start, coordinate.getScreenXY({ x: vector.x, y: vector.y }),
-      end
-    );
-    const pt = this.twoOrderBezier2(0.5, start, pt2, end);
-
-    const ctx = this.context;
-    ctx.save();
-    help.setVectorStyle(ctx, vector)
-    //曲线
-    ctx.moveTo(start.x, start.y);
-    ctx.quadraticCurveTo(pt.x, pt.y, end.x, end.y);
-    ctx.stroke();
-    ctx.restore();
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.arc(
-      pt.x,
-      pt.y,
-      Style.ControlPoint.radius * coordinate.ratio,
-      0,
-      Math.PI * 2,
-      true
-    );
-    ctx.stroke();
-    ctx.fill();
-
-    ctx.restore();
-  }
 
   twoOrderBezier(t, p1, cp, p2) {
     //参数分别是t,起始点,控制点和终点