Merge branch 'master' of http://192.168.0.115:3000/bill/traffic-laser

src/components/photos/index.vue

@@ -84,9 +84,12 @@ const changeSelects = (item: Item, selected: boolean) => {
 
 .img-layout {
   position: relative;
+  height: 100%;
 }
 .photo img {
   width: 100%;
+  height: 100%;
+  object-fit: contain;
   border-radius: 4px;
 }
 </style>
@@ -106,4 +109,4 @@ const changeSelects = (item: Item, selected: boolean) => {
     font-size: 18px !important;
   }
 }
-</style>
+</style>

src/graphic/CanvasStyle/default.js

@@ -146,6 +146,7 @@ const MeasureLine = {
 };
 const BaseLine = {
   strokeStyle: "red",
+  fillStyle: "red",
   lineWidth: 3 * coordinate.ratio,
 };
 

src/graphic/Layer.js

@@ -1,49 +1,49 @@
-import Load from "./Load";
-import { stateService } from "./Service/StateService";
-import { elementService } from "./Service/ElementService";
-import { dataService } from "./Service/DataService";
-import { textService } from "./Service/TextService";
-import { historyService } from "./Service/HistoryService";
-import UIControl from "./Controls/UIControl";
+import Load from './Load';
+import { stateService } from './Service/StateService';
+import { elementService } from './Service/ElementService';
+import { dataService } from './Service/DataService';
+import { textService } from './Service/TextService';
+import { historyService } from './Service/HistoryService';
+import UIControl from './Controls/UIControl';
 // import { moveRectangle } from "./Controls/MoveRectangle";
-import { moveText } from "./Controls/MoveText";
-import { moveSVG } from "./Controls/MoveSVG";
-import { moveMagnifier } from "./Controls/MoveMagnifier";
-import { addRoad } from "./Controls/AddRoad";
-import { addCrossRoad } from "./Controls/AddCrossRoad";
-import { addLine } from "./Controls/AddLine";
-import { addPoint } from "./Controls/AddPoint";
-import { addCircle } from "./Controls/AddCircle";
-import { addElliptic } from "./Controls/AddElliptic";
-import { addText } from "./Controls/AddText";
-import { addMagnifier } from "./Controls/AddMagnifier";
-import { addSVG } from "./Controls/AddSVG";
-import { moveRoad } from "./Controls/MoveRoad";
-import { moveLine } from "./Controls/MoveLine";
-import { movePoint } from "./Controls/MovePoint";
-import { moveCircle } from "./Controls/MoveCircle";
-import { moveElliptic } from "./Controls/MoveElliptic";
-import { coordinate } from "./Coordinate";
-import Render from "./Renderer/Render";
-import { draw } from "./Renderer/Draw";
-import { listenLayer } from "./ListenLayer";
-import LayerEvents from "./enum/LayerEvents.js";
-import UIEvents from "./enum/UIEvents.js";
-import SelectState from "./enum/SelectState.js";
-import VectorType from "./enum/VectorType";
-import { mathUtil } from "./Util/MathUtil";
-import History from "./History/History";
-import mitt from "mitt";
-import { roadService } from "./Service/RoadService";
-import { edgeService } from "./Service/EdgeService";
-import { roadPointService } from "./Service/RoadPointService";
-import { curveRoadService } from "./Service/CurveRoadService";
-import VectorCategory from "./enum/VectorCategory";
-import Settings from "./Settings";
-import Constant from "./Constant";
-import { uiService } from "./Service/UIService";
-import { imageService } from "./Service/ImageService";
-import VectorEvents from "./enum/VectorEvents";
+import { moveText } from './Controls/MoveText';
+import { moveSVG } from './Controls/MoveSVG';
+import { moveMagnifier } from './Controls/MoveMagnifier';
+import { addRoad } from './Controls/AddRoad';
+import { addCrossRoad } from './Controls/AddCrossRoad';
+import { addLine } from './Controls/AddLine';
+import { addPoint } from './Controls/AddPoint';
+import { addCircle } from './Controls/AddCircle';
+import { addElliptic } from './Controls/AddElliptic';
+import { addText } from './Controls/AddText';
+import { addMagnifier } from './Controls/AddMagnifier';
+import { addSVG } from './Controls/AddSVG';
+import { moveRoad } from './Controls/MoveRoad';
+import { moveLine } from './Controls/MoveLine';
+import { movePoint } from './Controls/MovePoint';
+import { moveCircle } from './Controls/MoveCircle';
+import { moveElliptic } from './Controls/MoveElliptic';
+import { coordinate } from './Coordinate';
+import Render from './Renderer/Render';
+import { draw } from './Renderer/Draw';
+import { listenLayer } from './ListenLayer';
+import LayerEvents from './enum/LayerEvents.js';
+import UIEvents from './enum/UIEvents.js';
+import SelectState from './enum/SelectState.js';
+import VectorType from './enum/VectorType';
+import { mathUtil } from './Util/MathUtil';
+import History from './History/History';
+import mitt from 'mitt';
+import { roadService } from './Service/RoadService';
+import { edgeService } from './Service/EdgeService';
+import { roadPointService } from './Service/RoadPointService';
+import { curveRoadService } from './Service/CurveRoadService';
+import VectorCategory from './enum/VectorCategory';
+import Settings from './Settings';
+import Constant from './Constant';
+import { uiService } from './Service/UIService';
+import { imageService } from './Service/ImageService';
+import VectorEvents from './enum/VectorEvents';
 
 const minDragDis = 10;
 const minZoom = 20;
@@ -78,25 +78,25 @@ export default class Layer {
   }
 
   bindEvents() {
-    this.canvas.addEventListener("contextmenu", function (e) {
+    this.canvas.addEventListener('contextmenu', function (e) {
       e.preventDefault();
     });
-    this.canvas.addEventListener("mousedown", this.onMouseDown.bind(this));
-    this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this));
-    this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this));
+    this.canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
+    this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
+    this.canvas.addEventListener('mouseup', this.onMouseUp.bind(this));
 
-    this.canvas.addEventListener("touchstart", this.onMouseDown.bind(this));
-    this.canvas.addEventListener("touchmove", this.onMouseMove.bind(this));
-    this.canvas.addEventListener("touchend", this.onMouseUp.bind(this));
+    this.canvas.addEventListener('touchstart', this.onMouseDown.bind(this));
+    this.canvas.addEventListener('touchmove', this.onMouseMove.bind(this));
+    this.canvas.addEventListener('touchend', this.onMouseUp.bind(this));
 
-    this.canvas.addEventListener("mousewheel", this.onWheel.bind(this));
-    this.canvas.addEventListener("DOMMouseScroll", this.onWheel.bind(this));
-    this.canvas.addEventListener("resize", this.reSize.bind(this));
-    document.addEventListener("keydown", this.onKeydown.bind(this));
+    this.canvas.addEventListener('mousewheel', this.onWheel.bind(this));
+    this.canvas.addEventListener('DOMMouseScroll', this.onWheel.bind(this));
+    this.canvas.addEventListener('resize', this.reSize.bind(this));
+    document.addEventListener('keydown', this.onKeydown.bind(this));
   }
 
   reSize = function () {
-    console.log("resize");
+    console.log('resize');
     coordinate.updateForCanvas();
     this.renderer.autoRedraw();
   };
