...

src/graphic/Controls/MoveRoad.js

@@ -1083,6 +1083,16 @@ export default class MoveRoad {
     roadService.subtraRoadFromIntersect(road.endId, roadId);
     dataService.deleteRoad(roadId);
   }
+
+  /******************************************************************************************************************************************************************************/
+  moveCurveRoadPoint(pointId, position) {
+    let point = dataService.getPoint(pointId);
+    point.setPosition(position);
+    const curveRoadId = Object.keys(point.getParent())[0];
+    const curveRoad = dataService.getCurveRoad(curveRoadId);
+    updateForMovePoint(curveRoad, point);
+  }
+  /******************************************************************************************************************************************************************************/
 }
 
 const moveRoad = new MoveRoad();

src/graphic/Geometry/Geometry.js

@@ -16,6 +16,10 @@ export default class Geometry {
     }
   }
 
+  setGeoType(geoType) {
+    this.geoType = geoType;
+  }
+
   setPointParent(parentId, dir) {
     if (this.parent == null) {
       this.parent = {};

src/graphic/Layer.js

@@ -309,6 +309,11 @@ export default class Layer {
 
         addRoad.setNewRoadPoint("start", position);
         break;
+      case LayerEvents.MoveCurveRoadPoint:
+        point = dataService.getPoint(draggingItem.vectorId);
+        point.setPosition(position);
+        needAutoRedraw = true;
+        break;
       case LayerEvents.AddTag:
         needAutoRedraw = true;
         if (draggingItem == null) {
@@ -435,7 +440,7 @@ export default class Layer {
       case LayerEvents.AddingCurveRoad:
         needAutoRedraw = true;
         if (addRoad.canAdd) {
-          addRoad.buildRoad();
+          addRoad.buildCurveRoad();
           addRoad.clear();
           this.history.save();
           elementService.hideAll();

src/graphic/ListenLayer.js

@@ -256,6 +256,135 @@ export default class ListenLayer {
         _modifyPoint.linkedRoadId = roadId;
       }
     }
+
+    const curveRoads = dataService.getCurveRoads();
+    for (const curveRoadId in curveRoads) {
+      if (exceptRoadIds && exceptRoadIds.hasOwnProperty(curveRoadId)) {
+        continue;
+      }
+
+      const curveRoad = dataService.getCurveRoad(curveRoadId);
+      const startPoint = dataService.getPoint(curveRoad.startId);
+      const endPoint = dataService.getPoint(curveRoad.endId);
+      let distance = null;
+
+      //先找端点
+      if (hasPointIds.indexOf(curveRoad.startId) == -1) {
+        hasPointIds.push(curveRoad.startId);
+        distance = mathUtil.getDistance(position, startPoint);
+
+        if (min1 == null || min1.distance > distance) {
+          min1 = {
+            distance: distance,
+            pointId: curveRoad.startId,
+          };
+
+          if (min1.distance < Constant.minAdsorbPix) {
+            modifyPoint.linkedPointId = curveRoad.startId;
+            modifyPoint.x = startPoint.x;
+            modifyPoint.y = startPoint.y;
+            delete modifyPoint.linkedPointIdX;
+            delete modifyPoint.linkedPointIdY;
+            break;
+          }
+        }
+
+        //start部分找到了与x接近的其他点
+        if (Math.abs(position.x - startPoint.x) < Constant.minAdsorbPix) {
+          if (!modifyPoint.linkedPointIdX) {
+            modifyPoint.x = startPoint.x;
+            modifyPoint.linkedPointIdX = curveRoad.startId;
+          } else {
+            const linkedPointX = dataService.getPoint(
+              modifyPoint.linkedPointIdX
+            );
+            if (
+              mathUtil.getDistance(position, linkedPointX) >
+              mathUtil.getDistance(position, startPoint)
+            ) {
+              modifyPoint.x = startPoint.x;
+              modifyPoint.linkedPointIdX = curveRoad.startId;
+            }
+          }
+        }
+        //start部分找到了与y接近的其他点
+        if (Math.abs(position.y - startPoint.y) < Constant.minAdsorbPix) {
+          if (!modifyPoint.linkedPointIdY) {
+            modifyPoint.y = startPoint.y;
+            modifyPoint.linkedPointIdY = curveRoad.startId;
+          } else {
+            const linkedPointY = dataService.getPoint(
+              modifyPoint.linkedPointIdY
+            );
+            if (
+              mathUtil.getDistance(position, linkedPointY) >
+              mathUtil.getDistance(position, startPoint)
+            ) {
+              modifyPoint.y = startPoint.y;
+              modifyPoint.linkedPointIdY = curveRoad.startId;
+            }
+          }
+        }
+      }
+
+      if (hasPointIds.indexOf(curveRoad.endId) == -1) {
+        hasPointIds.push(curveRoad.endId);
+        distance = mathUtil.getDistance(position, endPoint);
+
+        if (min1 == null || min1.distance > distance) {
+          min1 = {
+            distance: distance,
+            pointId: curveRoad.endId,
+          };
+          //end部分找到了墙的端点
+          if (min1.distance < Constant.minAdsorbPix) {
+            modifyPoint.linkedPointId = curveRoad.endId;
+            modifyPoint.x = endPoint.x;
+            modifyPoint.y = endPoint.y;
+            delete modifyPoint.linkedPointIdX;
+            delete modifyPoint.linkedPointIdY;
+            break;
+          }
+        }
+        //end部分找到了与x接近的其他点
+        if (Math.abs(position.x - endPoint.x) < Constant.minAdsorbPix) {
+          if (!modifyPoint.linkedPointIdX) {
+            modifyPoint.x = endPoint.x;
+            modifyPoint.linkedPointIdX = curveRoad.endId;
+          } else {
+            const linkedPointX = dataService.getPoint(
+              modifyPoint.linkedPointIdX
+            );
+            if (
+              mathUtil.getDistance(position, linkedPointX) >
+              mathUtil.getDistance(position, endPoint)
+            ) {
+              modifyPoint.x = endPoint.x;
+              modifyPoint.linkedPointIdX = curveRoad.endId;
+            }
+          }
+        }
+        //end部分找到了与y接近的其他点
+        if (Math.abs(position.y - endPoint.y) < Constant.minAdsorbPix) {
+          if (!modifyPoint.linkedPointIdY) {
+            modifyPoint.y = endPoint.y;
+            modifyPoint.linkedPointIdY = curveRoad.endId;
+          } else {
+            const linkedPointY = dataService.getPoint(
+              modifyPoint.linkedPointIdY
+            );
+            if (
+              mathUtil.getDistance(position, linkedPointY) >
+              mathUtil.getDistance(position, endPoint)
+            ) {
+              modifyPoint.y = endPoint.y;
+              modifyPoint.linkedPointIdY = curveRoad.endId;
+            }
+          }
+        }
+      }
+    }
+
     const result = {
       minPoint: min1,
       minRoad: min2,
@@ -421,6 +550,161 @@ export default class ListenLayer {
     }
   }
 
+  // getNearForCurveRoad(position, exceptPointId, exceptRoadIds) {
+  //   let min1 = null;
+  //   let min2 = null;
+  //   const modifyPoint = {};
+  //   const hasPointIds = [];
+  //   if (exceptPointId) {
+  //     hasPointIds.push(exceptPointId);
+  //   }
+  //   const curveRoads = dataService.getCurveRoads();
+  //   for (const curveRoadId in curveRoads) {
+  //     if (exceptRoadIds && exceptRoadIds.hasOwnProperty(curveRoadId)) {
+  //       continue;
+  //     }
+
+  //     const curveRoad = dataService.getCurveRoad(curveRoadId);
+  //     const startPoint = dataService.getPoint(curveRoad.startId);
+  //     const endPoint = dataService.getPoint(curveRoad.endId);
+  //     let distance = null;
+
+  //     //先找端点
+  //     if (hasPointIds.indexOf(curveRoad.startId) == -1) {
+  //       hasPointIds.push(curveRoad.startId);
+  //       distance = mathUtil.getDistance(position, startPoint);
+
+  //       if (min1 == null || min1.distance > distance) {
+  //         min1 = {
+  //           distance: distance,
+  //           pointId: curveRoad.startId,
+  //         };
+
+  //         if (min1.distance < Constant.minAdsorbPix) {
+  //           modifyPoint.linkedPointId = curveRoad.startId;
+  //           modifyPoint.x = startPoint.x;
+  //           modifyPoint.y = startPoint.y;
+  //           delete modifyPoint.linkedPointIdX;
+  //           delete modifyPoint.linkedPointIdY;
+  //           break;
+  //         }
+  //       }
+
+  //       //start部分找到了与x接近的其他点
+  //       if (Math.abs(position.x - startPoint.x) < Constant.minAdsorbPix) {
+  //         if (!modifyPoint.linkedPointIdX) {
+  //           modifyPoint.x = startPoint.x;
+  //           modifyPoint.linkedPointIdX = curveRoad.startId;
+  //         } else {
+  //           const linkedPointX = dataService.getPoint(
+  //             modifyPoint.linkedPointIdX
+  //           );
+  //           if (
+  //             mathUtil.getDistance(position, linkedPointX) >
+  //             mathUtil.getDistance(position, startPoint)
+  //           ) {
+  //             modifyPoint.x = startPoint.x;
+  //             modifyPoint.linkedPointIdX = curveRoad.startId;
+  //           }
+  //         }
+  //       }
+  //       //start部分找到了与y接近的其他点
+  //       if (Math.abs(position.y - startPoint.y) < Constant.minAdsorbPix) {
+  //         if (!modifyPoint.linkedPointIdY) {
+  //           modifyPoint.y = startPoint.y;
+  //           modifyPoint.linkedPointIdY = curveRoad.startId;
+  //         } else {
+  //           const linkedPointY = dataService.getPoint(
+  //             modifyPoint.linkedPointIdY
+  //           );
+  //           if (
+  //             mathUtil.getDistance(position, linkedPointY) >
+  //             mathUtil.getDistance(position, startPoint)
+  //           ) {
+  //             modifyPoint.y = startPoint.y;
+  //             modifyPoint.linkedPointIdY = curveRoad.startId;
+  //           }
+  //         }
+  //       }
+  //     }
+
+  //     if (hasPointIds.indexOf(curveRoad.endId) == -1) {
+  //       hasPointIds.push(curveRoad.endId);
+  //       distance = mathUtil.getDistance(position, endPoint);
+
+  //       if (min1 == null || min1.distance > distance) {
+  //         min1 = {
+  //           distance: distance,
+  //           pointId: curveRoad.endId,
+  //         };
+  //         //end部分找到了墙的端点
+  //         if (min1.distance < Constant.minAdsorbPix) {
+  //           modifyPoint.linkedPointId = curveRoad.endId;
+  //           modifyPoint.x = endPoint.x;
+  //           modifyPoint.y = endPoint.y;
+  //           delete modifyPoint.linkedPointIdX;
+  //           delete modifyPoint.linkedPointIdY;
+  //           break;
+  //         }
+  //       }
+  //       //end部分找到了与x接近的其他点
+  //       if (Math.abs(position.x - endPoint.x) < Constant.minAdsorbPix) {
+  //         if (!modifyPoint.linkedPointIdX) {
+  //           modifyPoint.x = endPoint.x;
+  //           modifyPoint.linkedPointIdX = curveRoad.endId;
+  //         } else {
+  //           const linkedPointX = dataService.getPoint(
+  //             modifyPoint.linkedPointIdX
+  //           );
+  //           if (
+  //             mathUtil.getDistance(position, linkedPointX) >
+  //             mathUtil.getDistance(position, endPoint)
+  //           ) {
+  //             modifyPoint.x = endPoint.x;
+  //             modifyPoint.linkedPointIdX = curveRoad.endId;
+  //           }
+  //         }
+  //       }
+  //       //end部分找到了与y接近的其他点
+  //       if (Math.abs(position.y - endPoint.y) < Constant.minAdsorbPix) {
+  //         if (!modifyPoint.linkedPointIdY) {
+  //           modifyPoint.y = endPoint.y;
+  //           modifyPoint.linkedPointIdY = curveRoad.endId;
+  //         } else {
+  //           const linkedPointY = dataService.getPoint(
+  //             modifyPoint.linkedPointIdY
+  //           );
+  //           if (
+  //             mathUtil.getDistance(position, linkedPointY) >
+  //             mathUtil.getDistance(position, endPoint)
+  //           ) {
+  //             modifyPoint.y = endPoint.y;
+  //             modifyPoint.linkedPointIdY = curveRoad.endId;
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+
+  //   const result = {
+  //     minPoint: min1,
+  //     tagInfo: {},
+  //   };
+
+  //   if (modifyPoint.hasOwnProperty("x") && modifyPoint.hasOwnProperty("y")) {
+  //     result.modifyPoint = JSON.parse(JSON.stringify(modifyPoint));
+  //   } else if (modifyPoint.hasOwnProperty("x")) {
+  //     result.modifyPoint = JSON.parse(JSON.stringify(modifyPoint));
+  //     result.modifyPoint.x = modifyPoint.x;
+  //     result.modifyPoint.y = position.y;
+  //   } else if (modifyPoint.hasOwnProperty("y")) {
+  //     result.modifyPoint = JSON.parse(JSON.stringify(modifyPoint));
+  //     result.modifyPoint.x = position.x;
+  //     result.modifyPoint.y = modifyPoint.y;
+  //   }
+  //   return result;
+  // }
+
   clear() {
     this.roadInfo = {
       roadId: null,

src/graphic/Renderer/Draw.js

@@ -44,53 +44,6 @@ export default class Draw {
   }
 
   drawRoad(vector, isTemp) {
-    // this.context.save();
-    // this.context.beginPath();
-    // this.context.lineCap = "round"; //线段端点的样式
-    // //this.context.lineJoin= 'miter';
-    // this.context.strokeStyle = Style.Road.strokeStyle;
-
-    // const selectItem = stateService.getSelectItem();
-    // const draggingItem = stateService.getDraggingItem();
-    // const focusItem = stateService.getFocusItem();
-
-    // if (selectItem && selectItem.type == VectorType.Road) {
-    //   if (vector.vectorId == selectItem.vectorId) {
-    //     this.context.strokeStyle = Style.Select.Road.strokeStyle;
-    //   }
-    // } else if (draggingItem && draggingItem.type == VectorType.Road) {
-    //   if (vector.vectorId == draggingItem.vectorId) {
-    //     this.context.strokeStyle = Style.Select.Road.strokeStyle;
-    //   }
-    // } else if (focusItem && focusItem.type == VectorType.Road) {
-    //   if (vector.vectorId == focusItem.vectorId) {
-    //     this.context.strokeStyle = Style.Focus.Road.strokeStyle;
-    //   }
-    // }
-
-    // let point1, point2;
-    // if (isTemp) {
-    //   this.context.globalAlpha = 0.3;
-    //   point1 = coordinate.getScreenXY(vector.start);
-    //   point2 = coordinate.getScreenXY(vector.end);
-    //   this.drawEdge(vector, isTemp);
-    // } else {
-    //   let start = dataService.getPoint(vector.startId);
-    //   let end = dataService.getPoint(vector.endId);
-    //   point1 = coordinate.getScreenXY(start);
-    //   point2 = coordinate.getScreenXY(end);
-    //   this.drawEdge(vector, isTemp);
-    //   this.drawText(
-    //     { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 },
-    //     vector.vectorId
-    //   );
-    // }
-    // this.context.beginPath();
-    // this.context.moveTo(point1.x, point1.y);
-    // this.context.lineTo(point2.x, point2.y);
-    // this.context.stroke();
-    // this.context.restore();
-
     this.context.save();
     this.context.beginPath();
     this.context.lineCap = "round"; //线段端点的样式
@@ -116,156 +69,82 @@ export default class Draw {
     }
 
     let point1, point2;
-    let start = dataService.getPoint(vector.startId);
-    let end = dataService.getPoint(vector.endId);
-    point1 = coordinate.getScreenXY(start);
-    point2 = coordinate.getScreenXY(end);
-
-    let points = [];
-    points.push(point1);
-    points.push({
-      x: point1.x + 50,
-      y: point1.y - 50,
-    });
-    points.push({
-      x: point1.x + 100,
-      y: point1.y,
-    });
-    points.push({
-      x: point2.x - 150,
-      y: point1.y + 200,
-    });
-    points.push(point2);
-    const radius = Style.Point.radius;
-    for (let i = 0; i < points.length; ++i) {
-      this.context.save();
-      this.context.strokeStyle = "green";
-      this.context.fillStyle = "green";
-      this.context.beginPath();
-      this.context.arc(
-        points[i].x,
-        points[i].y,
-        radius * coordinate.ratio,
-        0,
-        Math.PI * 2,
-        true
+    if (isTemp) {
+      this.context.globalAlpha = 0.3;
+      point1 = coordinate.getScreenXY(vector.start);
+      point2 = coordinate.getScreenXY(vector.end);
+      this.drawEdge(vector, isTemp);
+    } else {
+      let start = dataService.getPoint(vector.startId);
+      let end = dataService.getPoint(vector.endId);
+      point1 = coordinate.getScreenXY(start);
+      point2 = coordinate.getScreenXY(end);
+      this.drawEdge(vector, isTemp);
+      this.drawText(
+        { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 },
+        vector.vectorId
       );
-      this.context.stroke();
-      this.context.fill();
-      this.context.restore();
-      if (i != points.length - 1) {
-        this.context.save();
-        this.context.strokeStyle = "red";
-        this.context.moveTo(points[i].x, points[i].y);
-        const mid = {
-          x: (points[i].x + points[i + 1].x) / 2,
-          y: (points[i].y + points[i + 1].y) / 2,
-        };
-        const line = mathUtil.createLine1(points[i], points[i + 1]);
-        const lines = mathUtil.getParallelLineForDistance(
-          line,
-          mathUtil.getDistance(points[i], points[i + 1]) / 5
-        );
-        const p1 = mathUtil.getJoinLinePoint(mid, lines.line1);
-        const p2 = mathUtil.getJoinLinePoint(mid, lines.line2);
-        const _points = [];
-        _points.push(points[i]);
-        _points.push(points[i + 1]);
-        if (i != points.length - 2) {
-          _points.push(points[i + 2]);
-        } else {
-          _points.push(points[i - 1]);
-        }
-        let cpt = null;
-        if (mathUtil.isPointInPoly(p1, _points)) {
-          cpt = p2;
-        } else {
-          cpt = p1;
-        }
-
-        this.context.quadraticCurveTo(
-          cpt.x,
-          cpt.y,
-          points[i + 1].x,
-          points[i + 1].y
-        );
-        this.context.stroke();
-        this.context.restore();
-      }
+      //this.context.lineWidth = vector.width;
     }
-    // const t =
-    //   mathUtil.getDistance(point1, pt2) /
-    //   (mathUtil.getDistance(point1, pt2) + mathUtil.getDistance(point2, pt2));
-    //const t = 0.3;
-    //const pt = this.twoOrderBezier2(t, point1, pt2, point2);
-    // let pt1 = {
-    //   x: (point1.x + pt.x) / 2,
-    //   y: point1.y - 30,
-    // };
-    // let cpt1 = this.twoOrderBezier2(0.2, point1, pt1, pt);
-
-    // let pt2 = {
-    //   x: (point2.x + pt.x) / 2,
-    //   y: point2.y + 30,
-    // };
-    // let cpt2 = this.twoOrderBezier2(0.2, pt, pt2, point2);
-
-    // this.context.moveTo(point1.x, point1.y);
-    // this.context.quadraticCurveTo(cpt1.x, cpt1.y, pt.x, pt.y);
-    // this.context.stroke();
-    // this.context.restore();
+    this.context.beginPath();
+    this.context.moveTo(point1.x, point1.y);
+    this.context.lineTo(point2.x, point2.y);
+    this.context.stroke();
+    this.context.restore();
+  }
 
-    // this.context.save();
-    // this.context.beginPath();
-    // this.context.moveTo(pt.x, pt.y);
-    // this.context.quadraticCurveTo(cpt2.x, cpt2.y, point2.x, point2.y);
-    // this.context.stroke();
-    // this.context.restore();
+  drawCurveRoad(vector, isTemp) {
+    this.context.save();
+    this.context.beginPath();
+    this.context.lineCap = "round"; //线段端点的样式
+    //this.context.lineJoin= 'miter';
+    this.context.strokeStyle = Style.Road.strokeStyle;
 
-    // let radius = Style.Point.radius;
-    // this.context.save();
-    // this.context.strokeStyle = "green";
-    // this.context.fillStyle = "green";
-    // this.context.beginPath();
-    // this.context.arc(
-    //   pt.x,
-    //   pt.y,
-    //   radius * coordinate.ratio,
-    //   0,
-    //   Math.PI * 2,
-    //   true
-    // );
-    // this.context.stroke();
-    // this.context.fill();
-    // this.context.restore();
+    const selectItem = stateService.getSelectItem();
+    const draggingItem = stateService.getDraggingItem();
+    const focusItem = stateService.getFocusItem();
 
-    // this.context.save();
-    // this.context.strokeStyle = "red";
-    // this.context.fillStyle = "red";
-    // this.context.beginPath();
-    // this.context.arc(
-    //   pt1.x,
-    //   pt1.y,
-    //   radius * coordinate.ratio,
-    //   0,
-    //   Math.PI * 2,
-    //   true
-    // );
-    // this.context.stroke();
-    // this.context.fill();
+    if (selectItem && selectItem.type == VectorType.Road) {
+      if (vector.vectorId == selectItem.vectorId) {
+        this.context.strokeStyle = Style.Select.Road.strokeStyle;
+      }
+    } else if (draggingItem && draggingItem.type == VectorType.Road) {
+      if (vector.vectorId == draggingItem.vectorId) {
+        this.context.strokeStyle = Style.Select.Road.strokeStyle;
+      }
+    } else if (focusItem && focusItem.type == VectorType.Road) {
+      if (vector.vectorId == focusItem.vectorId) {
+        this.context.strokeStyle = Style.Focus.Road.strokeStyle;
+      }
+    }
 
-    // this.context.beginPath();
-    // this.context.arc(
-    //   pt2.x,
-    //   pt2.y,
-    //   radius * coordinate.ratio,
-    //   0,
-    //   Math.PI * 2,
-    //   true
-    // );
-    // this.context.stroke();
-    // this.context.fill();
-    // this.context.restore();
+    let point1, point2;
+    if (isTemp) {
+      this.context.globalAlpha = 0.3;
+      point1 = coordinate.getScreenXY(vector.start);
+      point2 = coordinate.getScreenXY(vector.end);
+      this.drawEdge(vector, isTemp);
+    } else {
+      let start = dataService.getPoint(vector.startId);
+      let end = dataService.getPoint(vector.endId);
+      point1 = coordinate.getScreenXY(start);
+      point2 = coordinate.getScreenXY(end);
+      this.drawEdge(vector, isTemp);
+      this.drawText(
+        { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 },
+        vector.vectorId
+      );
+      //this.context.lineWidth = vector.width;
+    }
+    this.context.beginPath();
+    this.context.moveTo(point1.x, point1.y);
+    this.context.lineTo(point2.x, point2.y);
+    this.context.stroke();
+    this.context.restore();
+
+    for (let i = 0; i < vector.points.length; ++i) {
+      this.drawPoint(vector.points[i]);
+    }
   }
 
   drawEdge(vector, isTemp) {

src/graphic/Service/CurveRoadService.js

@@ -1,7 +1,9 @@
 import { dataService } from "./DataService";
 import { pointService } from "./PointService";
+import { edgeService } from "./EdgeService";
 import { mathUtil } from "../Util/MathUtil.js";
 import CurveRoad from "../Geometry/CurveRoad.js";
+import VectorType from "../enum/VectorType";
 
 export default class CurveRoadService {
   constructor() {}
@@ -12,9 +14,11 @@ export default class CurveRoadService {
 
     let startPoint = dataService.getPoint(startId);
     startPoint.setPointParent(curveRoad.vectorId, "start");
+    startPoint.setGeoType(VectorType.CurveRoadCorner);
 
     let endPoint = dataService.getPoint(endId);
     endPoint.setPointParent(curveRoad.vectorId, "end");
+    endPoint.setGeoType(VectorType.CurveRoadCorner);
 
     let edgePoints = mathUtil.RectangleVertex(
       startPoint,
@@ -41,6 +45,9 @@ export default class CurveRoadService {
       leftEdge.setEdgeParent(curveRoad.vectorId);
       rightEdge.setEdgeParent(curveRoad.vectorId);
     }
+
+    curveRoad.points.push(startPoint);
+    curveRoad.points.push(endPoint);
     this.addCPoint(
       curveRoad,
       {
@@ -49,6 +56,11 @@ export default class CurveRoadService {
       },
       0
     );
+    curveRoad.leftEdgePoints.push(edgePoints.leftEdgeStart);
+    curveRoad.leftEdgePoints.push(edgePoints.leftEdgeEnd);
+
+    curveRoad.rightEdgePoints.push(edgePoints.rightEdgeStart);
+    curveRoad.rightEdgePoints.push(edgePoints.rightEdgeEnd);
 
     let lanes = this.setLanes(
       curveRoad.points,
@@ -57,14 +69,25 @@ export default class CurveRoadService {
       curveRoad.leftDrivewayCount,
       curveRoad.rightDrivewayCount
     );
-    road.leftLanes = lanes.leftLanes;
-    road.rightLanes = lanes.rightLanes;
-    return road;
+    curveRoad.leftLanes = lanes.leftLanes;
+    curveRoad.rightLanes = lanes.rightLanes;
+    return curveRoad;
   }
 
   addCPoint(curveRoad, position, startIndex) {
     let point = pointService.create(position);
-    curveRoad.points[startIndex + 1] = point;
+    curveRoad.points.splice(startIndex + 1, 0, point);
+    point.setGeoType(VectorType.CurveRoadCorner);
+    point.setPointParent(curveRoad.vectorId, startIndex + 1);
+    for (let i = startIndex + 2; i < curveRoad.points.length; ++i) {
+      let parent = curveRoad.points[i].getParent();
+      if (
+        parent[curveRoad.vectorId] != "start" &&
+        parent[curveRoad.vectorId] != "end"
+      ) {
+        ++parent[curveRoad.vectorId];
+      }
+    }
   }
 
   moveCPoint(position) {}
@@ -98,10 +121,12 @@ export default class CurveRoadService {
     let leftdy1 = leftEdgePoints[0].y - points[0].y;
     leftdy1 = leftdy1 / leftCount;
 
-    let leftdx2 = leftEdgePoints[len - 1].x - points[len - 1].x;
+    let leftdx2 =
+      leftEdgePoints[leftEdgePoints.length - 1].x - points[len - 1].x;
     leftdx2 = leftdx2 / leftCount;
 
-    let leftdy2 = leftEdgePoints[len - 1].y - points[len - 1].y;
+    let leftdy2 =
+      leftEdgePoints[leftEdgePoints.length - 1].y - points[len - 1].y;
     leftdy2 = leftdy2 / leftCount;
 
     for (let i = 0; i < leftCount - 1; ++i) {
@@ -136,6 +161,9 @@ export default class CurveRoadService {
           );
 
           let join = mathUtil.getIntersectionPoint(line1, line2);
+          if (join == null) {
+            join = mathUtil.getLineForPoint(line1, points[j]);
+          }
           leftLanes[i][j].x = join.x;
           leftLanes[i][j].y = join.y;
         }
@@ -148,10 +176,12 @@ export default class CurveRoadService {
     let rightdy1 = rightEdgePoints[0].y - points[0].y;
     rightdy1 = rightdy1 / rightCount;
 
-    let rightdx2 = rightEdgePoints[len - 1].x - points[len - 1].x;
+    let rightdx2 =
+      rightEdgePoints[rightEdgePoints.length - 1].x - points[len - 1].x;
     rightdx2 = rightdx2 / rightCount;
 
-    let rightdy2 = rightEdgePoints[len - 1].y - points[len - 1].y;
+    let rightdy2 =
+      rightEdgePoints[rightEdgePoints.length - 1].y - points[len - 1].y;
     rightdy2 = rightdy2 / rightCount;
 
     for (let i = 0; i < rightCount - 1; ++i) {
@@ -186,6 +216,9 @@ export default class CurveRoadService {
           );
 
           let join = mathUtil.getIntersectionPoint(line1, line2);
+          if (join == null) {
+            join = mathUtil.getLineForPoint(line1, points[j]);
+          }
           rightLanes[i][j].x = join.x;
           rightLanes[i][j].y = join.y;
         }
@@ -197,6 +230,108 @@ export default class CurveRoadService {
       rightLanes: rightLanes,
     };
   }
+
+  updateForMovePoint(curveRoad, point) {
+    let index = -1;
+    for (let i = 0; i < curveRoad.points.length; ++i) {
+      if (curveRoad.points[i].vectorId == point.vectorId) {
+        index = i;
+      }
+    }
+
+    const len = points.length;
+    let leftdx1 = leftEdgePoints[0].x - points[0].x;
+    leftdx1 = leftdx1 / leftCount;
+
+    let leftdy1 = leftEdgePoints[0].y - points[0].y;
+    leftdy1 = leftdy1 / leftCount;
+
+    let leftdx2 = leftEdgePoints[len - 1].x - points[len - 1].x;
+    leftdx2 = leftdx2 / leftCount;
+
+    let leftdy2 = leftEdgePoints[len - 1].y - points[len - 1].y;
+    leftdy2 = leftdy2 / leftCount;
+
+    for (let i = 0; i < leftCount - 1; ++i) {
+      if (index == 0) {
+        curveRoad.leftLanes[i][index].x = points[index].x + leftdx1 * (i + 1);
+        curveRoad.leftLanes[i][index].y = points[index].y + leftdy1 * (i + 1);
+      } else if (index == points.length - 1) {
+        curveRoad.leftLanes[i][index].x = points[index].x + leftdx2 * (i + 1);
+        curveRoad.leftLanes[i][index].y = points[index].y + leftdy2 * (i + 1);
+      } else {
+        let edgePoints1 = mathUtil.RectangleVertex(
+          points[index],
+          points[index - 1],
+          leftdx1
+        );
+        let line1 = mathUtil.createLine1(
+          edgePoints1.leftEdgeStart,
+          edgePoints1.leftEdgeEnd
+        );
+
+        let edgePoints2 = mathUtil.RectangleVertex(
+          points[index],
+          points[index + 1],
+          leftdx1
+        );
+        let line2 = mathUtil.createLine1(
+          edgePoints2.leftEdgeStart,
+          edgePoints2.leftEdgeEnd
+        );
+
+        let join = mathUtil.getIntersectionPoint(line1, line2);
+        curveRoad.leftLanes[i][index].x = join.x;
+        curveRoad.leftLanes[i][index].y = join.y;
+      }
+    }
+
+    let rightdx1 = rightEdgePoints[0].x - points[0].x;
+    rightdx1 = rightdx1 / rightCount;
+
+    let rightdy1 = rightEdgePoints[0].y - points[0].y;
+    rightdy1 = rightdy1 / rightCount;
+
+    let rightdx2 = rightEdgePoints[len - 1].x - points[len - 1].x;
+    rightdx2 = rightdx2 / rightCount;
+
+    let rightdy2 = rightEdgePoints[len - 1].y - points[len - 1].y;
+    rightdy2 = rightdy2 / rightCount;
+
+    for (let i = 0; i < rightCount - 1; ++i) {
+      if (index == 0) {
+        curveRoad.rightLanes[i][index].x = points[index].x + rightdx1 * (i + 1);
+        curveRoad.rightLanes[i][index].y = points[index].y + rightdy1 * (i + 1);
+      } else if (index == points.length - 1) {
+        curveRoad.rightLanes[i][index].x = points[index].x + rightdy2 * (i + 1);
+        curveRoad.rightLanes[i][index].y = points[index].y + rightdy2 * (i + 1);
+      } else {
+        let edgePoints1 = mathUtil.RectangleVertex(
+          points[index],
+          points[index - 1],
+          rightdx1
+        );
+        let line1 = mathUtil.createLine1(
+          edgePoints1.rightEdgeStart,
+          edgePoints1.rightEdgeEnd
+        );
+
+        let edgePoints2 = mathUtil.RectangleVertex(
+          points[index],
+          points[index + 1],
+          rightdx1
+        );
+        let line2 = mathUtil.createLine1(
+          edgePoints2.rightEdgeStart,
+          edgePoints2.rightEdgeEnd
+        );
+
+        let join = mathUtil.getIntersectionPoint(line1, line2);
+        curveRoad.rightLanes[i][index].x = join.x;
+        curveRoad.rightLanes[i][index].y = join.y;
+      }
+    }
+  }
 }
 
 const curveRoadService = new CurveRoadService();

src/views/drawGraphic/index.vue

@@ -10,7 +10,7 @@
         {{ menu.text }}
       </div>
     </div>
-    <div class="canvas-layout">
+    <div class="canvas-layout">+
       <canvas ref="drawCanvasRef" class="draw-canvas" />
     </div>
   </div>
@@ -27,7 +27,8 @@ const setCanvasSize = () => {
 };
 
 const menus = ref([
-  { key: "road", text: "道路" },
+  { key: "road", text: "直路" },
+  { key: "curveRoad", text: "弯路" },
   { key: "tag", text: "标注" },
   { key: "measure", text: "测量线" },
   { key: "backgroundImage", text: "背景图片" },