.

src/graphic/Service/RoadService.js

@@ -59,7 +59,7 @@ export default class RoadService {
       rightEdge.setEdgeParent(road.vectorId);
     }
     this.setLanes(road.vectorId);
-    this.initRoadWidthTipsPos(road)
+    this.initRoadWidthTipsPos(road);
     return road;
   }
 
@@ -96,7 +96,7 @@ export default class RoadService {
     newRoad.singleRoadWidth = road.singleRoadWidth;
     newRoad.leftWidth = road.leftWidth;
     newRoad.rightWidth = road.rightWidth;
- 
+
     let edgePoints;
     if (newRoad.way == Constant.oneWay) {
       edgePoints = mathUtil.RectangleVertex(
@@ -149,14 +149,14 @@ export default class RoadService {
     newRoad.singleRoadDrivewayCount = road.singleRoadDrivewayCount;
     newRoad.leftDrivewayCount = road.leftDrivewayCount;
     newRoad.rightDrivewayCount = road.rightDrivewayCount;
-    if(oldLeftEdge.roadSide){
-      leftEdge.initRoadSide()
+    if (oldLeftEdge.roadSide) {
+      leftEdge.initRoadSide();
     }
-    if(oldRightEdge.roadSide){
-      rightEdge.initRoadSide()
+    if (oldRightEdge.roadSide) {
+      rightEdge.initRoadSide();
     }
     this.setLanes(newRoad.vectorId);
-    this.initRoadWidthTipsPos(newRoad)
+    this.initRoadWidthTipsPos(newRoad);
     return newRoad.vectorId;
   }
 
@@ -1092,8 +1092,8 @@ export default class RoadService {
   //单车道不考虑dir1
   setLanes(roadId, dir1, dir2) {
     let road = dataService.getRoad(roadId);
-    if(!road){
-      return
+    if (!road) {
+      return;
     }
     if (road.way == Constant.oneWay) {
       this.setOneWayLanes(road, dir1, dir2);
@@ -1511,6 +1511,17 @@ export default class RoadService {
     this.setLanes(roadId, dir);
   }
 
+  updateMeasureLineForWidth() {
+    const road = dataService.getRoad(roadId);
+    const startPoint = dataService.getRoadPoint(road.startId);
+    const endPoint = dataService.getRoadPoint(road.endId);
+    const leftEdge = dataService.getRoadEdge(road.leftEdgeId);
+    const rightEdge = dataService.getRoadEdge(road.rightEdgeId);
+    if (road.way == Constant.oneWay) {
+    } else if (road.way == Constant.twoWay) {
+    }
+  }
+
   //将道路转换成线条
   convertToLines(roadId) {
     let road = dataService.getRoad(roadId);
@@ -1557,95 +1568,136 @@ export default class RoadService {
   }
 
   initRoadWidthTipsPos(road) {
-    let leftEdge = dataService.getRoadEdge(road.leftEdgeId)
-    let rightEdge = dataService.getRoadEdge(road.rightEdgeId)
-    let leftEdgePoint = mathUtil.getLinePointPos(leftEdge.start,leftEdge.end)
-    let rightEdgePoint = mathUtil.getLinePointPos(rightEdge.start,rightEdge.end)
-    let edgeLine = mathUtil.createLine1(leftEdgePoint,rightEdgePoint)
-    let roadWidthTipsPos = []
-    if(road.way == Constant.oneWay){//单车道
-      if(road.singleLanes.length){
-        let crossList = []
-        for(let i=0;i<road.singleLanes.length;i++){
+    let leftEdge = dataService.getRoadEdge(road.leftEdgeId);
+    let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
+    let leftEdgePoint = mathUtil.getLinePointPos(leftEdge.start, leftEdge.end);
+    let rightEdgePoint = mathUtil.getLinePointPos(
+      rightEdge.start,
+      rightEdge.end
+    );
+    let edgeLine = mathUtil.createLine1(leftEdgePoint, rightEdgePoint);
+    let roadWidthTipsPos = [];
+    if (road.way == Constant.oneWay) {
+      //单车道
+      if (road.singleLanes.length) {
+        let crossList = [];
+        for (let i = 0; i < road.singleLanes.length; i++) {
           let crossLine = mathUtil.createLine1(
             road.singleLanes[i].start,
             road.singleLanes[i].end
-          )
-          let crossPoint = mathUtil.getIntersectionPoint(edgeLine,crossLine)
-          crossList.push(crossPoint)
+          );
+          let crossPoint = mathUtil.getIntersectionPoint(edgeLine, crossLine);
+          crossList.push(crossPoint);
         }
-        for(let i=0;i<crossList.length;i++){
-          if(i==0){ //第一个位置
-            roadWidthTipsPos.push({start:rightEdgePoint,end:crossList[i]}) 
-          }else{//以此类推
-            roadWidthTipsPos.push({start:crossList[i-1],end:crossList[i]})
+        for (let i = 0; i < crossList.length; i++) {
+          if (i == 0) {
+            //第一个位置
+            roadWidthTipsPos.push({ start: rightEdgePoint, end: crossList[i] });
+          } else {
+            //以此类推
+            roadWidthTipsPos.push({
+              start: crossList[i - 1],
+              end: crossList[i],
+            });
           }
         }
         //最后一个位置
-        roadWidthTipsPos.push({start:crossList[crossList.length-1],end:leftEdgePoint})
-        road.setRoadWidthTipsPos(roadWidthTipsPos)
-      }else{
-        roadWidthTipsPos.push({start:leftEdgePoint,end:rightEdgePoint})
-        road.setRoadWidthTipsPos(roadWidthTipsPos)
+        roadWidthTipsPos.push({
+          start: crossList[crossList.length - 1],
+          end: leftEdgePoint,
+        });
+        road.setRoadWidthTipsPos(roadWidthTipsPos);
+      } else {
+        roadWidthTipsPos.push({ start: leftEdgePoint, end: rightEdgePoint });
+        road.setRoadWidthTipsPos(roadWidthTipsPos);
       }
-    }else if(road.way == Constant.twoWay){//双单车道
+    } else if (road.way == Constant.twoWay) {
+      //双单车道
       let leftMidDividePoint = mathUtil.getLinePointPos(
         road.midDivide.leftMidDivide.start,
         road.midDivide.leftMidDivide.end
-      )
+      );
       let rightMidDividePoint = mathUtil.getLinePointPos(
         road.midDivide.rightMidDivide.start,
         road.midDivide.rightMidDivide.end
-      )
-      
+      );
+
       // leftLanes,rightLanes
-      if(road.leftLanes.length){
-        let crossList = []
-        for(let i=0;i<road.leftLanes.length;i++){
+      if (road.leftLanes.length) {
+        let crossList = [];
+        for (let i = 0; i < road.leftLanes.length; i++) {
           let crossLine = mathUtil.createLine1(
             road.leftLanes[i].start,
             road.leftLanes[i].end
-          )
-          let crossPoint = mathUtil.getIntersectionPoint(edgeLine,crossLine)
-          crossList.push(crossPoint)
+          );
+          let crossPoint = mathUtil.getIntersectionPoint(edgeLine, crossLine);
+          crossList.push(crossPoint);
         }
-        for(let i=0;i<crossList.length;i++){
-          if(i==0){ //第一个位置
-            roadWidthTipsPos.push({start:leftMidDividePoint,end:crossList[i]}) 
-          }else{//以此类推
-            roadWidthTipsPos.push({start:crossList[i-1],end:crossList[i]})
+        for (let i = 0; i < crossList.length; i++) {
+          if (i == 0) {
+            //第一个位置
+            roadWidthTipsPos.push({
+              start: leftMidDividePoint,
+              end: crossList[i],
+            });
+          } else {
+            //以此类推
+            roadWidthTipsPos.push({
+              start: crossList[i - 1],
+              end: crossList[i],
+            });
           }
         }
         //最后一个位置
-        roadWidthTipsPos.push({start:crossList[crossList.length-1],end:leftEdgePoint})
-        road.setRoadWidthTipsPos(roadWidthTipsPos)
-      }else{
-        roadWidthTipsPos.push({start:leftEdgePoint,end:leftMidDividePoint})
-        road.setRoadWidthTipsPos(roadWidthTipsPos)
+        roadWidthTipsPos.push({
+          start: crossList[crossList.length - 1],
+          end: leftEdgePoint,
+        });
+        road.setRoadWidthTipsPos(roadWidthTipsPos);
+      } else {
+        roadWidthTipsPos.push({
+          start: leftEdgePoint,
+          end: leftMidDividePoint,
+        });
+        road.setRoadWidthTipsPos(roadWidthTipsPos);
       }
-      if(road.rightLanes.length){
-        let crossList = []
-        for(let i=0;i<road.rightLanes.length;i++){
+      if (road.rightLanes.length) {
+        let crossList = [];
+        for (let i = 0; i < road.rightLanes.length; i++) {
           let crossLine = mathUtil.createLine1(
             road.rightLanes[i].start,
             road.rightLanes[i].end
-          )
-          let crossPoint = mathUtil.getIntersectionPoint(edgeLine,crossLine)
-          crossList.push(crossPoint)
+          );
+          let crossPoint = mathUtil.getIntersectionPoint(edgeLine, crossLine);
+          crossList.push(crossPoint);
         }
-        for(let i=0;i<crossList.length;i++){
-          if(i==0){ //第一个位置
-            roadWidthTipsPos.push({start:rightMidDividePoint,end:crossList[i]}) 
-          }else{//以此类推
-            roadWidthTipsPos.push({start:crossList[i-1],end:crossList[i]})
+        for (let i = 0; i < crossList.length; i++) {
+          if (i == 0) {
+            //第一个位置
+            roadWidthTipsPos.push({
+              start: rightMidDividePoint,
+              end: crossList[i],
+            });
+          } else {
+            //以此类推
+            roadWidthTipsPos.push({
+              start: crossList[i - 1],
+              end: crossList[i],
+            });
           }
         }
         //最后一个位置
-        roadWidthTipsPos.push({start:crossList[crossList.length-1],end:rightEdgePoint})
-        road.setRoadWidthTipsPos(roadWidthTipsPos)
-      }else{
-        roadWidthTipsPos.push({start:rightMidDividePoint,end:rightEdgePoint})
-        road.setRoadWidthTipsPos(roadWidthTipsPos)
+        roadWidthTipsPos.push({
+          start: crossList[crossList.length - 1],
+          end: rightEdgePoint,
+        });
+        road.setRoadWidthTipsPos(roadWidthTipsPos);
+      } else {
+        roadWidthTipsPos.push({
+          start: rightMidDividePoint,
+          end: rightEdgePoint,
+        });
+        road.setRoadWidthTipsPos(roadWidthTipsPos);
       }
     }
   }

src/graphic/Util/MathUtil.js

@@ -116,6 +116,12 @@ export default class MathUtil {
     return { line1: line1, line2: line2 };
   }
 
+  //start-end这条线段上，距离start是distance的点
+  getJoinForStartToEnd1(start, end, distance) {}
+
+  //start-end这条线段上，离start的距离是start-end长度的ratio
+  getJoinForStartToEnd2(start, end, ratio) {}
+
   //获取扇形的两个端点
   getEndpoint(point, angle, sectorAngle) {
     const distance = 15;
@@ -1870,26 +1876,26 @@ export default class MathUtil {
 
   //获取选段内距离末端断点某个位置点的坐标
   /**
-   * 
+   *
    * @param {*} startPoint  //线段起点
    * @param {*} endPoint  //线段终点
    * @param {*} targetPointDistance  //目标点到终点的距离
-   * @returns 
+   * @returns
    */
-  getLinePointPos(startPoint,endPoint,targetPointDistance = 100){
-    let lineLength  = this.getDistance(startPoint,endPoint)
- 
+  getLinePointPos(startPoint, endPoint, targetPointDistance = 100) {
+    let lineLength = this.getDistance(startPoint, endPoint);
+
     var ratio = 1;
-    if(targetPointDistance> lineLength){
+    if (targetPointDistance > lineLength) {
       ratio = 0.9;
-    }else{
-      ratio = (lineLength-targetPointDistance) / lineLength;
+    } else {
+      ratio = (lineLength - targetPointDistance) / lineLength;
     }
     var targetPoint = {
-      x:startPoint.x + ratio * (endPoint.x - startPoint.x),
-      y:startPoint.y + ratio * (endPoint.y - startPoint.y)
-    }
-    return targetPoint 
+      x: startPoint.x + ratio * (endPoint.x - startPoint.x),
+      y: startPoint.y + ratio * (endPoint.y - startPoint.y),
+    };
+    return targetPoint;
   }
 }