feat

src/graphic/Constant.js

@@ -27,18 +27,19 @@ const Constant = {
   minAdsorbPix: 25, //最小吸附像素
   minRealDis: 20,
   defaultRoadWidth: 100, //默认公路宽度
+  roadSideWidth: 100, //默认路缘宽度
   ratio: 1,
   minAngle: 10,
   maxAngle: 170,
   minRoadSideWidth: 30,
   maxRoadSideWidth: 800,
-  oneWay: "oneWay", //one表示单向，two表示双向
-  twoWay: "twoWay", //one表示单向，two表示双向
+  oneWay: 'oneWay', //one表示单向，two表示双向
+  twoWay: 'twoWay', //one表示单向，two表示双向
   defaultSingleLaneWidth: 3.5, //单个车道的宽度
   defaultMidDivideWidth: 0.2, //隔离带的宽度
-  angleLocationMode: "AngleLocationMode", //直角定位
-  allLocationMode: "AllLocationMode", //综合定位
-  normalLocationMode: "NormalLocationMode", //垂线定位
-  freeLocationMode: "FreeLocationMode", //自由测量
+  angleLocationMode: 'AngleLocationMode', //直角定位
+  allLocationMode: 'AllLocationMode', //综合定位
+  normalLocationMode: 'NormalLocationMode', //垂线定位
+  freeLocationMode: 'FreeLocationMode', //自由测量
 };
 export default Constant;

src/graphic/Controls/AddRoadStructure.js

@@ -0,0 +1,41 @@
+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/MoveRoad.js

