继续

src/graphic/Controls/MoveRoad.js

@@ -1179,22 +1179,18 @@ export default class MoveRoad {
     if (curveRoad.rightEdgeId == curveEdgeId) {
       dir = "right";
     }
-    // const line = mathUtil.createLine1(
-    //   curveRoad.points[index],
-    //   curveRoad.points[index + 1]
-    // );
-    // const newWidth = mathUtil.getDisForPoinLine(position, line);
+
     if (dir == "left") {
       joinInfo = mathUtil.getHitInfoForCurve(
         position,
         curveRoad.curves[index],
-        curveRoad.leftWidth * 2
+        curveRoad.leftWidth
       );
     } else if (dir == "right") {
       joinInfo = mathUtil.getHitInfoForCurve(
         position,
         curveRoad.curves[index],
-        curveRoad.rightWidth * 2
+        curveRoad.rightWidth
       );
     }
     const newWidth = mathUtil.getDistance(joinInfo.position, position);

src/graphic/Controls/UIControl.js

@@ -3,7 +3,7 @@ import LayerEvents from "../enum/LayerEvents.js";
 import UIEvents from "../enum/UIEvents.js";
 import VectorType from "../enum/VectorType.js";
 import { stateService } from "../Service/StateService.js";
-import { measureService } from "../Service/MeasureService.js";
+import { uiService } from "../Service/UIService.js";
 import { dataService } from "../Service/DataService.js";
 import { historyService } from "../Service/HistoryService.js";
 import { elementService } from "../Service/ElementService";
@@ -64,9 +64,9 @@ export default class UIControl {
           stateService.clear();
           //。。。。
         }
-        // this.selectUI = selectUI;
+
         //执行新的事件
-        if (selectUI == UIEvents.Road) {
+        if (uiService.isBelongRoad(selectUI) || selectUI == "road") {
           stateService.setEventName(LayerEvents.AddRoad);
         } else if (selectUI == UIEvents.CurveRoad) {
           stateService.setEventName(LayerEvents.AddCurveRoad);

src/graphic/Geometry/CurveRoad.js

@@ -1,7 +1,5 @@
 import VectorType from "../enum/VectorType.js";
-import Geometry from "./Geometry.js";
 import Road from "./Road.js";
-import Constant from "../Constant";
 
 export default class CurveRoad extends Road {
   constructor(startId, endId, vectorId) {
@@ -9,8 +7,11 @@ export default class CurveRoad extends Road {
     this.points = []; //中心线上一系列控制点。数组是从start到end。
     this.leftLanesCurves = []; //左车道曲线
     this.rightLanesCurves = []; //左车道曲线
-    this.leftDrivewayCount = 2; //左边的车道个数
-    this.rightDrivewayCount = 2; //右边的车道个数
+    this.leftDrivewayCount = Setting.curveRoadLeftDrivewayCount; //左边的车道个数
+    this.rightDrivewayCount = Setting.curveRoadRightDrivewayCount; //右边的车道个数
+    this.leftWidth = Setting.leftCurveRoadWidth;
+    this.rightWidth = Setting.rightCurveRoadWidth;
+    this.midDivideWidth = Setting.curveRoadMidDivideWidth;
     this.curves = [];
     this.geoType = VectorType.CurveRoad;
     this.setId(vectorId);

src/graphic/Geometry/Road.js

@@ -1,6 +1,6 @@
 import VectorType from "../enum/VectorType.js";
 import Geometry from "./Geometry.js";
-import Constant from "../Constant";
+import Setting from "../Setting";
 
 export default class Road extends Geometry {
   constructor(startId, endId, vectorId) {
@@ -12,11 +12,12 @@ export default class Road extends Geometry {
     this.leftLanes = []; //二维数组。第一维表示第几个车道，第二维是一组点
     this.rightLanes = [];
     this.midDivide = null; //道路中间隔离栏 ，起点和终点与startId和endId方向一致。但是坐标有区别。因为隔离栏要比start-end短一些
-    this.leftDrivewayCount = 1; //左边的车道个数
-    this.rightDrivewayCount = 1; //右边的车道个数
+    this.leftDrivewayCount = Setting.roadLeftDrivewayCount; //左边的车道个数
+    this.rightDrivewayCount = Setting.roadRightDrivewayCount; //右边的车道个数
     this.geoType = VectorType.Road;
-    this.leftWidth = Constant.defaultRoadWidth / 2;
-    this.rightWidth = Constant.defaultRoadWidth / 2;
+    this.leftWidth = Setting.leftRoadWidth;
+    this.rightWidth = Setting.rightRoadWidth;
+    this.midDivideWidth = Setting.roadMidDivideWidth;
     this.setId(vectorId);
   }
 

src/graphic/ListenLayer.js

@@ -474,51 +474,43 @@ export default class ListenLayer {
       const road = dataService.getRoad(roadId);
       let startPoint = dataService.getRoadPoint(road.startId);
       let endPoint = dataService.getRoadPoint(road.endId);
+      const leftEdge = dataService.getRoadEdge(road.leftEdgeId);
+      const rightEdge = dataService.getRoadEdge(road.rightEdgeId);
       const roadLine = roadService.getMidLine(road);
-      const join = mathUtil.getJoinLinePoint(position, roadLine);
+      let join = mathUtil.getJoinLinePoint(position, roadLine);
       const distance = mathUtil.getDistance(position, join);
       if (!mathUtil.isContainForSegment(join, startPoint, endPoint)) {
         continue;
       }
-      if (distance < Constant.minAdsorbPix / 2) {
+      if (distance < Constant.minAdsorbPix) {
         roadInfo = {
           roadId: roadId,
           type: VectorType.Road,
           distance: distance,
         };
       }
-      //左边
-      else if (mathUtil.isClockwise([startPoint, join, position])) {
-        if (distance < road.leftWidth - Constant.minAdsorbPix) {
-          roadInfo = {
-            roadId: roadId,
-            type: VectorType.Road,
-            distance: distance,
-          };
-        } else if (distance < road.leftWidth + Constant.minAdsorbPix) {
+      //检查edge
+      else {
+        let leftLine = mathUtil.createLine1(leftEdge.start, leftEdge.end);
+        join = mathUtil.getJoinLinePoint(position, leftLine);
+        if (distance < Constant.minAdsorbPix) {
           edgeInfo = {
             edgeId: road.leftEdgeId,
             type: VectorType.RoadEdge,
             distance: distance,
             dir: "left",
           };
-        }
-      }
-      //右边
-      else {
-        if (distance < road.rightWidth - Constant.minAdsorbPix) {
-          roadInfo = {
-            roadId: roadId,
-            type: VectorType.Road,
-            distance: distance,
-          };
-        } else if (distance < road.rightWidth + Constant.minAdsorbPix) {
-          edgeInfo = {
-            edgeId: road.rightEdgeId,
-            type: VectorType.RoadEdge,
-            distance: distance,
-            dir: "right",
-          };
+        } else {
+          let rightLine = mathUtil.createLine1(rightEdge.start, rightEdge.end);
+          join = mathUtil.getJoinLinePoint(position, rightLine);
+          if (distance < Constant.minAdsorbPix) {
+            edgeInfo = {
+              edgeId: road.rightEdgeId,
+              type: VectorType.RoadEdge,
+              distance: distance,
+              dir: "right",
+            };
+          }
         }
       }
     }
@@ -576,35 +568,29 @@ export default class ListenLayer {
       let joinInfo = this.distanceForBezier(
         position,
         curveRoad.curves,
-        Math.max(curveRoad.leftWidth, curveRoad.rightWidth)
+        Constant.minAdsorbPix
       );
-
-      if (
-        mathUtil.isClockwise([curveRoad.points[0], joinInfo.position, position])
-      ) {
-        //选中了路
-        if (joinInfo.distance < curveRoad.leftWidth - Constant.minAdsorbPix) {
-          curveRoadInfo = {
-            curveRoadId: curveRoadId,
-            type: VectorType.CurveRoad,
-            distance: joinInfo.distance,
-            x: joinInfo.position.x,
-            y: joinInfo.position.y,
-          };
-        }
-        //选中了edge
-        else if (
-          joinInfo.distance <
-          curveRoad.leftWidth + Constant.minAdsorbPix
-        ) {
-          const leftCurveEdge = dataService.getCurveRoadEdge(
-            curveRoad.leftEdgeId
-          );
-          joinInfo = this.distanceForBezier(
-            position,
-            leftCurveEdge.curves,
-            curveRoad.leftWidth
-          );
+      //选中了路
+      if (joinInfo.distance < Constant.minAdsorbPix) {
+        curveRoadInfo = {
+          curveRoadId: curveRoadId,
+          type: VectorType.CurveRoad,
+          distance: joinInfo.distance,
+          x: joinInfo.position.x,
+          y: joinInfo.position.y,
+        };
+      }
+      //检查edge
+      else {
+        const leftCurveEdge = dataService.getCurveRoadEdge(
+          curveRoad.leftEdgeId
+        );
+        joinInfo = this.distanceForBezier(
+          position,
+          leftCurveEdge.curves,
+          Constant.minAdsorbPix
+        );
+        if (joinInfo.distance < Constant.minAdsorbPix) {
           const index = mathUtil.getIndexForCurvesPoints(
             joinInfo.position,
             curveRoad.points
@@ -617,49 +603,29 @@ export default class ListenLayer {
             x: joinInfo.position.x,
             y: joinInfo.position.y,
           };
-        }
-      } else if (
-        !mathUtil.isClockwise([
-          curveRoad.points[0],
-          joinInfo.position,
-          position,
-        ])
-      ) {
-        //选中了路
-        if (joinInfo.distance < curveRoad.rightWidth - Constant.minAdsorbPix) {
-          curveRoadInfo = {
-            curveRoadId: curveRoadId,
-            type: VectorType.CurveRoad,
-            distance: joinInfo.distance,
-            x: joinInfo.position.x,
-            y: joinInfo.position.y,
-          };
-        }
-        //选中了edge
-        else if (
-          joinInfo.distance <
-          curveRoad.rightWidth + Constant.minAdsorbPix
-        ) {
+        } else {
           const rightCurveEdge = dataService.getCurveRoadEdge(
             curveRoad.rightEdgeId
           );
           joinInfo = this.distanceForBezier(
             position,
             rightCurveEdge.curves,
-            curveRoad.rightWidth
-          );
-          const index = mathUtil.getIndexForCurvesPoints(
-            joinInfo.position,
-            curveRoad.points
+            Constant.minAdsorbPix
           );
-          curveEdgeInfo = {
-            curveEdgeId: curveRoad.rightEdgeId,
-            type: VectorType.CurveRoadEdge,
-            distance: joinInfo.distance,
-            selectIndex: index,
-            x: joinInfo.position.x,
-            y: joinInfo.position.y,
-          };
+          if (joinInfo.distance < Constant.minAdsorbPix) {
+            const index = mathUtil.getIndexForCurvesPoints(
+              joinInfo.position,
+              curveRoad.points
+            );
+            curveEdgeInfo = {
+              curveEdgeId: curveRoad.rightEdgeId,
+              type: VectorType.CurveRoadEdge,
+              distance: joinInfo.distance,
+              selectIndex: index,
+              x: joinInfo.position.x,
+              y: joinInfo.position.y,
+            };
+          }
         }
       }
     }
@@ -852,16 +818,18 @@ export default class ListenLayer {
         this.modifyPoint.x = info.curveLineInfo.x;
         this.modifyPoint.y = info.curveLineInfo.y;
       }
-    } else if (info && info.pointInfo.linkedRoadPointIdX) {
+    } else if (info && info.roadPointInfo.linkedRoadPointIdX) {
       this.modifyPoint = {};
-      this.modifyPoint.linkedPointIdX = info.pointInfo.linkedRoadPointIdX;
-      this.modifyPoint.x = info.pointInfo.x;
-      this.modifyPoint.y = info.pointInfo.y;
-    } else if (info && info.pointInfo.linkedRoadPointIdY) {
+      this.modifyPoint.linkedRoadPointIdX =
+        info.roadPointInfo.linkedRoadPointIdX;
+      this.modifyPoint.x = info.roadPointInfo.x;
+      this.modifyPoint.y = info.roadPointInfo.y;
+    } else if (info && info.roadPointInfo.linkedRoadPointIdY) {
       this.modifyPoint = {};
-      this.modifyPoint.linkedPointIdY = info.pointInfo.linkedRoadPointIdY;
-      this.modifyPoint.y = info.pointInfo.y;
-      this.modifyPoint.x = info.pointInfo.x;
+      this.modifyPoint.linkedRoadPointIdY =
+        info.roadPointInfo.linkedRoadPointIdY;
+      this.modifyPoint.y = info.roadPointInfo.y;
+      this.modifyPoint.x = info.roadPointInfo.x;
     } else if (info && info.curvePointInfo.linkedRoadPointIdX) {
       this.modifyPoint = {};
       this.modifyPoint.linkedRoadPointIdX =
@@ -874,6 +842,16 @@ export default class ListenLayer {
         info.curvePointInfo.linkedRoadPointIdY;
       this.modifyPoint.y = info.curvePointInfo.y;
       this.modifyPoint.x = position.x;
+    } else if (info && info.pointInfo.linkedPointIdX) {
+      this.modifyPoint = {};
+      this.modifyPoint.linkedPointIdX = info.pointInfo.linkedPointIdX;
+      this.modifyPoint.x = info.pointInfo.x;
+      this.modifyPoint.y = info.pointInfo.y;
+    } else if (info && info.pointInfo.linkedPointIdY) {
+      this.modifyPoint = {};
+      this.modifyPoint.linkedPointIdY = info.pointInfo.linkedPointIdY;
+      this.modifyPoint.y = info.pointInfo.y;
+      this.modifyPoint.x = info.pointInfo.x;
     } else {
       this.modifyPoint = null;
     }

src/graphic/Service/CurveRoadService.js

@@ -26,7 +26,7 @@ export default class CurveRoadService extends RoadService {
     let edgePoints = mathUtil.RectangleVertex(
       startPoint,
       endPoint,
-      curveRoad.leftWidth + curveRoad.rightWidth
+      curveRoad.leftWidth + curveRoad.rightWidth + curveRoad.midDivideWidth
     );
     let leftEdge = curveEdgeService.create(
       edgePoints.leftEdgeStart,
@@ -293,11 +293,18 @@ export default class CurveRoadService extends RoadService {
           if (!leftLanes[i]) {
             leftLanes[i] = [];
           }
-          const leftdx = (leftEdgePoints[j].x - points[j].x) / leftCount;
-          const leftdy = (leftEdgePoints[j].y - points[j].y) / leftCount;
+          const leftRatio =
+            curveRoad.leftWidth /
+            (curveRoad.leftWidth + curveRoad.midDivideWidth / 2);
+          const leftdx =
+            ((leftEdgePoints[j].x - points[j].x) * leftRatio) / leftCount;
+          const leftdy =
+            ((leftEdgePoints[j].y - points[j].y) * leftRatio) / leftCount;
+          const middx = (leftEdgePoints[j].x - points[j].x) * (1 - leftRatio);
+          const middy = (leftEdgePoints[j].y - points[j].y) * (1 - leftRatio);
           leftLanes[i][j] = {};
-          leftLanes[i][j].x = points[j].x + leftdx * (i + 1);
-          leftLanes[i][j].y = points[j].y + leftdy * (i + 1);
+          leftLanes[i][j].x = points[j].x + middx + leftdx * (i + 1);
+          leftLanes[i][j].y = points[j].y + middy + leftdy * (i + 1);
         }
         leftLanesCurves[i] = mathUtil.getCurvesByPoints(leftLanes[i]);
       }
@@ -311,11 +318,18 @@ export default class CurveRoadService extends RoadService {
           if (!rightLanes[i]) {
             rightLanes[i] = [];
           }
-          const rightdx = (rightEdgePoints[j].x - points[j].x) / rightCount;
-          const rightdy = (rightEdgePoints[j].y - points[j].y) / rightCount;
+          const rightRatio =
+            curveRoad.rightWidth /
+            (curveRoad.rightWidth + curveRoad.midDivideWidth / 2);
+          const rightdx =
+            ((rightEdgePoints[j].x - points[j].x) * rightRatio) / rightCount;
+          const rightdy =
+            ((rightEdgePoints[j].y - points[j].y) * rightRatio) / rightCount;
+          const middx = (rightEdgePoints[j].x - points[j].x) * (1 - rightRatio);
+          const middy = (rightEdgePoints[j].y - points[j].y) * (1 - rightRatio);
           rightLanes[i][j] = {};
-          rightLanes[i][j].x = points[j].x + rightdx * (i + 1);
-          rightLanes[i][j].y = points[j].y + rightdy * (i + 1);
+          rightLanes[i][j].x = points[j].x + middx + rightdx * (i + 1);
+          rightLanes[i][j].y = points[j].y + middy + rightdy * (i + 1);
         }
         rightLanesCurves[i] = mathUtil.getCurvesByPoints(rightLanes[i]);
       }
@@ -331,17 +345,23 @@ export default class CurveRoadService extends RoadService {
     if (newCount < 0) {
       newCount = 0;
     }
-
+    let ratio = null;
     if (dir == "left") {
       curveEdge = dataService.getCurveRoadEdge(curveRoad.leftEdgeId);
       oldCount = curveRoad.leftDrivewayCount;
       curveRoad.leftDrivewayCount = newCount;
       lanes = curveRoad.leftLanes;
+      ratio =
+        curveRoad.leftWidth /
+        (curveRoad.leftWidth + curveRoad.midDivideWidth / 2);
     } else if (dir == "right") {
       curveEdge = dataService.getCurveRoadEdge(curveRoad.rightEdgeId);
       oldCount = curveRoad.rightDrivewayCount;
       curveRoad.rightDrivewayCount = newCount;
       lanes = curveRoad.rightLanes;
+      ratio =
+        curveRoad.rightWidth /
+        (curveRoad.rightWidth + curveRoad.midDivideWidth / 2);
     }
 
     if (newCount == oldCount) {
@@ -355,10 +375,16 @@ export default class CurveRoadService extends RoadService {
     }
 
     for (let i = 0; i < curveRoad.points.length; ++i) {
-      const dx = (curveEdge.points[i].x - curveRoad.points[i].x) / oldCount;
-      curveEdge.points[i].x = curveRoad.points[i].x + dx * newCount;
-      const dy = (curveEdge.points[i].y - curveRoad.points[i].y) / oldCount;
-      curveEdge.points[i].y = curveRoad.points[i].y + dy * newCount;
+      const middx =
+        (curveEdge.points[i].x - curveRoad.points[i].x) * (1 - ratio);
+      const middy =
+        (curveEdge.points[i].y - curveRoad.points[i].y) * (1 - ratio);
+      const dx =
+        ((curveEdge.points[i].x - curveRoad.points[i].x) * ratio) / oldCount;
+      curveEdge.points[i].x = curveRoad.points[i].x + middx + dx * newCount;
+      const dy =
+        ((curveEdge.points[i].y - curveRoad.points[i].y) * ratio) / oldCount;
+      curveEdge.points[i].y = curveRoad.points[i].y + middy + dy * newCount;
     }
 
     mathUtil.clonePoint(curveEdge.start, curveEdge.points[0]);
@@ -372,13 +398,17 @@ export default class CurveRoadService extends RoadService {
     const line = mathUtil.createLine1(curveRoad.points[0], curveRoad.points[1]);
     if (dir == "left") {
       const leftCurveEdge = dataService.getCurveRoadEdge(curveRoad.leftEdgeId);
-      const leftWidth = mathUtil.getDisForPoinLine(leftCurveEdge.start, line);
+      const leftWidth =
+        mathUtil.getDisForPoinLine(leftCurveEdge.start, line) -
+        curveRoad.midDivideWidth / 2;
       curveRoad.setWidth(leftWidth, "left");
     } else if (dir == "right") {
       const rightCurveEdge = dataService.getCurveRoadEdge(
         curveRoad.rightEdgeId
       );
-      const rightWidth = mathUtil.getDisForPoinLine(rightCurveEdge.start, line);
+      const rightWidth =
+        mathUtil.getDisForPoinLine(rightCurveEdge.start, line) -
+        curveRoad.midDivideWidth / 2;
       curveRoad.setWidth(rightWidth, "right");
     }
   }
@@ -477,7 +507,7 @@ export default class CurveRoadService extends RoadService {
       curveEdgeService.setCurves(rightCurveEdge);
     }
     this.setLanes(curveRoad, dir);
-    curveRoad.setWidth(newWidth, dir);
+    curveRoad.setWidth(newWidth + curveRoad.midDivideWidth / 2, dir);
   }
 
   setCurves(curveRoad) {

src/graphic/Service/ElementService.js

@@ -289,13 +289,13 @@ export class ElementService {
           this.setCheckLinesY(linkedPointY, position);
           this.showCheckLinesY();
         } else if (listenLayer.modifyPoint.linkedCurveRoadPointIdY) {
-          linkedPointY = dataService.getCurveRoadPoint(
+          let linkedPointY = dataService.getCurveRoadPoint(
             listenLayer.modifyPoint.linkedCurveRoadPointIdY
           );
           this.setCheckLinesY(linkedPointY, position);
           this.showCheckLinesY();
         } else if (listenLayer.modifyPoint.linkedPointIdY) {
-          linkedPointY = dataService.getPoint(
+          let linkedPointY = dataService.getPoint(
             listenLayer.modifyPoint.linkedPointIdY
           );
           this.setCheckLinesY(linkedPointY, position);

src/graphic/Service/RoadService.js

@@ -949,32 +949,30 @@ export default class RoadService {
     let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
     const leftCount = road.leftDrivewayCount;
     const rightCount = road.rightDrivewayCount;
+    const leftRatio =
+      road.leftWidth / (road.leftWidth + road.midDivideWidth / 2);
+    const rightRatio =
+      road.rightWidth / (road.rightWidth + road.midDivideWidth / 2);
 
-    let leftdx1 = leftEdge.start.x - startPoint.x;
-    leftdx1 = leftdx1 / leftCount;
+    let leftdx1 = ((leftEdge.start.x - startPoint.x) * leftRatio) / leftCount;
+    let leftdy1 = ((leftEdge.start.y - startPoint.y) * leftRatio) / leftCount;
 
-    let leftdy1 = leftEdge.start.y - startPoint.y;
-    leftdy1 = leftdy1 / leftCount;
+    let leftdx2 = ((leftEdge.end.x - endPoint.x) * leftRatio) / leftCount;
+    let leftdy2 = ((leftEdge.end.y - endPoint.y) * leftRatio) / leftCount;
 
-    let leftdx2 = leftEdge.end.x - endPoint.x;
-    leftdx2 = leftdx2 / leftCount;
+    let rightdx1 =
+      ((rightEdge.start.x - startPoint.x) * rightRatio) / rightCount;
+    let rightdy1 =
+      ((rightEdge.start.y - startPoint.y) * rightRatio) / rightCount;
 
-    let leftdy2 = leftEdge.end.y - endPoint.y;
-    leftdy2 = leftdy2 / leftCount;
-
-    let rightdx1 = rightEdge.start.x - startPoint.x;
-    rightdx1 = rightdx1 / rightCount;
-
-    let rightdy1 = rightEdge.start.y - startPoint.y;
-    rightdy1 = rightdy1 / rightCount;
-
-    let rightdx2 = rightEdge.end.x - endPoint.x;
-    rightdx2 = rightdx2 / rightCount;
-
-    let rightdy2 = rightEdge.end.y - endPoint.y;
-    rightdy2 = rightdy2 / rightCount;
+    let rightdx2 = ((rightEdge.end.x - endPoint.x) * rightRatio) / rightCount;
+    let rightdy2 = ((rightEdge.end.y - endPoint.y) * rightRatio) / rightCount;
 
     if (dir1 == "left" || !dir1) {
+      let middx1 = (leftEdge.start.x - startPoint.x) * (1 - leftRatio);
+      let middy1 = (leftEdge.start.y - startPoint.y) * (1 - leftRatio);
+      let middx2 = (leftEdge.end.x - endPoint.x) * (1 - leftRatio);
+      let middy2 = (leftEdge.end.y - endPoint.y) * (1 - leftRatio);
       for (let i = 0; i < leftCount - 1; ++i) {
         if (!road.leftLanes[i]) {
           road.leftLanes[i] = {};
@@ -982,20 +980,24 @@ export default class RoadService {
 
         if (dir2 == "start" || !dir2) {
           road.leftLanes[i].start = {};
-          road.leftLanes[i].start.x = startPoint.x + leftdx1 * (i + 1);
-          road.leftLanes[i].start.y = startPoint.y + leftdy1 * (i + 1);
+          road.leftLanes[i].start.x = startPoint.x + middx1 + leftdx1 * (i + 1);
+          road.leftLanes[i].start.y = startPoint.y + middy1 + leftdy1 * (i + 1);
         }
 
         if (dir2 == "end" || !dir2) {
           road.leftLanes[i].end = {};
-          road.leftLanes[i].end.x = endPoint.x + leftdx2 * (i + 1);
-          road.leftLanes[i].end.y = endPoint.y + leftdy2 * (i + 1);
+          road.leftLanes[i].end.x = endPoint.x + middx2 + leftdx2 * (i + 1);
+          road.leftLanes[i].end.y = endPoint.y + middy2 + leftdy2 * (i + 1);
         }
       }
       road.leftLanes.splice(leftCount - 1);
     }
 
     if (dir1 == "right" || !dir1) {
+      let middx1 = (rightEdge.start.x - startPoint.x) * (1 - rightRatio);
+      let middy1 = (rightEdge.start.y - startPoint.y) * (1 - rightRatio);
+      let middx2 = (rightEdge.end.x - endPoint.x) * (1 - rightRatio);
+      let middy2 = (rightEdge.end.y - endPoint.y) * (1 - rightRatio);
       for (let i = 0; i < rightCount - 1; ++i) {
         if (!road.rightLanes[i]) {
           road.rightLanes[i] = {};
@@ -1003,14 +1005,16 @@ export default class RoadService {
 
         if (dir2 == "start" || !dir2) {
           road.rightLanes[i].start = {};
-          road.rightLanes[i].start.x = startPoint.x + rightdx1 * (i + 1);
-          road.rightLanes[i].start.y = startPoint.y + rightdy1 * (i + 1);
+          road.rightLanes[i].start.x =
+            startPoint.x + middx1 + rightdx1 * (i + 1);
+          road.rightLanes[i].start.y =
+            startPoint.y + middy1 + rightdy1 * (i + 1);
         }
 
         if (dir2 == "end" || !dir2) {
           road.rightLanes[i].end = {};
-          road.rightLanes[i].end.x = endPoint.x + rightdx2 * (i + 1);
-          road.rightLanes[i].end.y = endPoint.y + rightdy2 * (i + 1);
+          road.rightLanes[i].end.x = endPoint.x + middx2 + rightdx2 * (i + 1);
+          road.rightLanes[i].end.y = endPoint.y + middy2 + rightdy2 * (i + 1);
         }
       }
       road.rightLanes.splice(rightCount - 1);
@@ -1054,33 +1058,43 @@ export default class RoadService {
     let leftEdge = dataService.getRoadEdge(road.leftEdgeId);
     let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
 
+    const leftRatio =
+      road.leftWidth / (road.leftWidth + road.midDivideWidth / 2);
+    const rightRatio =
+      road.rightWidth / (road.rightWidth + road.midDivideWidth / 2);
+
+    let middx1, middy1, middx2, middy2;
+
     if (dir == "left") {
       oldCount = road.leftDrivewayCount;
       if (oldCount != 0) {
-        dx1 = leftEdge.start.x - startPoint.x;
-        dx1 = dx1 / oldCount;
-        dy1 = leftEdge.start.y - startPoint.y;
-        dy1 = dy1 / oldCount;
-
-        dx2 = leftEdge.end.x - endPoint.x;
-        dx2 = dx2 / oldCount;
-        dy2 = leftEdge.end.y - endPoint.y;
-        dy2 = dy2 / oldCount;
+        dx1 = ((leftEdge.start.x - startPoint.x) * leftRatio) / oldCount;
+        dy1 = ((leftEdge.start.y - startPoint.y) * leftRatio) / oldCount;
+
+        dx2 = ((leftEdge.end.x - endPoint.x) * leftRatio) / oldCount;
+        dy2 = ((leftEdge.end.y - endPoint.y) * leftRatio) / oldCount;
       }
+
+      middx1 = (leftEdge.start.x - startPoint.x) * (1 - leftRatio);
+      middy1 = (leftEdge.start.y - startPoint.y) * (1 - leftRatio);
+      middx2 = (leftEdge.end.x - endPoint.x) * (1 - leftRatio);
+      middy2 = (leftEdge.end.y - endPoint.y) * (1 - leftRatio);
+
       road.leftDrivewayCount = newCount;
     } else if (dir == "right") {
       oldCount = road.rightDrivewayCount;
       if (oldCount != 0) {
-        dx1 = rightEdge.start.x - startPoint.x;
-        dx1 = dx1 / oldCount;
-        dy1 = rightEdge.start.y - startPoint.y;
-        dy1 = dy1 / oldCount;
-
-        dx2 = rightEdge.end.x - endPoint.x;
-        dx2 = dx2 / oldCount;
-        dy2 = rightEdge.end.y - endPoint.y;
-        dy2 = dy2 / oldCount;
+        dx1 = ((rightEdge.start.x - startPoint.x) * rightRatio) / oldCount;
+        dy1 = ((rightEdge.start.y - startPoint.y) * rightRatio) / oldCount;
+
+        dx2 = ((rightEdge.end.x - endPoint.x) * rightRatio) / oldCount;
+        dy2 = ((rightEdge.end.y - endPoint.y) * rightRatio) / oldCount;
       }
+      middx1 = (rightEdge.start.x - startPoint.x) * (1 - rightRatio);
+      middy1 = (rightEdge.start.y - startPoint.y) * (1 - rightRatio);
+      middx2 = (rightEdge.end.x - endPoint.x) * (1 - rightRatio);
+      middy2 = (rightEdge.end.y - endPoint.y) * (1 - rightRatio);
+
       road.rightDrivewayCount = newCount;
     }
 
@@ -1095,31 +1109,35 @@ export default class RoadService {
     }
 
     edgeStartPosition = {
-      x: startPoint.x + dx1 * newCount,
-      y: startPoint.y + dy1 * newCount,
+      x: startPoint.x + middx1 + dx1 * newCount,
+      y: startPoint.y + middy1 + dy1 * newCount,
     };
     edgeEndPosition = {
-      x: endPoint.x + dx2 * newCount,
-      y: endPoint.y + dy2 * newCount,
+      x: endPoint.x + middx2 + dx2 * newCount,
+      y: endPoint.y + middy2 + dy2 * newCount,
     };
 
     if (dir == "left") {
       mathUtil.clonePoint(leftEdge.start, edgeStartPosition);
       mathUtil.clonePoint(leftEdge.end, edgeEndPosition);
-      road.leftDrivewayCount = newCount;
     } else if (dir == "right") {
       mathUtil.clonePoint(rightEdge.start, edgeStartPosition);
       mathUtil.clonePoint(rightEdge.end, edgeEndPosition);
-      road.rightDrivewayCount = newCount;
     }
 
     let line = roadService.getMidLine(road);
     if (dir == "left") {
       let join = mathUtil.getJoinLinePoint(leftEdge.start, line);
-      road.setWidth(mathUtil.getDistance(leftEdge.start, join), dir);
+      road.setWidth(
+        mathUtil.getDistance(leftEdge.start, join) - road.midDivideWidth / 2,
+        dir
+      );
     } else if (dir == "right") {
       let join = mathUtil.getJoinLinePoint(rightEdge.start, line);
-      road.setWidth(mathUtil.getDistance(rightEdge.start, join), dir);
+      road.setWidth(
+        mathUtil.getDistance(rightEdge.start, join) - road.midDivideWidth / 2,
+        dir
+      );
     }
 
     edgeService.updateEdgeForMulRoad(road.startId);
@@ -1133,7 +1151,7 @@ export default class RoadService {
     let endPoint = dataService.getRoadPoint(road.endId);
     let leftEdge = dataService.getRoadEdge(road.leftEdgeId);
     let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
-    road.setWidth(newWidth, dir);
+    road.setWidth(newWidth + road.midDivideWidth / 2, dir);
     let edgePoints = mathUtil.RectangleVertex(startPoint, endPoint, newWidth);
     if (dir == "left") {
       mathUtil.clonePoint(leftEdge.start, edgePoints.leftEdgeStart);

src/graphic/Service/UIService.js

@@ -0,0 +1,68 @@
+import Tag from "../Geometry/Tag.js";
+import { dataService } from "./DataService.js";
+import { mathUtil } from "../Util/MathUtil.js";
+import Setting from "../Setting";
+
+export default class UIService {
+  constructor() {}
+
+  isBelongRoad(ui) {
+    if (ui == "OneEdgeOneLanRoad") {
+      this.setRoadLeftDrivewayCount(0);
+      this.setRoadRightDrivewayCount(0);
+      return true;
+    } else if (ui == "OneEdgeTwoLanRoad") {
+      this.setRoadLeftDrivewayCount(0);
+      this.setRoadRightDrivewayCount(0);
+      return true;
+    } else if (ui == "OneEdgeThreeLanRoad") {
+      this.setRoadLeftDrivewayCount(0);
+      this.setRoadRightDrivewayCount(0);
+      return true;
+    } else if (ui == "TwoEdgeOneLanRoad") {
+      this.setRoadLeftDrivewayCount(1);
+      this.setRoadRightDrivewayCount(1);
+      return true;
+    } else if (ui == "TwoEdgeTwoLanRoad") {
+      this.setRoadLeftDrivewayCount(2);
+      this.setRoadRightDrivewayCount(2);
+      return true;
+    } else if (ui == "TwoEdgeThreeLanRoad") {
+      this.setRoadLeftDrivewayCount(3);
+      this.setRoadRightDrivewayCount(3);
+      return true;
+    }
+    return false;
+  }
+
+  isBelongCurveRoad(ui) {
+    if (ui == "SBend") {
+      this.setRoadLeftDrivewayCount(0);
+      this.setRoadRightDrivewayCount(0);
+      return true;
+    } else if (ui == "OneEdgeOneLanRoad") {
+      this.setRoadLeftDrivewayCount(0);
+      this.setRoadRightDrivewayCount(0);
+      return true;
+    }
+  }
+
+  setRoadLeftDrivewayCount(value) {
+    Setting.roadLeftDrivewayCount = value;
+  }
+
+  setRoadRightDrivewayCount(value) {
+    Setting.roadRightDrivewayCount = value;
+  }
+
+  setCurveRoadLeftDrivewayCount(value) {
+    Setting.curveRoadLeftDrivewayCount = value;
+  }
+
+  setCurveRoadRightDrivewayCount(value) {
+    Setting.curveRoadRightDrivewayCount = value;
+  }
+}
+
+const uiService = new UIService();
+export { uiService };

src/graphic/Setting.js

@@ -0,0 +1,13 @@
+const Setting = {
+  roadLeftDrivewayCount: 1,
+  roadRightDrivewayCount: 1,
+  curveRoadLeftDrivewayCount: 1,
+  curveRoadRightDrivewayCount: 1,
+  leftRoadWidth: 50,
+  rightRoadWidth: 50,
+  leftCurveRoadWidth: 50,
+  rightCurveRoadWidth: 50,
+  roadMidDivideWidth: 4,
+  curveRoadMidDivideWidth: 4,
+};
+export default Setting;