@@ -131,16 +131,16 @@ export default class Layer {
     listenLayer.start(position);
     let selectItem = stateService.getSelectItem();
     let focusItem = stateService.getFocusItem();
-    this.setEventName("mouseDown");
+    this.setEventName('mouseDown');
     const eventName = stateService.getEventName();
     switch (eventName) {
       case LayerEvents.AddRoad:
         stateService.setEventName(LayerEvents.AddingRoad);
-        addRoad.setNewRoadPoint("start", position);
+        addRoad.setNewRoadPoint('start', position);
         break;
       case LayerEvents.AddCurveRoad:
         stateService.setEventName(LayerEvents.AddingCurveRoad);
-        addRoad.setNewRoadPoint("start", position);
+        addRoad.setNewRoadPoint('start', position);
         break;
       case LayerEvents.AddLine:
         stateService.setEventName(LayerEvents.AddingLine);
@@ -154,15 +154,11 @@ export default class Layer {
         stateService.setEventName(LayerEvents.MovePoint);
         const newPoint = addPoint.buildPoint(position);
         if (newPoint) {
-          stateService.setSelectItem(
-            newPoint.vectorId,
-            VectorType.Point,
-            SelectState.Select
-          );
+          stateService.setSelectItem(newPoint.vectorId, VectorType.Point, SelectState.Select);
           this.history.save();
           this.renderer.autoRedraw();
         } else {
-          this.uiControl.prompt({ msg: "请先添加基准点", time: 1000 });
+          this.uiControl.prompt({ msg: '请先添加基准点', time: 1000 });
         }
         break;
       case LayerEvents.AddCircle:
@@ -176,11 +172,7 @@ export default class Layer {
       case LayerEvents.AddText:
         stateService.setEventName(LayerEvents.MoveText);
         addText.buildText(position);
-        stateService.setSelectItem(
-          addText.newText.vectorId,
-          VectorType.Text,
-          SelectState.Select
-        );
+        stateService.setSelectItem(addText.newText.vectorId, VectorType.Text, SelectState.Select);
         addText.clear();
         break;
       case LayerEvents.AddSVG:
@@ -194,11 +186,7 @@ export default class Layer {
       case LayerEvents.AddMagnifier:
         stateService.setEventName(LayerEvents.MoveMagnifier);
         addMagnifier.buildMagnifier(position);
-        stateService.setSelectItem(
-          addMagnifier.newMagnifier.vectorId,
-          VectorType.Magnifier,
-          SelectState.Select
-        );
+        stateService.setSelectItem(addMagnifier.newMagnifier.vectorId, VectorType.Magnifier, SelectState.Select);
         addMagnifier.clear();
         break;
       case VectorEvents.AddLane:
@@ -206,34 +194,18 @@ export default class Layer {
           let road = dataService.getRoad(selectItem.vectorId);
           if (road) {
             let roadLanCount = road.getLanesCount(selectItem.dir);
-            if (selectItem.dir == "left") {
-              roadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                roadLanCount + 1,
-                selectItem.dir
-              );
+            if (selectItem.dir == 'left') {
+              roadService.updateForAddSubtractLanesCount(road.vectorId, roadLanCount + 1, selectItem.dir);
             } else {
-              roadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                roadLanCount + 1,
-                selectItem.dir
-              );
+              roadService.updateForAddSubtractLanesCount(road.vectorId, roadLanCount + 1, selectItem.dir);
             }
           } else {
             road = dataService.getCurveRoad(selectItem.vectorId);
             let curveRoadLanCount = road.getLanesCount(selectItem.dir);
-            if (selectItem.dir == "left") {
-              curveRoadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                curveRoadLanCount + 1,
-                selectItem.dir
-              );
+            if (selectItem.dir == 'left') {
+              curveRoadService.updateForAddSubtractLanesCount(road.vectorId, curveRoadLanCount + 1, selectItem.dir);
             } else {
-              curveRoadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                curveRoadLanCount + 1,
-                selectItem.dir
-              );
+              curveRoadService.updateForAddSubtractLanesCount(road.vectorId, curveRoadLanCount + 1, selectItem.dir);
             }
           }
           stateService.clearEventName();
@@ -246,34 +218,18 @@ export default class Layer {
           let road = dataService.getRoad(selectItem.vectorId);
           if (road) {
             let roadLanCount = road.getLanesCount(selectItem.dir);
-            if (selectItem.dir == "left") {
-              roadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                roadLanCount - 1,
-                selectItem.dir
-              );
+            if (selectItem.dir == 'left') {
+              roadService.updateForAddSubtractLanesCount(road.vectorId, roadLanCount - 1, selectItem.dir);
             } else {
-              roadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                roadLanCount - 1,
-                selectItem.dir
-              );
+              roadService.updateForAddSubtractLanesCount(road.vectorId, roadLanCount - 1, selectItem.dir);
             }
           } else {
             road = dataService.getCurveRoad(selectItem.vectorId);
             let curveRoadLanCount = road.getLanesCount(selectItem.dir);
-            if (selectItem.dir == "left") {
-              curveRoadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                curveRoadLanCount - 1,
-                selectItem.dir
-              );
+            if (selectItem.dir == 'left') {
+              curveRoadService.updateForAddSubtractLanesCount(road.vectorId, curveRoadLanCount - 1, selectItem.dir);
             } else {
-              curveRoadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                curveRoadLanCount - 1,
-                selectItem.dir
-              );
+              curveRoadService.updateForAddSubtractLanesCount(road.vectorId, curveRoadLanCount - 1, selectItem.dir);
             }
           }
           stateService.clearEventName();
@@ -284,18 +240,12 @@ export default class Layer {
       case VectorEvents.AddCrossPoint:
         if (focusItem && focusItem.vectorId) {
           const curveRoad = dataService.getCurveRoad(focusItem.vectorId);
-          let index = mathUtil.getIndexForCurvesPoints(
-            position,
-            curveRoad.points
-          );
+          let index = mathUtil.getIndexForCurvesPoints(position, curveRoad.points);
           if (index != -1) {
             curveRoadService.addCPoint(curveRoad, position, index);
           } else {
             const dis1 = mathUtil.getDistance(curveRoad.points[0], position);
-            const dis2 = mathUtil.getDistance(
-              curveRoad.points[curveRoad.points.length - 1],
-              position
-            );
+            const dis2 = mathUtil.getDistance(curveRoad.points[curveRoad.points.length - 1], position);
             if (dis1 > dis2) {
               index = curveRoad.points.length - 2;
               // curveRoadService.addCPoint(
@@ -310,10 +260,7 @@ export default class Layer {
             curveRoadService.addCPoint(curveRoad, position, index);
           }
           //curveRoadService.setLanes(curveRoad.vectorId);
-          curveRoadService.updateForMovePoint(
-            curveRoad.points[index + 1].vectorId,
-            position
-          );
+          curveRoadService.updateForMovePoint(curveRoad.points[index + 1].vectorId, position);
           stateService.clearEventName();
           this.history.save();
           this.renderer.autoRedraw();
@@ -394,18 +341,11 @@ export default class Layer {
       y: position.y,
     };
     const eventName = stateService.getEventName();
-    if (
-      !this.dragging &&
-      Math.abs(X - this.startX) < minDragDis &&
-      Math.abs(Y - this.startY) < minDragDis
-    ) {
+    if (!this.dragging && Math.abs(X - this.startX) < minDragDis && Math.abs(Y - this.startY) < minDragDis) {
       return;
     }
     this.dragging = true;
-    if (
-      Math.abs(X - this.startX) > minDragDis ||
-      Math.abs(Y - this.startY) > minDragDis
-    ) {
+    if (Math.abs(X - this.startX) > minDragDis || Math.abs(Y - this.startY) > minDragDis) {
       // 是否拖拽了
       if (eventName != null) {
         stateService.clearFocusItem();
@@ -426,17 +366,15 @@ export default class Layer {
         needAutoRedraw = listenLayer.start(position);
         let seleteItem = stateService.getSelectItem();
         if (seleteItem != null) {
-          console.log("选中：" + seleteItem.vectorId);
+          console.log('选中：' + seleteItem.vectorId);
         } else {
         }
         break;
       case LayerEvents.PanBackGround:
         stateService.clearItems();
         let center = {};
-        center.x =
-          coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom;
-        center.y =
-          coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom;
+        center.x = coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom;
+        center.y = coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom;
         let tempCenter = {};
         mathUtil.clonePoint(tempCenter, coordinate.center);
         mathUtil.clonePoint(coordinate.center, center);
@@ -545,12 +483,12 @@ export default class Layer {
         elementService.setNewRoad(addRoad.startInfo.position, position);
         elementService.showNewRoad();
 
-        addRoad.setNewRoadPoint("end", position);
+        addRoad.setNewRoadPoint('end', position);
         addRoad.canAdd = addRoad.canAddRoadForEnd(position);
         if (!addRoad.canAdd) {
-          elementService.setNewRoadState("error");
+          elementService.setNewRoadState('error');
         } else {
-          elementService.setNewRoadState("normal");
+          elementService.setNewRoadState('normal');
         }
         elementService.showPoint();
         this.showElementLine(position, eventName);
@@ -667,16 +605,9 @@ export default class Layer {
         let road = dataService.getRoad(draggingItem.vectorId);
         let start = dataService.getRoadPoint(road.startId);
         let end = dataService.getRoadPoint(road.endId);
-        if (
-          Object.keys(start.getParent()).length == 1 &&
-          Object.keys(end.getParent()).length == 1
-        ) {
+        if (Object.keys(start.getParent()).length == 1 && Object.keys(end.getParent()).length == 1) {
           //拖拽的路只有一条
-          moveRoad.moveRoad(
-            draggingItem.vectorId,
-            (dx * coordinate.defaultZoom) / coordinate.zoom,
-            (dy * coordinate.defaultZoom) / coordinate.zoom
-          );
+          moveRoad.moveRoad(draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom);
         }
         break;
       case LayerEvents.MoveRoadPoint:
@@ -687,10 +618,7 @@ export default class Layer {
         });
         if (
           listenLayer.modifyPoint &&
-          (listenLayer.modifyPoint.linkedRoadPointId ||
-            listenLayer.modifyPoint.linkedRoadId ||
-            listenLayer.modifyPoint.linkedRoadPointIdX ||
-            listenLayer.modifyPoint.linkedRoadPointIdY)
+          (listenLayer.modifyPoint.linkedRoadPointId || listenLayer.modifyPoint.linkedRoadId || listenLayer.modifyPoint.linkedRoadPointIdX || listenLayer.modifyPoint.linkedRoadPointIdY)
         ) {
           position = {
             x: listenLayer.modifyPoint.x,
@@ -700,11 +628,7 @@ export default class Layer {
           listenLayer.modifyPoint = null;
         }
 
-        let flag = moveRoad.moveingRoadPoint(
-          draggingItem.vectorId,
-          position,
-          listenLayer.modifyPoint
-        );
+        let flag = moveRoad.moveingRoadPoint(draggingItem.vectorId, position, listenLayer.modifyPoint);
         if (!flag) {
           elementService.hideAll();
         } else {
@@ -741,23 +665,19 @@ export default class Layer {
         elementService.setNewRoad(addRoad.startInfo.position, position);
         elementService.showNewRoad();
 
-        addRoad.setNewRoadPoint("end", position);
+        addRoad.setNewRoadPoint('end', position);
         addRoad.canAdd = addRoad.canAddRoadForEnd(position);
         if (!addRoad.canAdd) {
-          elementService.setNewRoadState("error");
+          elementService.setNewRoadState('error');
         } else {
-          elementService.setNewRoadState("normal");
+          elementService.setNewRoadState('normal');
         }
         elementService.showPoint();
         this.showElementLine(position, eventName);
         break;
       case LayerEvents.MoveCurveRoad:
         needAutoRedraw = true;
-        moveRoad.moveCurveRoad(
-          draggingItem.vectorId,
-          (dx * coordinate.defaultZoom) / coordinate.zoom,
-          (dy * coordinate.defaultZoom) / coordinate.zoom
-        );
+        moveRoad.moveCurveRoad(draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom);
         break;
       case LayerEvents.MoveCurveRoadPoint:
         if (!draggingItem || !draggingItem.vectorId) {
@@ -800,21 +720,13 @@ export default class Layer {
         break;
       case LayerEvents.MoveCurveEdge:
         if (listenLayer.modifyPoint) {
-          moveRoad.moveCurveEdge(
-            draggingItem.vectorId,
-            listenLayer.modifyPoint.selectIndex,
-            position
-          );
+          moveRoad.moveCurveEdge(draggingItem.vectorId, listenLayer.modifyPoint.selectIndex, position);
         }
         needAutoRedraw = true;
         break;
       case LayerEvents.MoveLine:
         if (draggingItem != null) {
-          moveLine.moveLine(
-            draggingItem.vectorId,
-            (dx * coordinate.defaultZoom) / coordinate.zoom,
-            (dy * coordinate.defaultZoom) / coordinate.zoom
-          );
+          moveLine.moveLine(draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom);
           needAutoRedraw = true;
         }
         break;
@@ -856,33 +768,16 @@ export default class Layer {
         break;
       case LayerEvents.MoveCurveLine:
         if (draggingItem != null) {
-          moveLine.moveCurveLine(
-            draggingItem.vectorId,
-            (dx * coordinate.defaultZoom) / coordinate.zoom,
-            (dy * coordinate.defaultZoom) / coordinate.zoom
-          );
+          moveLine.moveCurveLine(draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom);
           needAutoRedraw = true;
         }
         break;
       case LayerEvents.MoveCircle:
         if (draggingItem != null) {
           if (draggingItem.state == -1) {
-            moveCircle.moveFull(
-              draggingItem.vectorId,
-              (dx * coordinate.defaultZoom) / coordinate.zoom,
-              (dy * coordinate.defaultZoom) / coordinate.zoom
-            );
-          } else if (
-            draggingItem.state == 0 ||
-            draggingItem.state == 1 ||
-            draggingItem.state == 2 ||
-            draggingItem.state == 3
-          ) {
-            moveCircle.movePoint(
-              position,
-              draggingItem.vectorId,
-              draggingItem.state
-            );
+            moveCircle.moveFull(draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom);
+          } else if (draggingItem.state == 0 || draggingItem.state == 1 || draggingItem.state == 2 || draggingItem.state == 3) {
+            moveCircle.movePoint(position, draggingItem.vectorId, draggingItem.state);
           } else {
             debugger;
           }
@@ -892,22 +787,9 @@ export default class Layer {
       case LayerEvents.MoveElliptic:
         if (draggingItem != null) {
           if (draggingItem.state == -1) {
-            moveElliptic.moveFull(
-              draggingItem.vectorId,
-              (dx * coordinate.defaultZoom) / coordinate.zoom,
-              (dy * coordinate.defaultZoom) / coordinate.zoom
-            );
-          } else if (
-            draggingItem.state == 0 ||
-            draggingItem.state == 1 ||
-            draggingItem.state == 2 ||
-            draggingItem.state == 3
-          ) {
-            moveElliptic.movePoint(
-              position,
-              draggingItem.vectorId,
-              draggingItem.state
-            );
+            moveElliptic.moveFull(draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom);
+          } else if (draggingItem.state == 0 || draggingItem.state == 1 || draggingItem.state == 2 || draggingItem.state == 3) {
+            moveElliptic.movePoint(position, draggingItem.vectorId, draggingItem.state);
           } else {
             debugger;
           }
@@ -926,22 +808,14 @@ export default class Layer {
           if (draggingItem.state == -1) {
             moveSVG.moveFullSVG(position, draggingItem.vectorId);
           } else {
-            moveSVG.movePoint(
-              position,
-              draggingItem.vectorId,
-              draggingItem.state
-            );
+            moveSVG.movePoint(position, draggingItem.vectorId, draggingItem.state);
           }
         }
         break;
       case LayerEvents.MoveMagnifier:
         needAutoRedraw = true;
         if (draggingItem != null) {
-          moveMagnifier.moveFullMagnifier(
-            position,
-            draggingItem.vectorId,
-            draggingItem.state
-          );
+          moveMagnifier.moveFullMagnifier(position, draggingItem.vectorId, draggingItem.state);
         }
         break;
     }
@@ -976,7 +850,6 @@ export default class Layer {
     const draggingItem = stateService.getDraggingItem();
     const selectItem = stateService.getSelectItem();
     let focusItem = null;
-
     if (!this.dragging && selectItem) {
       focusItem = {
         vectorId: selectItem.vectorId,
@@ -1018,40 +891,19 @@ export default class Layer {
             exceptPointId: draggingItem.vectorId,
             exceptRoadIds: point.parent,
           });
-          if (
-            listenLayer.modifyPoint &&
-            listenLayer.modifyPoint.hasOwnProperty("linkedRoadPointId")
-          ) {
-            moveRoad.moveTo(
-              draggingItem.vectorId,
-              listenLayer.modifyPoint.linkedRoadPointId
-            );
-          } else if (
-            listenLayer.modifyPoint &&
-            (listenLayer.modifyPoint.linkedRoadPointIdX ||
-              listenLayer.modifyPoint.linkedRoadPointIdY)
-          ) {
+          if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty('linkedRoadPointId')) {
+            moveRoad.moveTo(draggingItem.vectorId, listenLayer.modifyPoint.linkedRoadPointId);
+          } else if (listenLayer.modifyPoint && (listenLayer.modifyPoint.linkedRoadPointIdX || listenLayer.modifyPoint.linkedRoadPointIdY)) {
             mathUtil.clonePoint(point, listenLayer.modifyPoint);
-          } else if (
-            listenLayer.modifyPoint &&
-            listenLayer.modifyPoint.hasOwnProperty("linkedRoadId")
-          ) {
+          } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty('linkedRoadId')) {
             point = roadPointService.create({
               x: listenLayer.modifyPoint.x,
               y: listenLayer.modifyPoint.y,
             });
-            roadService.splitRoad(
-              listenLayer.modifyPoint.linkedRoadId,
-              point.vectorId,
-              "start"
-            );
+            roadService.splitRoad(listenLayer.modifyPoint.linkedRoadId, point.vectorId, 'start');
             moveRoad.moveTo(draggingItem.vectorId, point.vectorId);
           } else if (moveRoad.splitRoadId != null) {
-            roadService.splitRoad(
-              moveRoad.splitRoadId,
-              draggingItem.vectorId,
-              "start"
-            );
+            roadService.splitRoad(moveRoad.splitRoadId, draggingItem.vectorId, 'start');
           }
           //draggingItem.vectorId所在的墙面与其他墙角相交
           moveRoad.updateForAbsorbRoadPoints();
@@ -1116,6 +968,15 @@ export default class Layer {
         needAutoRedraw = true;
         this.history.save();
         elementService.hideAll();
+        //拖拽完放大镜后需要重新打开
+        focusItem = {
+          vectorId: selectItem.vectorId,
+          type: selectItem.type,
+          cursor: { x: this.lastX, y: this.lastY },
+          dir: selectItem.dir,
+        };
+        this.uiControl.focusVector = focusItem;
+        stateService.setFocusItem(focusItem);
         break;
       case LayerEvents.MoveSVG:
         needAutoRedraw = true;
@@ -1184,11 +1045,7 @@ export default class Layer {
         this.history.save();
         break;
       case LayerEvents.AddPoint:
-        if (
-          Settings.selectBasePointId != null &&
-          (Settings.selectLocationMode == Constant.angleLocationMode ||
-            Settings.selectLocationMode == Constant.allLocationMode)
-        ) {
+        if (Settings.selectBasePointId != null && (Settings.selectLocationMode == Constant.angleLocationMode || Settings.selectLocationMode == Constant.allLocationMode)) {
           this.uiControl.showConfirm();
           needAutoRedraw = true;
           elementService.hideAll();
@@ -1201,7 +1058,7 @@ export default class Layer {
         break;
     }
 
-    this.setEventName("mouseUp");
+    this.setEventName('mouseUp');
     stateService.clearDraggingItem();
     if (needAutoRedraw) {
       this.renderer.autoRedraw();
@@ -1211,11 +1068,9 @@ export default class Layer {
   onWheel(e) {
     e.preventDefault();
     const type = e.type;
-    if (type == "DOMMouseScroll" || type == "mousewheel") {
+    if (type == 'DOMMouseScroll' || type == 'mousewheel') {
       // 当在canvas用滚轮滚动时
-      const delta = e.wheelDelta
-        ? (e.wheelDelta / 120) * 20
-        : (-(e.detail || 0) / 3) * 20;
+      const delta = e.wheelDelta ? (e.wheelDelta / 120) * 20 : (-(e.detail || 0) / 3) * 20;
       const zoom = coordinate.zoom + delta;
       let X = e.offsetX || e.layerX;
       let Y = e.offsetY || e.layerY;
@@ -1252,10 +1107,10 @@ export default class Layer {
   //测试用
   onKeydown(e) {
     let focusItem = stateService.getFocusItem();
-    let dir = "left";
+    let dir = 'left';
     if (focusItem) {
-      console.log("键盘(foucus有效)：" + e.code);
-      if (e.code == "Delete") {
+      console.log('键盘(foucus有效)：' + e.code);
+      if (e.code == 'Delete') {
         //删除
         const road = dataService.getRoad(focusItem.vectorId);
         roadService.subtraRoadFromIntersect(road.startId, focusItem.vectorId);
@@ -1266,142 +1121,105 @@ export default class Layer {
         this.history.save();
       }
       //加宽
-      else if (e.code == "KeyA") {
+      else if (e.code == 'KeyA') {
         let road = dataService.getRoad(focusItem.vectorId);
         if (road) {
           roadService.updateForWidth(road.vectorId, road.leftWidth + 50, dir);
         } else {
           road = dataService.getCurveRoad(focusItem.vectorId);
-          curveRoadService.updateForWidth(
-            road.vectorId,
-            road.leftWidth + 50,
-            dir
-          );
+          curveRoadService.updateForWidth(road.vectorId, road.leftWidth + 50, dir);
         }
 
         this.renderer.autoRedraw();
         this.history.save();
       }
       //变窄
-      else if (e.code == "KeyB") {
+      else if (e.code == 'KeyB') {
         let road = dataService.getRoad(focusItem.vectorId);
         if (road) {
           roadService.updateForWidth(road.vectorId, road.leftWidth - 25, dir);
         } else {
           road = dataService.getCurveRoad(focusItem.vectorId);
-          curveRoadService.updateForWidth(
-            road.vectorId,
-            road.leftWidth - 25,
-            dir
-          );
+          curveRoadService.updateForWidth(road.vectorId, road.leftWidth - 25, dir);
         }
         this.renderer.autoRedraw();
         this.history.save();
       }
       //添加左车道
-      else if (e.code == "KeyQ") {
+      else if (e.code == 'KeyQ') {
         let road = dataService.getRoad(focusItem.vectorId);
         if (road) {
-          roadService.updateForAddSubtractLanesCount(
-            focusItem.vectorId,
-            road.leftDrivewayCount + 1,
-            "left"
-          );
+          roadService.updateForAddSubtractLanesCount(focusItem.vectorId, road.leftDrivewayCount + 1, 'left');
         } else {
           road = dataService.getCurveRoad(focusItem.vectorId);
           curveRoadService.updateForAddSubtractLanesCount(
             road,
             road.leftDrivewayCount + 1, //rightDrivewayCount
-            "left"
+            'left'
           );
         }
         this.renderer.autoRedraw();
         this.history.save();
       }
       //减少左车道
-      else if (e.code == "KeyW") {
+      else if (e.code == 'KeyW') {
         let road = dataService.getRoad(focusItem.vectorId);
         if (road) {
-          roadService.updateForAddSubtractLanesCount(
-            focusItem.vectorId,
-            road.leftDrivewayCount - 1,
-            "left"
-          );
+          roadService.updateForAddSubtractLanesCount(focusItem.vectorId, road.leftDrivewayCount - 1, 'left');
         } else {
           road = dataService.getCurveRoad(focusItem.vectorId);
           curveRoadService.updateForAddSubtractLanesCount(
             road,
             road.leftDrivewayCount - 1, //rightDrivewayCount
-            "left"
+            'left'
           );
         }
         this.renderer.autoRedraw();
         this.history.save();
       }
       //添加右车道
-      else if (e.code == "KeyE") {
+      else if (e.code == 'KeyE') {
         let road = dataService.getRoad(focusItem.vectorId);
         if (road) {
-          roadService.updateForAddSubtractLanesCount(
-            focusItem.vectorId,
-            road.rightDrivewayCount + 1,
-            "right"
-          );
+          roadService.updateForAddSubtractLanesCount(focusItem.vectorId, road.rightDrivewayCount + 1, 'right');
         } else {
           road = dataService.getCurveRoad(focusItem.vectorId);
           curveRoadService.updateForAddSubtractLanesCount(
             road,
             road.rightDrivewayCount + 1, //rightDrivewayCount
-            "right"
+            'right'
           );
         }
         this.renderer.autoRedraw();
         this.history.save();
       }
       //减少右车道
-      else if (e.code == "KeyR") {
+      else if (e.code == 'KeyR') {
         let road = dataService.getRoad(focusItem.vectorId);
         if (road) {
-          roadService.updateForAddSubtractLanesCount(
-            focusItem.vectorId,
-            road.rightDrivewayCount - 1,
-            "right"
-          );
+          roadService.updateForAddSubtractLanesCount(focusItem.vectorId, road.rightDrivewayCount - 1, 'right');
         } else {
           road = dataService.getCurveRoad(focusItem.vectorId);
           curveRoadService.updateForAddSubtractLanesCount(
             road,
             road.rightDrivewayCount - 1, //rightDrivewayCount
-            "right"
+            'right'
           );
         }
         this.renderer.autoRedraw();
         this.history.save();
       }
       //弯路添加控制点
-      else if (e.code == "KeyT") {
+      else if (e.code == 'KeyT') {
         const curveRoad = dataService.getCurveRoad(focusItem.vectorId);
-        let index = mathUtil.getIndexForCurvesPoints(
-          this.mousePosition,
-          curveRoad.points
-        );
+        let index = mathUtil.getIndexForCurvesPoints(this.mousePosition, curveRoad.points);
         if (index != -1) {
           curveRoadService.addCPoint(curveRoad, this.mousePosition, index);
         } else {
-          const dis1 = mathUtil.getDistance(
-            curveRoad.points[0],
-            this.mousePosition
-          );
-          const dis2 = mathUtil.getDistance(
-            curveRoad.points[curveRoad.points.length - 1],
-            this.mousePosition
-          );
+          const dis1 = mathUtil.getDistance(curveRoad.points[0], this.mousePosition);
+          const dis2 = mathUtil.getDistance(curveRoad.points[curveRoad.points.length - 1], this.mousePosition);
           if (dis1 > dis2) {
-            curveRoadService.addCPoint(
-              curveRoad,
-              this.mousePosition,
-              curveRoad.points.length - 2
-            );
+            curveRoadService.addCPoint(curveRoad, this.mousePosition, curveRoad.points.length - 2);
           } else {
             curveRoadService.addCPoint(curveRoad, this.mousePosition, 1);
           }
@@ -1410,7 +1228,7 @@ export default class Layer {
         this.history.save();
       }
       //弯路删除控制点
-      else if (e.code == "KeyY") {
+      else if (e.code == 'KeyY') {
         const curvePoint = dataService.getCurveRoadPoint(focusItem.vectorId);
         const curveRoad = dataService.getCurveRoad(curvePoint.parent);
         curveRoadService.subCPoint(curveRoad, curvePoint.getIndex());
@@ -1418,14 +1236,14 @@ export default class Layer {
         this.history.save();
       }
     } else {
-      console.log("键盘(foucus无效)：" + e.code);
+      console.log('键盘(foucus无效)：' + e.code);
     }
   }
 
   setEventName(eventType) {
     let eventName = stateService.getEventName();
 
-    if (eventType == "mouseDown") {
+    if (eventType == 'mouseDown') {
       if (eventName == null) {
         const selectItem = stateService.getSelectItem();
         if (selectItem == null) {
@@ -1464,7 +1282,7 @@ export default class Layer {
           stateService.setEventName(LayerEvents.MoveSVG);
         }
       }
-    } else if (eventType == "mouseUp") {
+    } else if (eventType == 'mouseUp') {
       if (eventName == LayerEvents.AddingRoad) {
         if (Settings.isMobile) {
           stateService.clearEventName();
@@ -1492,8 +1310,7 @@ export default class Layer {
       } else if (
         eventName == LayerEvents.AddPoint &&
         Settings.selectBasePointId != null &&
-        (Settings.selectLocationMode == Constant.angleLocationMode ||
-          Settings.selectLocationMode == Constant.allLocationMode)
+        (Settings.selectLocationMode == Constant.angleLocationMode || Settings.selectLocationMode == Constant.allLocationMode)
       ) {
       } else {
         stateService.clearEventName();
@@ -1510,10 +1327,7 @@ export default class Layer {
 
   stopAddVector() {
     let eventName = stateService.getEventName();
-    if (
-      eventName != LayerEvents.AddingRoad &&
-      eventName != LayerEvents.AddingLine
-    ) {
+    if (eventName != LayerEvents.AddingRoad && eventName != LayerEvents.AddingLine) {
       stateService.clearEventName();
     } else if (eventName == LayerEvents.AddingRoad) {
       stateService.setEventName(LayerEvents.AddRoad);
@@ -1648,57 +1462,23 @@ export default class Layer {
     let otherPoint1 = null;
     let otherPoint2 = null;
     if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedRoadPointIdX) {
-      otherPoint1 = dataService.getRoadPoint(
-        listenLayer.modifyPoint.linkedRoadPointIdX
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedCurveRoadPointIdX
-    ) {
-      otherPoint1 = dataService.getCurveRoadPoint(
-        listenLayer.modifyPoint.linkedCurvePointIdX
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedPointIdX
-    ) {
-      otherPoint1 = dataService.getPoint(
-        listenLayer.modifyPoint.linkedPointIdX
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedCurvePointIdX
-    ) {
-      otherPoint1 = dataService.getCurvePoint(
-        listenLayer.modifyPoint.linkedCurvePointIdX
-      );
+      otherPoint1 = dataService.getRoadPoint(listenLayer.modifyPoint.linkedRoadPointIdX);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurveRoadPointIdX) {
+      otherPoint1 = dataService.getCurveRoadPoint(listenLayer.modifyPoint.linkedCurvePointIdX);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedPointIdX) {
+      otherPoint1 = dataService.getPoint(listenLayer.modifyPoint.linkedPointIdX);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurvePointIdX) {
+      otherPoint1 = dataService.getCurvePoint(listenLayer.modifyPoint.linkedCurvePointIdX);
     }
 
     if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedRoadPointIdY) {
-      otherPoint2 = dataService.getRoadPoint(
-        listenLayer.modifyPoint.linkedRoadPointIdY
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedCurvePointIdY
-    ) {
-      otherPoint2 = dataService.getCurveRoadPoint(
-        listenLayer.modifyPoint.linkedCurvePointIdY
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedPointIdY
-    ) {
-      otherPoint2 = dataService.getPoint(
-        listenLayer.modifyPoint.linkedPointIdY
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedCurvePointIdY
-    ) {
-      otherPoint2 = dataService.getCurvePoint(
-        listenLayer.modifyPoint.linkedCurvePointIdY
-      );
+      otherPoint2 = dataService.getRoadPoint(listenLayer.modifyPoint.linkedRoadPointIdY);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurvePointIdY) {
+      otherPoint2 = dataService.getCurveRoadPoint(listenLayer.modifyPoint.linkedCurvePointIdY);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedPointIdY) {
+      otherPoint2 = dataService.getPoint(listenLayer.modifyPoint.linkedPointIdY);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurvePointIdY) {
+      otherPoint2 = dataService.getCurvePoint(listenLayer.modifyPoint.linkedCurvePointIdY);
     }
 
     let otherPoint = {};
@@ -1708,7 +1488,7 @@ export default class Layer {
     }
     if (otherPoint2) {
       otherPoint.y = otherPoint2.y;
-      if (!otherPoint.hasOwnProperty("x")) {
+      if (!otherPoint.hasOwnProperty('x')) {
         otherPoint.x = otherPoint2.x;
       }
     }

src/graphic/Renderer/Draw.js

@@ -285,13 +285,16 @@ export default class Draw {
         const startScreen = coordinate.getScreenXY(midDivide.start);
         const endScreen = coordinate.getScreenXY(midDivide.end);
         ctx.beginPath();
+        if (label) {
+          help.setStyle(ctx, Style.Focus.Road)
+        }
         ctx.moveTo(startScreen.x, startScreen.y);
         ctx.lineTo(endScreen.x, endScreen.y);
         ctx.stroke();
       };
 
       ctx.save();
-      help.setVectorStyle(ctx, vector);
+      const [_, label] = help.setVectorStyle(ctx, vector);
       vector.midDivide.leftMidDivide && draw(vector.midDivide.leftMidDivide);
       vector.midDivide.rightMidDivide && draw(vector.midDivide.rightMidDivide);
 
@@ -659,11 +662,15 @@ export default class Draw {
 
     if (vector.category === VectorCategory.Point.NormalPoint) {
       const lineid = Object.keys(vector.parent)[0];
-      let line, style;
+      let line;
       if (!(lineid && (line = dataService.getLine(lineid)))) {
         return;
       }
-      const [_, attr] = help.getVectorStyle(line);
+      const [stylea, attr] = help.getVectorStyle(line, line.category);
+      style = {
+        ...style,
+        ...stylea
+      }
       // if (!attr) {
       //   return;
       // }
@@ -704,9 +711,20 @@ export default class Draw {
       draw(style.out);
     }
 
-    if (import.meta.env.DEV) {
-      if (vector.vectorId) {
-        this.drawTextByInfo(vector, vector.vectorId);
+    if (vector.category === "BasePoint") {
+      const bound = help.getTextCenter(ctx, "基准点")
+      const textPt = {
+        y: pt.y - bound.height,
+        x: pt.x - (bound.width / 2)
+      }
+
+      ctx.fillStyle = style.fillStyle
+      this.drawTextByInfo(coordinate.getXYFromScreen(textPt), "基准点", 0, false);
+    } else {
+      if (import.meta.env.DEV) {
+        if (vector.vectorId) {
+          // this.drawTextByInfo(vector, vector.vectorId);
+        }
       }
     }
   }
@@ -867,7 +885,6 @@ export default class Draw {
   }
 
   drawLine(vector) {
-    console.log(vector)
     const startReal = dataService.getPoint(vector.startId);
     const start = coordinate.getScreenXY(startReal);
     const endReal = dataService.getPoint(vector.endId);

src/hook/custom/setup.ts

@@ -72,6 +72,7 @@ const magnifierSetting = (sdk: SDK) => {
     (magnifierMode, oldVal) => {
       if (magnifierMode) {
         fullViewStack.push(ref("scene"));
+        console.error("111")
         sdk.scene.openMagnifier();
       } else if (oldVal) {
         sdk.scene.closeMagnifier();

src/sdk/laser/core/enter.js

@@ -16,8 +16,8 @@ from "@/lang";
 import libTransform from "coordtransform";
 //交通版laser
 
- 
- 
+
+
 var CloneJson = function (data) {
     var str = JSON.stringify(data);
     return JSON.parse(str);
@@ -43,11 +43,11 @@ var enter = ({
     let lastSiteModelData;
     let page; //所在页面
     const sceneBus = mitt();
-     
+
     Potree.settings.isOfficial = true; //标记为正式、非测试版本
     Potree.settings.isDebug = isDebug;
     //Potree.settings.originDatasetId = datasetId;
-    
+
     /*if (isLocal) {
         //本地配置
         Potree.settings.isLocal = isLocal;
@@ -64,24 +64,24 @@ var enter = ({
         Potree.settings.urls.prefix1 = Potree.settings.urls.prefix3 = staticPrefix;
         Potree.settings.webSite = "wwwroot";
     } */
-    
-    
+
+
     Potree.getFileUrl = getFileUrl //转化为另一种得到url的方法
-    
-    
+
+
     Potree.start(dom, mapDom, number);
-  
+
 
     parameter.dom = dom;
     parameter.number = number;
     parameter.viewer = viewer;
-    parameter.sceneBus = sceneBus; 
+    parameter.sceneBus = sceneBus;
     //Potree.settings.rotAroundPoint = false; //试验
-        
+
 
     sceneBus.on("visible", (v) => {
         viewer.visible = v;
-        
+
         /* if(v){
             viewer.dispatchEvent('content_changed') //避免白屏
         } */
@@ -99,12 +99,12 @@ var enter = ({
             msg: e.msg
         });
     });
-    
+
     /* viewer.addEventListener("reachTopView", (e) => {
-         sceneBus.emit("enterTopView") 
+         sceneBus.emit("enterTopView")
     });
     viewer.addEventListener("leaveTopView", (e) => {
-         sceneBus.emit("leaveTopView") 
+         sceneBus.emit("leaveTopView")
     }); */
 
     let cameraChange = (e) => {
@@ -118,7 +118,7 @@ var enter = ({
                 rotate: camera.rotation,
                 //dataset: viewer.atDatasets.map((e) => e.dataset_id),
             });
-        } 
+        }
     };
     viewer.addEventListener("camera_changed", cameraChange);
     viewer.addEventListener("shelterComputed", () => {
@@ -127,7 +127,7 @@ var enter = ({
         });
     });
 
- 
+
 
     {
         Potree.loadingByTex = false;
@@ -171,7 +171,7 @@ var enter = ({
             };
             break;
 
-        case "LINE": 
+        case "LINE":
             info = {
                 measureType: "Distance"
             };
@@ -244,12 +244,12 @@ var enter = ({
         /* measure.addEventListener("highlight", (e) => {
             bus.emit("highlight", e.state);
         }); */
-        
+
         measure.addEventListener("selected", (e) => {
             bus.emit("selected", e.state);
         });
-        
-        
+
+
         return {
             quit: () => {
                 Potree.Log("quit结束且删除: " + measure.id, {
@@ -296,7 +296,7 @@ var enter = ({
             },
             getDatasetId: () => {
                 return 1//measure.datasetId;
-            }, 
+            },
 
             getArea: () => {
                 return measure.area; //{value:area, string:..}
@@ -331,7 +331,7 @@ var enter = ({
                 } = viewer.startScreenshot({
                         type: "measure",
                         measurement: measure,
-                        hideMarkers: true, 
+                        hideMarkers: true,
                         ifGetPose: true,
                     },
                         width,
@@ -361,7 +361,7 @@ var enter = ({
                     measure.dispatchEvent('cancelSelect')
                 }
             },
-            
+
         };
     };
 
@@ -441,7 +441,7 @@ var enter = ({
                     dataset_location */
                 };
             }, //全景模式一直获取会很卡
- 
+
 
             getPose2() {
                 const camera = viewer.scene.getActiveCamera();
@@ -502,11 +502,11 @@ var enter = ({
              * 开始测量
              */
             startMeasure(type, unit, color) {
-                const bus = mitt(); 
+                const bus = mitt();
                 let info = getMeasureType(type, unit);
                 //info.bus = bus
-                info.color = color 
-                
+                info.color = color
+
                 let measure = viewer.measuringTool.startInsertion( info,
                         () => {
                         //done:
@@ -516,7 +516,7 @@ var enter = ({
                         //cancel
                         bus.emit("quit", ret); //删除
                     });
-                 
+
                 Potree.Log("startMeasure: " + measure.id, {
                     font: {
                         color: "#00c7b2"
@@ -531,16 +531,16 @@ var enter = ({
                     object: measure,
                     ...getMeasureFunction(measure, bus),
                 };
-                
+
                 measure.addEventListener("intersectNoPointcloud", () => {
                     bus.emit("invalidPoint");
                 });
                 measure.addEventListener("firstClick", () => {
                     bus.emit("firstClickMarker");
                 });
-                
-                
-                
+
+
+
                 return ret;
             },
             quitMeasure() {
@@ -559,12 +559,12 @@ var enter = ({
                 points_datasets,
                 sid, color) {
                 const bus = mitt();
-                
+
                 /* if(!viewer.scene.measurements.find(e=>e.isBaseLine)){
                     type = 'BASE_LINE'
-                } 
+                }
                  */
-                
+
                 let info = getMeasureType(type, unit);
                 info.points = points;
                 //info.datasetId = datasetId;
@@ -587,15 +587,15 @@ var enter = ({
                     bus,
                     ...getMeasureFunction(measure, bus),
                 };
-                
+
                 viewer.dispatchEvent({type:'camera_changed', viewport:viewer.mainViewport, changeInfo:{}})//update sprite
-                
+
                 return ret;
             },
 
             // 开启放大镜
             openMagnifier() {
-                //console.error('开启放大镜')
+                console.error('开启放大镜')
                 viewer.magnifier.dispatchEvent({
                     type: "setEnable",
                     value: true
@@ -695,7 +695,7 @@ var enter = ({
             // 设置漫游点位显示
             changePanoPoint(show) {
                 Potree.settings.ifShowMarker = !!show;
-            }, 
+            },
 
             getDownloadInfo() {
                 //获取直接下载点云的参数给后台
@@ -762,7 +762,7 @@ var enter = ({
                     isScreenshoting = false;
                 });
                 if(viewer.mainViewport.camera.type == 'OrthographicCamera'){
-                   meterPerPixel = 1 / viewer.mainViewport.camera.zoom 
+                   meterPerPixel = 1 / viewer.mainViewport.camera.zoom
                 }
                 return {finishPromise, meterPerPixel};
             },
@@ -781,50 +781,50 @@ var enter = ({
                 }
                 //poschange后会调用这个，如果返回false会变为点云模式，且不会自动变回原先的模式
             },
-            
-            
-           
-  
+
+
+
+
             trackScenePos(){// 单击场景某个位置 返回当前三维坐标，   调用时场景不能漫游与选择直到获取完成
                 let deferred = $.Deferred();
-                let quit = ()=>{ //取消获取 
+                let quit = ()=>{ //取消获取
                     viewer.removeEventListener('global_click',gotIntersect)
-                    Potree.settings.unableNavigate = false 
+                    Potree.settings.unableNavigate = false
                     Potree.settings.unableUseDepTexPick = false
-                    viewer.controls.setEnable(true)  
+                    viewer.controls.setEnable(true)
                 }
-                
+
                 let gotIntersect = (e)=>{
-                    if(e.intersect && e.intersect.location){ 
+                    if(e.intersect && e.intersect.location){
                         console.log('quit', e.intersect.location)
                         quit()
-                        deferred.resolve(e.intersect.location) 
-                    } 
+                        deferred.resolve(e.intersect.location)
+                    }
                 }
-                
-                viewer.addEventListener('global_click',gotIntersect) 
+
+                viewer.addEventListener('global_click',gotIntersect)
                 Potree.settings.unableNavigate = true
-                Potree.settings.unableUseDepTexPick = true 
+                Potree.settings.unableUseDepTexPick = true
 
 
                 viewer.controls.setEnable(false)
-                
+
                 return {
                     promise: deferred.promise() ,   //获取的promise, 获取到了返回三维坐标，没获取到返回null
-                    quit 
+                    quit
                 }
-                
-            },
-            
-            
-            
-            
-            ...parameter.sceneBus, 
-            
+
+            },
+
+
+
+
+            ...parameter.sceneBus,
+
         },
 
-         
-        
+
+
         transformPoint(point, datasetId, dataset_location) {
             /* //获取由dataset_location转出的position
             var r = datasetId != void 0
@@ -838,7 +838,7 @@ var enter = ({
             return r; */
             return point
         },
-        
+
         // 坐标转换
         coordTransform: (originType, pos, targetType, datasetId) => {
             // pos 坐标的类型， 当类型为SCREEN时为 { x, y } 其余为 {x, y, z}
@@ -869,7 +869,7 @@ var enter = ({
                         (p) => p.dataset_id == datasetId);
             }
 
-            if (originType == CoordType.MESH_LOCAL) { 
+            if (originType == CoordType.MESH_LOCAL) {
                 pos = Potree.Utils.datasetPosTransform({
                         fromDataset: true,
                         pointcloud,
@@ -888,7 +888,7 @@ var enter = ({
                 //for控制点，获取点云未移动前的坐标值。暂且这么写。
                 if (needMeshLocal) {
                     //var invMatrix = new THREE.Matrix4().getInverse(viewer.scene.pointclouds[0].transformMatrix)
-                     
+
                     pos = Potree.Utils.datasetPosTransform({
                             toDataset: true,
                             pointcloud,
@@ -935,7 +935,7 @@ var enter = ({
             }
 
             if (needMeshLocal) {
-                 
+
 
                 pos = Potree.Utils.datasetPosTransform({
                         toDataset: true,
@@ -946,41 +946,40 @@ var enter = ({
 
             return pos;
         },
- 
+
         enterMeasurement() {
             //进入测量模块
-            viewer.setLimitFar(false); 
+            viewer.setLimitFar(false);
         },
         leaveMeasurement() {
             //退出测量模块
-            viewer.setLimitFar(true); 
+            viewer.setLimitFar(true);
         },
-        
-  
+
+
 
         loadModel(info) {
             info.moveWithPointcloud = true;
-            viewer.loadModel(info); 
+            viewer.loadModel(info);
         },
- 
+
         enterTopView(){
             viewer.navCubeViewer.dispatchEvent('enterTopView')
-            
+
         },
-        
+
         leaveTopView(){
             viewer.navCubeViewer.dispatchEvent('leaveTopView')
         }
- 
-        
- 
+
+
+
     };
     Potree.sdk = sdk;
     return sdk;
 };
 
 export default enter;
- 
 
 
 
@@ -992,11 +991,12 @@ export default enter;
 
 
 
- 
+
+
 /*
 热点poi加载到的数据中，pos是错误的，只使用dataset_location
 
- 
+
 
 关于webgl context lost报错：
 
@@ -1008,4 +1008,4 @@ export default enter;
 
 
 
-*/
+*/

src/store/sync.ts

@@ -58,6 +58,21 @@ export const api =
             return URL.createObjectURL(base64ToBlob(base64))
           }
         },
+        async photograph() {
+          const file = await new Promise<File>(resolve => {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.click();
+            input.addEventListener("change", ev => {
+              resolve(input.files[0])
+            })
+          })
+
+          return await this.uploadImage(file)
+        },
+        async selectPhotoAlbum() {
+          return await this.photograph()
+        },
         async closePage() {
           return router.push({ name: writeRouteName.scene });
         },
@@ -87,6 +102,7 @@ export const api =
             global.android.getSceneStore(params.m + "/store.json", "getSceneStoreCallback");
           });
         },
+
         async getFile(fileUrl: string) {
           fileUrl = fileUrl.trim();
           if (fileUrl.includes(params.m)) {
@@ -144,6 +160,28 @@ export const api =
             global.android.downloadImage(file.name, data, apiName);
           });
         },
+        photograph() {
+          return new Promise<string>((resolve) => {
+            const apiName = `photograph${count++}`
+            global[apiName] = (data) => {
+              console.log("拍照后路径：", data)
+              resolve(data);
+              delete global[apiName]
+            }
+            global.android.cameraPhotograph(params.m, apiName);
+          });
+        },
+        selectPhotoAlbum() {
+          return new Promise<string>((resolve) => {
+            const apiName = `selectPhotoAlbum${count++}`
+            global[apiName] = (data) => {
+              console.log("获得相册图片路径：", data)
+              resolve(data);
+              delete global[apiName]
+            }
+            global.android.selectPhotoAlbum(params.m, apiName);
+          });
+        },
         closePage() {
           return new Promise((resolve) => {
             global.closeWebViewCallback = resolve;

src/views/graphic/confirm.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="confirm">
     <GraphicAction class="confirm-action" @click="() => drawRef.uiControl.confirmEntry()">
-      <ui-icon type="affirm" ctrl />
+      <ui-icon type="affirm"  color="#38c43b" />
     </GraphicAction>
     <GraphicAction class="confirm-action" @click="() => drawRef.uiControl.confirmCancel()">
-      <ui-icon type="close" ctrl />
+      <ui-icon type="close"  color="#f84540" />
     </GraphicAction>
   </div>
 </template>
@@ -32,5 +32,6 @@ import {uiType, drawRef} from '@/hook/useGraphic'
   width: 64px;
   font-size: 22px;
   justify-content: center;
+  background-color: #fff
 }
-</style>
+</style>

src/views/graphic/geos/magnifier.vue

@@ -1,12 +1,6 @@
 <template>
-  <GeoTeleport :menus="menus" class="geo-teleport-use">
-    <template v-slot="{ data }">
-      <template v-if="data.key === 'file'">
-        <ui-input type="file" class="geo-input" v-model="file" />
-        <ui-icon type="photo" class="icon" />
-      </template>
-    </template>
-  </GeoTeleport>
+  <GeoTeleport :menus="menus" class="geo-teleport-use" />
+  <GeoTeleport :menus="typeMenus" v-if="typeMenus" class="type-geo" />
 </template>
 
 <script setup lang="ts">
@@ -15,19 +9,41 @@ import UiInput from "@/components/base/components/input/index.vue";
 import UiIcon from "@/components/base/components/icon/index.vue";
 import {uploadImage} from '@/store/sync'
 import {drawRef, FocusVector, uiType, UIType} from '@/hook/useGraphic'
-import {computed, ref, watch} from "vue";
+import {computed, ref, UnwrapRef, watch} from "vue";
 import {dataService} from "@/graphic/Service/DataService";
 import {api} from "@/store/sync";
 import GeoActions from "@/graphic/enum/GeoActions";
 
 const props = defineProps<{geo: FocusVector}>()
 const vector = computed(() => dataService.getMagnifier(props.geo.vectorId))
-const file = ref<Blob>()
+const typeMenus = ref<UnwrapRef<typeof menus>>()
 const menus = [
   {
     key: 'file',
     text: "拍照",
     icon: 'photo',
+    onClick() {
+      typeMenus.value = !typeMenus.value
+        ? [
+          {
+            key: 'color',
+            icon: 'arrows_s',
+            text: "拍照",
+            onClick: async () => {
+              syncVector(await api.photograph())
+            }
+          },
+          {
+            key: 'color',
+            icon: 'arrows_d',
+            text: "相册",
+            onClick: async () => {
+              syncVector(await api.selectPhotoAlbum())
+            }
+          },
+        ]
+        : null
+    }
   },
   {
     key: 'reset',
@@ -44,16 +60,6 @@ const menus = [
     }
   }
 ]
-
-watch(
-  () => [file.value],
-  async ([blob]) => {
-    // console.log(blob)
-    syncVector(await uploadImage(blob))
-  }
-)
-
-
 const syncVector = (url: string) => {
   vector.value.setSrc(url)
   vector.value.setImageData()
@@ -86,6 +92,9 @@ const syncVector = (url: string) => {
   z-index: 1;
   opacity: 0;
 }
+.type-geo {
+  margin-bottom: 74px;
+}
 </style>
 
 <style lang="scss">

src/views/graphic/geos/normalLine.vue

@@ -12,6 +12,7 @@ import GeoActions from "@/graphic/enum/GeoActions"
 import {UITypeExtend} from "@/views/graphic/menus";
 import VectorEvents from "@/graphic/enum/VectorEvents";
 import VectorStyle from "@/graphic/enum/VectorStyle";
+import VectorCategory from "@/graphic/enum/VectorCategory";
 
 
 const props = defineProps<{ geo: FocusVector }>()
@@ -61,7 +62,7 @@ const lineWidthMenu = [
   {key: VectorStyle.Thinning, icon: 'l_thin', text: "细", onClick: clickHandlerFactory(VectorStyle.Thinning)},
 ]
 
-const appendMenus = props.geo.type === VectorType.CurveRoadEdge
+const appendMenus = props.geo.category === VectorCategory.Line.NormalLine
   ? [
     {
       key: VectorEvents.AddCrossPoint,

src/views/graphic/header.vue

@@ -32,7 +32,7 @@
           v-model="(data as AccidentPhoto).type"
           v-if="options"
       />
-      <ui-button width="100px" class="save" @click="saveHandler">
+      <ui-button width="100px" class="save save-file" @click="saveHandler">
         保存
       </ui-button>
       <ui-button width="100px" type="primary" class="save" @click="createTable" v-if="isRoad">
@@ -103,14 +103,14 @@ const menus = computed<Menu[]>(() => {
       }
     },
     {
-      icon: "recover",
+      icon: "reset",
       text: "",
       onClick: () => drawRef.value.uiControl.menu_view_reset()
     }
   ]
 
   if (isRoad.value) {
-    menus.push({
+    menus.splice(menus.length - 1, 0, {
       icon: "map",
       text: ``,
       onClick: () => backImageChang(!graphicState.value.showBackImage)
@@ -242,4 +242,10 @@ const createTable = async () => {
     left: calc(100% - 6px);
   }
 }
+
+.save-file.save {
+  border-color: #3a3d3d;
+  background-color: #3a3d3d !important;
+  color: #fff;
+}
 </style>

src/views/graphic/menus.ts

@@ -118,21 +118,21 @@ export const measureMenusRaw = [
 
 export const mainMenusRaw: MenusRaw = [
   {
-    key: UITypeExtend.line,
+    key: UIType.Line,
     text: "画线",
     icon: "line_d",
-    children: [
-      {
-        key: UIType.Line,
-        text: "直线",
-        icon: "line_d",
-      },
-      {
-        key: UIType.CurveLine,
-        text: "曲线",
-        icon: "line_d",
-      }
-    ]
+    // children: [
+    //   {
+    //     key: UIType.Line,
+    //     text: "直线",
+    //     icon: "line_d",
+    //   },
+    //   {
+    //     key: UIType.CurveLine,
+    //     text: "曲线",
+    //     icon: "line_d",
+    //   }
+    // ]
   },
   {
     key: UITypeExtend.road,

src/views/graphic/setting.vue

@@ -5,7 +5,7 @@
         <div>
           <p>
             <span>默认单车道宽度</span>
-            <span>单位m</span>
+            <span>单位： m</span>
           </p>
           <ui-input v-model="data.singleRoadWidth" width="100%">
             <template v-slot:icon>
@@ -16,7 +16,7 @@
         <div>
           <p>
             <span>默认隔离带宽度</span>
-            <span>单位m</span>
+            <span>单位： m</span>
           </p>
           <ui-input v-model="data.roadQuarantineWidth" width="100%">
             <template v-slot:icon>
@@ -27,7 +27,7 @@
         <div>
           <p>
             <span>基本线宽 b</span>
-            <span>单位m</span>
+            <span>单位： mm</span>
           </p>
           <ui-input type="select" :options="lineWidthOption" v-model="data.lineWidth" width="100%" />
         </div>

src/views/photos/index.vue

@@ -15,8 +15,16 @@
       :select-mode="selectMode"
       :data="sortPhotos"
     />
-    <ButtonPane class="back fun-ctrl" @click="router.push(writeRouteName.scene)" v-if="!selectMode">
+<!--    @click="router.push(writeRouteName.scene)"-->
+    <ButtonPane class="back fun-ctrl" v-if="!selectMode">
       <ui-icon type="photo" class="icon" />
+      <ui-input
+          type="select"
+          :options="photoOptions"
+          dire="top"
+          class="select"
+          v-model="photoType"
+      />
     </ButtonPane>
 
     <ActionMenus class="select-menus" :menus="selectMenus" dire="row" v-if="selects.length" />
@@ -49,7 +57,9 @@ import UiButton from "@/components/base/components/button/index.vue";
 import Photos from '@/components/photos'
 import ActionMenus from "@/components/group-button/index.vue";
 import {useConfirm} from "@/hook";
-import {accidentPhotos} from "@/store/accidentPhotos";
+import UiInput from "@/components/base/components/input/index.vue";
+import {api} from "@/store/sync";
+import {getId} from "@/utils";
 
 const sortPhotos = computed(() => [...photos.value].reverse())
 const active = ref<PhotoRaw>()
@@ -85,6 +95,37 @@ const selectMenus = [
   },
 ]
 
+const photoType = ref<string>()
+const photoOptions = [
+  {value: "photograph", label: "相机拍照"},
+  {value: "selectPhotoAlbum", label: "相机拍照"},
+  {value: "scene", label: "场景截图"},
+]
+
+watchEffect(() => {
+  if (photoType.value) {
+    if (photoType.value === "scene") {
+      router.push(writeRouteName.scene)
+    } else {
+      api[photoType.value]()
+        .then(url => {
+          photos.value.push({
+            id: getId(),
+            url,
+            urlRaw: url,
+            time: new Date().getTime(),
+            meterPerPixel: null,
+            measures: [],
+            baseLines: [],
+            fixPoints: [],
+            basePoints: []
+          })
+        })
+    }
+    photoType.value = null
+  }
+})
+
 watchEffect(() => {
   if (!selectMode.value) {
     selects.value = []
@@ -155,6 +196,16 @@ onDeactivated(() => {
 .back {
   right: var(--boundMargin);
   bottom: var(--boundMargin);
+  overflow: hidden;
+
+  .select {
+    position: absolute;
+    width: 100px;
+    right: 0;
+    opacity: 0;
+    height: 100%;
+    top: 0;
+  }
 }
 
 .menus {

src/views/scene/menus/actions.ts

@@ -26,7 +26,7 @@ const trackPosMenuAction = (onComplete: () => void, onAddStore: (pos: Pos3D) =>
 
 const stopMeasure = () => {
   stopMeasureRaw()
-  customMap.magnifier = false
+  // customMap.magnifier = false
 }
 const trackMeasureMenuAction = (
   measureType: MeasureType,
@@ -46,7 +46,7 @@ const trackMeasureMenuAction = (
     hide = Message.success({ msg: "再选择一个位置单击，确定基准线的终点" })
   }
   startTip()
-  customMap.magnifier = true
+  // customMap.magnifier = true
   const onAddMeasure = (data: MeasureAtom) => {
     data.id = getId();
     if (data) {