@@ -23,7 +23,11 @@ export default class MoveRoad {
   // 测试要考虑pointId拖拽到包含他的所有墙的另一头
   // 这个函数不会删除/拆分/合并墙或者点
   moveingRoadPoint(pointId, position, modifyPoint) {
+
     let point = dataService.getRoadPoint(pointId);
+    let road = dataService.getRoad(Object.keys(point.parent)[0]);
+    
+
     let linkedRoadPointId = null;
     let linkedRoadId = null;
 
@@ -58,7 +62,6 @@ export default class MoveRoad {
       //要吸附一下
       const adsorbPointId = Object.keys(this.adsorbPointRoads)[0];
       const road = dataService.getRoad(this.adsorbPointRoads[adsorbPointId]);
-
       const otherPointId = road.getOtherPointId(pointId);
       let otherPoint = dataService.getRoadPoint(otherPointId);
       let modifyPoint = dataService.getRoadPoint(adsorbPointId);
@@ -131,7 +134,7 @@ export default class MoveRoad {
     //     point.setPosition(position);
     //   }
     // }
-
+    roadService.initRoadWidthTipsPos(road)
     edgeService.updateEdgeForMovePoint(pointId);
     return true;
   }
@@ -1060,13 +1063,14 @@ export default class MoveRoad {
   }
 
   moveRoad(roadId, dx, dy) {
+
     dx = dx;
     dy = -dy;
 
     const road = dataService.getRoad(roadId);
     const startPoint = dataService.getRoadPoint(road.startId);
     const endPoint = dataService.getRoadPoint(road.endId);
-
+   
     if (
       Object.keys(startPoint.getParent()).length == 1 &&
       Object.keys(endPoint.getParent()).length == 1
@@ -1090,6 +1094,7 @@ export default class MoveRoad {
       rightEdge.end.y += dy;
 
       roadService.setLanes(roadId);
+      roadService.initRoadWidthTipsPos(road)
     }
   }
 
@@ -1254,6 +1259,7 @@ export default class MoveRoad {
     const edge = dataService.getRoadEdge(edgeId);
     const parent = edge.getParent();
     const road = dataService.getRoad(parent);
+    
     const line = roadService.getMidLine(road);
     let join = mathUtil.getJoinLinePoint(position, line);
 
@@ -1292,6 +1298,7 @@ export default class MoveRoad {
     ) {
       roadService.updateForWidth(parent, newWidth, dir);
     }
+    roadService.initRoadWidthTipsPos(road)
   }
 
   moveCurveEdge(curveEdgeId, index, position) {

src/graphic/Controls/UIControl.js

@@ -174,7 +174,6 @@ export default class UIControl {
       } else if (VectorWeight[selectUI]) {
         key = "setWeight";
       }
-
       if (focusItem.type == VectorType.Line) {
         let Line = dataService.getLine(focusItem.vectorId);
         // Line.setStyle(selectUI);
@@ -185,18 +184,29 @@ export default class UIControl {
         Line[key](selectUI);
       } else {
         let roadEdge = dataService.getRoadEdge(focusItem.vectorId);
-        if (roadEdge) {
-          // roadEdge.setStyle(selectUI);
-          roadEdge[key](selectUI);
-          let crossPoint = dataService.getCrossPoint4(focusItem.vectorId);
-          if (crossPoint) {
-            crossPoint[key](selectUI);
+        if(selectUI == VectorStyle.RoadSide){//修改路缘线
+          if (!roadEdge) {
+            roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId);
+          }
+          roadEdge.setRoadSide()
+        }else{
+          if(roadEdge.roadSide){
+            roadEdge.removeRoadSide()
+          }
+          if (roadEdge) {
+            // roadEdge.setStyle(selectUI);
+            roadEdge[key](selectUI);
+            let crossPoint = dataService.getCrossPoint4(focusItem.vectorId);
+            if (crossPoint) {
+              crossPoint[key](selectUI);
+            }
+          } else {
+            roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId);
+            // roadEdge.setStyle(selectUI);
+            roadEdge[key](selectUI);
           }
-        } else {
-          roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId);
-          // roadEdge.setStyle(selectUI);
-          roadEdge[key](selectUI);
         }
+        
       }
 
       this.layer.history.save();

src/graphic/Geometry/CurveRoadEdge.js

@@ -4,7 +4,7 @@ import VectorType from "../enum/VectorType.js";
 import { mathUtil } from "../Util/MathUtil.js";
 import VectorWight from "../enum/VectorWeight.js";
 import VectorStyle from "../enum/VectorStyle.js";
-
+import Constant from '../Constant';
 export default class CurveRoadEdge extends Geometry {
   constructor(start, end, vectorId, parentId, points) {
     super();
@@ -17,6 +17,7 @@ export default class CurveRoadEdge extends Geometry {
     this.points = points || [];
     this.curves = [];
     this.geoType = VectorType.CurveRoadEdge;
+    this.roadSide = null;
     this.setId(vectorId);
     this.setPositions(start, end);
   }
@@ -46,4 +47,15 @@ export default class CurveRoadEdge extends Geometry {
       return null;
     }
   }
+  // setRoadSide() {
+  //   if (!this.roadSide) {
+  //     this.roadSide = {};
+  //     this.roadSide['width'] = Constant.roadSideWidth;
+  //   }
+  //   this.roadSide['start'] = this.start;
+  //   this.roadSide['end'] = this.end;
+  // }
+  // removeRoadSide() {
+  //   this.roadSide = null;
+  // }
 }

src/graphic/Geometry/Geometry.js

@@ -1,5 +1,5 @@
-import { dataService } from "../Service/DataService";
-import { mathUtil } from "../Util/MathUtil";
+import { dataService } from '../Service/DataService';
+import { mathUtil } from '../Util/MathUtil';
 
 export default class Geometry {
   constructor() {
@@ -7,7 +7,7 @@ export default class Geometry {
   }
 
   setId(vectorId) {
-    if (vectorId == null || typeof vectorId === "undefined") {
+    if (vectorId == null || typeof vectorId === 'undefined') {
       vectorId = dataService.getCurrentId();
       dataService.updateCurrentId();
       this.vectorId = this.geoType + vectorId;
@@ -164,15 +164,12 @@ export default class Geometry {
     var b = ptRotationCenter.y;
     var x0 = ptSrc.x;
     var y0 = ptSrc.y;
-    var rx =
-      a +
-      (x0 - a) * Math.cos((angle * Math.PI) / 180) -
-      (y0 - b) * Math.sin((angle * Math.PI) / 180);
-    var ry =
-      b +
-      (x0 - a) * Math.sin((angle * Math.PI) / 180) +
-      (y0 - b) * Math.cos((angle * Math.PI) / 180);
+    var rx = a + (x0 - a) * Math.cos((angle * Math.PI) / 180) - (y0 - b) * Math.sin((angle * Math.PI) / 180);
+    var ry = b + (x0 - a) * Math.sin((angle * Math.PI) / 180) + (y0 - b) * Math.cos((angle * Math.PI) / 180);
     var json = { x: rx, y: ry };
     return json;
   }
+  setRoadWidthTipsPos(roadWidthTipsPos) {
+    this.roadWidthTipsPos = roadWidthTipsPos;
+  }
 }

src/graphic/Geometry/Road.js

@@ -1,9 +1,10 @@
-import VectorType from "../enum/VectorType.js";
-import Geometry from "./Geometry.js";
-import Settings from "../Settings";
-import Constant from "../Constant";
-
-import { coordinate } from "../Coordinate.js";
+import VectorType from '../enum/VectorType.js';
+import Geometry from './Geometry.js';
+import Settings from '../Settings';
+import Constant from '../Constant';
+import { mathUtil } from '../Util/MathUtil.js';
+import { coordinate } from '../Coordinate.js';
+import { dataService } from '../Service/DataService.js';
 
 export default class Road extends Geometry {
   constructor(startId, endId, vectorId) {
@@ -15,6 +16,7 @@ export default class Road extends Geometry {
     this.leftLanes = []; //二维数组。第一维表示第几个车道，第二维是一组点
     this.rightLanes = [];
     this.singleLanes = []; //单向车道
+    this.roadWidthTipsPos = []; //车道提示位置
     //道路中间隔离栏 ，起点和终点与startId和endId方向一致。但是坐标有区别。因为隔离栏要比start-end短一些
     //单向车道没有中间栏
     this.midDivide = {
@@ -27,19 +29,10 @@ export default class Road extends Geometry {
     this.rightDrivewayCount = Settings.roadRightDrivewayCount; //右边的车道个数
     this.geoType = VectorType.Road;
 
-    this.leftWidth =
-      Settings.roadLeftDrivewayCount *
-      Settings.singleLaneWidth *
-      window.coordinate.ratio;
-    this.rightWidth =
-      Settings.roadRightDrivewayCount *
-      Settings.singleLaneWidth *
-      window.coordinate.ratio;
+    this.leftWidth = Settings.roadLeftDrivewayCount * Settings.singleLaneWidth * window.coordinate.ratio;
+    this.rightWidth = Settings.roadRightDrivewayCount * Settings.singleLaneWidth * window.coordinate.ratio;
     this.singleRoadDrivewayCount = Settings.singleRoadDrivewayCount;
-    this.singleRoadWidth =
-      Settings.singleRoadDrivewayCount *
-      Settings.singleLaneWidth *
-      window.coordinate.ratio;
+    this.singleRoadWidth = Settings.singleRoadDrivewayCount * Settings.singleLaneWidth * window.coordinate.ratio;
     this.way = Settings.wayType;
     this.setId(vectorId);
   }
@@ -58,9 +51,9 @@ export default class Road extends Geometry {
 
   setWidth(value, dir) {
     if (this.way == Constant.twoWay) {
-      if (dir == "left") {
+      if (dir == 'left') {
         this.leftWidth = value;
-      } else if (dir == "right") {
+      } else if (dir == 'right') {
         this.rightWidth = value;
       }
     } else if (this.way == Constant.oneWay) {
@@ -79,7 +72,7 @@ export default class Road extends Geometry {
   }
 
   getPointId(dir) {
-    if (dir == "start") {
+    if (dir == 'start') {
       return this.startId;
     } else {
       return this.endId;
@@ -116,7 +109,7 @@ export default class Road extends Geometry {
     if (this.way == Constant.oneWay) {
       return this.singleRoadDrivewayCount;
     } else if (this.way == Constant.twoWay) {
-      if (dir == "left") {
+      if (dir == 'left') {
         return this.leftDrivewayCount;
       } else {
         return this.rightDrivewayCount;
@@ -135,4 +128,6 @@ export default class Road extends Geometry {
   setSingleLanes(singleLanes) {
     this.singleLanes = JSON.parse(JSON.stringify(singleLanes));
   }
+
+ 
 }

src/graphic/Geometry/RoadEdge.js

@@ -1,10 +1,11 @@
 //墙的边缘线
-import Geometry from "./Geometry.js";
-import VectorType from "../enum/VectorType.js";
-import VectorWight from "../enum/VectorWeight.js";
-import VectorStyle from "../enum/VectorStyle.js";
-import { mathUtil } from "../Util/MathUtil.js";
-
+import Geometry from './Geometry.js';
+import VectorType from '../enum/VectorType.js';
+import VectorWight from '../enum/VectorWeight.js';
+import VectorStyle from '../enum/VectorStyle.js';
+import { mathUtil } from '../Util/MathUtil.js';
+import { dataService } from '../Service/DataService.js';
+import Constant from '../Constant';
 export default class RoadEdge extends Geometry {
   constructor(start, end, vectorId, parentId) {
     super();
@@ -16,6 +17,7 @@ export default class RoadEdge extends Geometry {
     this.weight = VectorWight.Thinning;
     this.geoType = VectorType.RoadEdge;
     this.lineWidth = 4;
+    this.roadSide = null;
     this.setId(vectorId);
     this.setPositions(start, end);
   }
@@ -29,9 +31,9 @@ export default class RoadEdge extends Geometry {
   }
 
   setPosition(position, dir) {
-    if (dir == "start") {
+    if (dir == 'start') {
       mathUtil.clonePoint(this.start, position);
-    } else if (dir == "end") {
+    } else if (dir == 'end') {
       mathUtil.clonePoint(this.end, position);
     }
   }
@@ -41,9 +43,9 @@ export default class RoadEdge extends Geometry {
   }
 
   getPosition(dir) {
-    if (dir == "start") {
+    if (dir == 'start') {
       return this.start;
-    } else if (dir == "end") {
+    } else if (dir == 'end') {
       return this.end;
     } else {
       return null;
@@ -54,4 +56,23 @@ export default class RoadEdge extends Geometry {
     let line = mathUtil.createLine1(this.start, this.end);
     return line;
   }
+  setRoadSide() {
+    let line = this.getLine()
+    let startPoint = this.start
+    let endPoint = this.end
+    let lines = mathUtil.getParallelLineForDistance(line, Constant.roadSideWidth);
+    let point1 = mathUtil.getJoinLinePoint(startPoint, lines.line1);
+    let point2 = mathUtil.getJoinLinePoint(endPoint, lines.line1);
+
+    if (!this.roadSide) {
+      this.roadSide = {};
+      this.roadSide['width'] = Constant.roadSideWidth;
+    }
+    this.roadSide['start'] = point1;
+    this.roadSide['end'] = point2;
+  }
+  removeRoadSide() {
+    this.roadSide = null;
+  }
+
 }

src/graphic/Geometry/RoadStructure.js

@@ -0,0 +1,134 @@
+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/History/Change.js

@@ -97,6 +97,7 @@ export default class Change {
       this.currentData.svgs.length == 0 &&
       !this.currentData.settings
     ) {
+
       this.saveCurrentInfo();
       return false;
     }

src/graphic/History/History.js

@@ -339,6 +339,7 @@ export default class History {
   }
 
   goPreForRoads(itemForRoads) {
+
     for (let i = 0; i < itemForRoads.length; ++i) {
       const item = itemForRoads[i];
       if (item.handle == HistoryEvents.AddRoad) {

src/graphic/History/HistoryUtil.js

@@ -134,7 +134,8 @@ export default class HistoryUtil {
       mathUtil.equalPoint(roadEdge1.start, roadEdge2.start) &&
       mathUtil.equalPoint(roadEdge1.end, roadEdge2.end) &&
       roadEdge1.parent == roadEdge2.parent &&
-      roadEdge1.style == roadEdge2.style
+      roadEdge1.style == roadEdge2.style &&
+      roadEdge1.roadSide == roadEdge2.roadSide 
     ) {
       return false;
     } else {
@@ -447,6 +448,7 @@ export default class HistoryUtil {
     roadEdgeInfo.start = { x: roadEdge2.start.x, y: roadEdge2.start.y };
     roadEdgeInfo.end = { x: roadEdge2.end.x, y: roadEdge2.end.y };
     roadEdgeInfo.parent = roadEdge2.parent;
+    roadEdgeInfo.roadSide = roadEdge2.roadSide;
     this.setRoadEdgeInfo(roadEdgeInfo);
   }
 
@@ -458,6 +460,7 @@ export default class HistoryUtil {
     roadInfo.leftEdgeId = road2.leftEdgeId;
     roadInfo.rightEdgeId = road2.rightEdgeId;
     roadInfo.way = road2.way;
+    roadInfo.roadWidthTipsPos = road2.roadWidthTipsPos;
     if (road2.way == Constant.oneWay) {
       roadInfo.singleRoadWidth = road2.singleRoadWidth;
       roadInfo.singleRoadDrivewayCount = road2.singleRoadDrivewayCount;
@@ -725,6 +728,7 @@ export default class HistoryUtil {
     data.end = {};
     data.end = JSON.parse(JSON.stringify(roadEdge.end));
     data.style = roadEdge.style;
+    data.roadSide = roadEdge.roadSide;
     return data;
   }
 
@@ -736,6 +740,7 @@ export default class HistoryUtil {
     data.endId = road.endId;
     data.leftEdgeId = road.leftEdgeId;
     data.rightEdgeId = road.rightEdgeId;
+    data.roadWidthTipsPos = road.roadWidthTipsPos;
     data.way = road.way;
     if (road.way == Constant.oneWay) {
       data.singleRoadWidth = road.singleRoadWidth;
@@ -945,6 +950,7 @@ export default class HistoryUtil {
     mathUtil.clonePoint(roadEdge.end, roadEdgeInfo.end);
     roadEdge.type = roadEdgeInfo.type;
     roadEdge.style = roadEdgeInfo.style;
+    roadEdge.roadSide = roadEdgeInfo.roadSide;
   }
 
   setRoadInfo(roadInfo) {
@@ -955,6 +961,7 @@ export default class HistoryUtil {
     road.leftEdgeId = roadInfo.leftEdgeId;
     road.rightEdgeId = roadInfo.rightEdgeId;
     road.way = roadInfo.way;
+    road.roadWidthTipsPos = roadInfo.roadWidthTipsPos;
     if (road.way == Constant.oneWay) {
       road.singleRoadWidth = roadInfo.singleRoadWidth;
       road.singleRoadDrivewayCount = roadInfo.singleRoadDrivewayCount;

src/graphic/Layer.js

@@ -11,6 +11,7 @@ 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";
@@ -190,6 +191,14 @@ export default class Layer {
         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);
@@ -220,6 +229,7 @@ export default class Layer {
                 selectItem.dir
               );
             }
+           
           } else {
             road = dataService.getCurveRoad(selectItem.vectorId);
             if (road) {
@@ -240,6 +250,7 @@ export default class Layer {
               }
             }
           }
+          roadService.initRoadWidthTipsPos(road)
           this.history.save();
           this.renderer.autoRedraw();
         }
@@ -287,6 +298,7 @@ export default class Layer {
               }
             }
           }
+          roadService.initRoadWidthTipsPos(road)
           this.history.save();
           this.renderer.autoRedraw();
         }
@@ -377,6 +389,7 @@ export default class Layer {
           }
         }
         break;
+      
     }
     selectItem = stateService.getSelectItem();
     stateService.setDraggingItem(selectItem);
@@ -1265,6 +1278,12 @@ 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/Load.js

@@ -225,6 +225,7 @@ export default class Load {
             dataLocal.roads[key].vectorId
           );
           dataService.addRoad(road);
+ 
           road.setWidth(dataLocal.roads[key].leftWidth, "left");
           road.setWidth(dataLocal.roads[key].rightWidth, "right");
           road.setWidth(dataLocal.roads[key].singleRoadWidth);
@@ -234,13 +235,19 @@ export default class Load {
           road.setLeftLanes(dataLocal.roads[key].leftLanes);
           road.setRightLanes(dataLocal.roads[key].rightLanes);
           road.setSingleLanes(dataLocal.roads[key].singleLanes);
+         
+        
         }
       }
 
       if (dataLocal.roadEdges) {
         //当roadEdge有样式的时候需要设置
+        let roads = []
         for (let edgeKey in dataLocal.roadEdges) {
           let edge = dataLocal.roadEdges[edgeKey];
+          if(!roads.includes(edge.parent)){
+            roads.push(edge.parent)
+          }
           let newEdge = edgeService.create(
             edge.start,
             edge.end,
@@ -256,7 +263,14 @@ export default class Load {
           }
           newEdge.setLineWidth(edge.lineWidth);
           newEdge.setParent(edge.parent);
+          
+        }
+        
+        for(let i=0;i<roads.length;i++){
+          let road = dataService.getRoad(roads[i]);
+          roadService.initRoadWidthTipsPos(road);
         }
+ 
       }
 
       if (dataLocal.curveRoadPoints) {

src/graphic/Service/DataService.js

@@ -81,6 +81,7 @@ export class DataService {
     this.vectorData.basePointIds = [];
     this.vectorData.texts = {};
     this.vectorData.svgs = {};
+    this.vectorData.roadStructures = {};
     this.vectorData.magnifiers = {};
     this.initGrid();
   }
@@ -574,6 +575,21 @@ 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() {
     //直路
@@ -598,6 +614,7 @@ export class DataService {
     this.vectorData.basePointIds = [];
     this.vectorData.texts = {};
     this.vectorData.svgs = {};
+    this.vectorData.roadStructures = {};
     this.vectorData.magnifiers = {};
   }
 

src/graphic/Service/RoadService.js

@@ -59,6 +59,7 @@ export default class RoadService {
       rightEdge.setEdgeParent(road.vectorId);
     }
     this.setLanes(road.vectorId);
+    this.initRoadWidthTipsPos(road)
     return road;
   }
 
@@ -1548,6 +1549,100 @@ 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 crossLine = mathUtil.createLine1(
+            road.singleLanes[i].start,
+            road.singleLanes[i].end
+          )
+          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]})
+          }
+        }
+        //最后一个位置
+        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){//双单车道
+      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++){
+          let crossLine = mathUtil.createLine1(
+            road.leftLanes[i].start,
+            road.leftLanes[i].end
+          )
+          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]})
+          }
+        }
+        //最后一个位置
+        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++){
+          let crossLine = mathUtil.createLine1(
+            road.rightLanes[i].start,
+            road.rightLanes[i].end
+          )
+          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]})
+          }
+        }
+        //最后一个位置
+        roadWidthTipsPos.push({start:crossList[crossList.length-1],end:rightEdgePoint})
+        road.setRoadWidthTipsPos(roadWidthTipsPos)
+      }else{
+        roadWidthTipsPos.push({start:rightMidDividePoint,end:rightEdgePoint})
+        road.setRoadWidthTipsPos(roadWidthTipsPos)
+      }
+    }
+  }
+
   // unlock(roadId) {
   //   let road = dataService.getRoad(roadId);
   //   let startPoint = dataService.getRoadPoint(road.startId);

src/graphic/Service/RoadStructureService.js

@@ -0,0 +1,31 @@
+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/UIService.js

@@ -117,6 +117,8 @@ export default class UIService {
       return true;
     } else if (ui == VectorStyle.Greenbelt) {
       return true;
+    }else if (ui == VectorStyle.RoadSide) {
+      return true;
     } else if (ui == VectorWeight.Bold) {
       return true;
     } else if (ui == VectorWeight.Thinning) {

src/graphic/Util/MathUtil.js

@@ -1017,7 +1017,6 @@ export default class MathUtil {
   RectangleVertex(startPoint, endPoint, width) {
     let line = this.createLine1(startPoint, endPoint);
     let lines = this.getParallelLineForDistance(line, width / 2);
-
     let leftEdgeStart, rightEdgeStart, rightEdgeEnd, leftEdgeEnd;
 
     let point = null;
@@ -1868,6 +1867,30 @@ export default class MathUtil {
     const b = Math.floor(Math.random() * 256);
     return `rgb(${r},${g},${b})`;
   }
+
+  //获取选段内距离末端断点某个位置点的坐标
+  /**
+   * 
+   * @param {*} startPoint  //线段起点
+   * @param {*} endPoint  //线段终点
+   * @param {*} targetPointDistance  //目标点到终点的距离
+   * @returns 
+   */
+  getLinePointPos(startPoint,endPoint,targetPointDistance = 100){
+    let lineLength  = this.getDistance(startPoint,endPoint)
+ 
+    var ratio = 1;
+    if(targetPointDistance> lineLength){
+      ratio = 0.9;
+    }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 
+  }
 }
 
 const mathUtil = new MathUtil();

src/graphic/enum/LayerEvents.js

@@ -47,6 +47,8 @@ const LayerEvents = {
   MoveMeasureArrow: "moveMeasureArrow",
 
   AddRoadTemplate: "addRoadTemplate",
+
   AddRoadStructure: "addRoadStructure",
+  MoveRoadStructure: "moveRoadStructure",
 };
 export default LayerEvents;

src/graphic/enum/RoadStructure.js

@@ -1,39 +1,41 @@
 const RoadStructure = {
   // ----------道路结构-----------
+  // 斑马线
+  ZebraCrossing: 'ZebraCrossing',
+  // 路面凸出
+  ProtrudingRoad: 'ProtrudingRoad',
+  // 路面凹坑
+  RoadPotholes: 'RoadPotholes',
+  // 路面积水
+  WaterOnTheRoad: 'WaterOnTheRoad',
+  // 雨水口
+  Gullies: 'Gullies',
+  // 消火栓井
+  FireHydrantWell: 'FireHydrantWell',
+
   // 支路
-  BranchRoad: "BranchRoad",
+  BranchRoad: 'BranchRoad',
   // 窄路
-  NarrowRoad: "NarrowRoad",
+  NarrowRoad: 'NarrowRoad',
   // 路肩
-  ShoulderRoad: "ShoulderRoad",
-  // 斑马线
-  ZebraCrossing: "ZebraCrossing",
+  ShoulderRoad: 'ShoulderRoad',
+
   // 桥
-  Bridge: "Bridge",
+  Bridge: 'Bridge',
   // 隧道
-  Tunnel: "Tunnel",
+  Tunnel: 'Tunnel',
   // 人行道
-  Sidewalk: "Sidewalk",
+  Sidewalk: 'Sidewalk',
   // 施工路段
-  ConstructionSection: "ConstructionSection",
+  ConstructionSection: 'ConstructionSection',
   // 下坡
-  Downhill: "Downhill",
+  Downhill: 'Downhill',
   // 上坡
-  Uphill: "Uphill",
+  Uphill: 'Uphill',
   // 路边水沟
-  RoadsideGutter: "RoadsideGutter",
+  RoadsideGutter: 'RoadsideGutter',
   // 道路与铁
-  RoadsAndRails: "RoadsAndRails",
-  // 消火栓井
-  FireHydrantWell: "FireHydrantWell",
-  // 雨水口
-  Gullies: "Gullies",
-  // 路面凹坑
-  RoadPotholes: "RoadPotholes",
-  // 路面凸出
-  ProtrudingRoad: "ProtrudingRoad",
-  // 路面积水
-  WaterOnTheRoad: "WaterOnTheRoad",
-}
+  RoadsAndRails: 'RoadsAndRails',
+};
 
-export default RoadStructure
+export default RoadStructure;

src/graphic/enum/VectorStyle.js

@@ -14,6 +14,8 @@ const VectorStyle = {
   PointDrawLine: "PointDrawLine",
   // 绿化带
   Greenbelt: "Greenbelt",
+  // 路缘线
+  RoadSide: "RoadSide",
   // 加粗
   // Bold: "Bold",
   // // 变细

src/graphic/enum/VectorType.js

@@ -1,23 +1,24 @@
 const VectorType = {
-  CrossPoint: "CrossPoint",
-  Circle: "Circle",
-  Img: "Img",
-  Point: "Point",
-  Line: "Line",
-  CurvePoint: "CurvePoint",
-  CurveLine: "CurveLine",
-  MeasureArrow: "MeasureArrow",
-  SingleArrowLine: "SingleArrowLine",
-  DoubleArrowLine: "DoubleArrowLine",
-  Road: "Road",
-  RoadEdge: "RoadEdge",
-  RoadPoint: "RoadPoint",
-  CurveRoad: "CurveRoad",
-  CurveRoadEdge: "CurveRoadEdge",
-  CurveRoadPoint: "CurveRoadPoint",
-  Text: "Text",
-  SVG: "SVG",
-  BackgroundImg: "BackgroundImg",
-  Magnifier: "Magnifier", // 放大镜
+  CrossPoint: 'CrossPoint',
+  Circle: 'Circle',
+  Img: 'Img',
+  Point: 'Point',
+  Line: 'Line',
+  CurvePoint: 'CurvePoint',
+  CurveLine: 'CurveLine',
+  MeasureArrow: 'MeasureArrow',
+  SingleArrowLine: 'SingleArrowLine',
+  DoubleArrowLine: 'DoubleArrowLine',
+  Road: 'Road',
+  RoadEdge: 'RoadEdge',
+  RoadPoint: 'RoadPoint',
+  CurveRoad: 'CurveRoad',
+  CurveRoadEdge: 'CurveRoadEdge',
+  CurveRoadPoint: 'CurveRoadPoint',
+  Text: 'Text',
+  SVG: 'SVG',
+  RoadStructure: 'RoadStructure',
+  BackgroundImg: 'BackgroundImg',
+  Magnifier: 'Magnifier', // 放大镜
 };
 export default VectorType;

src/views/graphic/geos/roadEdge.vue

@@ -71,6 +71,15 @@ const lineTypeMenu = [
       style.value = VectorStyle.PointDrawLine;
     },
   },
+  {
+    key: VectorStyle.RoadSide,
+    icon: "l_thin",
+    text: "路缘线",
+    onClick: () => {
+      clickHandlerFactory(VectorStyle.RoadSide)();
+      // menus.value[1] = lineWidthMenu[0];
+    },
+  },
   // {key: VectorStyle.Greenbelt, icon: "treelawn", text: "绿化带 ", onClick: clickHandlerFactory(VectorStyle.Greenbelt)},
 ];
 
@@ -93,6 +102,7 @@ const lineWidthMenu = [
       menus.value[1] = lineWidthMenu[0];
     },
   },
+
 ];
 
 const appendMenus =

src/views/graphic/index.vue

@@ -23,7 +23,7 @@
     </GraphicAction>
     <Confirm v-if="graphicState.continuedMode" />
     <Component
-      :is="geoComponent as any"
+      :is="geoComponent"
       v-else-if="geoComponent"
       :geo="currentVector"
       :key="currentVector.vectorId"
@@ -84,7 +84,7 @@ watchEffect(() => {
 });
 
 const focusMenus = computed(() => focusMenuRaw[currentVector.value?.type]);
-const geoComponent = computed(() => {
+const geoComponent: any = computed(() => {
   if (currentVector.value) {
     let category = currentVector.value?.category;
     if (!category) {

src/views/graphic/menus.ts

@@ -173,12 +173,14 @@ export const mainMenusRaw: MenusRaw = [
     children: [
       { key: UIType.OneEdgeOneLanRoad, icon: "road_ss", text: "" },
       { key: UIType.OneEdgeTwoLanRoad, icon: "road_sd", text: "" },
-      { key: UIType.OneEdgeThreeLanRoad, icon: "road_st", text: "" },
+      // { key: UIType.OneEdgeThreeLanRoad, icon: "road_st", text: "" },
       { key: UIType.TwoEdgeOneLanRoad, icon: "road_ds", text: "" },
       { key: UIType.TwoEdgeTwoLanRoad, icon: "road_dd", text: "" },
-      { key: UIType.TwoEdgeThreeLanRoad, icon: "road_dt", text: "" },
+      // { key: UIType.TwoEdgeThreeLanRoad, icon: "road_dt", text: "" },
       { key: UIType.CurveRoad, icon: "road_wl", text: "" },
       // { key: UITypeExtend.structure, icon: 'r_template', text: '道路结构', extend: structureMenusRaw },
+      // { key: 'ZebraCrossing', icon: 'r_template', text: '道路结构'},
+      { key: 'ZebraCrossing', icon: 'r_template', text: '道路结构'},
       {
         key: UITypeExtend.template,
         icon: "r_structure",

src/views/sys/menu/index.vue

@@ -40,6 +40,13 @@ const emit = defineEmits<{
 }>();
 
 const gotoMenuItem = (item: MenuAtom) => {
+  console.error(item)
+  //test
+  if(item['key'] =='structure'){
+    item.onClick()
+    return
+  }
+
   if (!props.disabledGoto) {
     if (item.onClick) {
       item.onClick();