root 2 năm trước cách đây
mục cha
commit
eb43e59ec5
51 tập tin đã thay đổi với 3503 bổ sung1689 xóa
  1. 58 94
      public/static/lib/potree/potree.js
  2. 1 1
      public/static/lib/potree/potree.js.map
  3. 1 1
      server/test/a0k4xu045_202305311600080410/attach/sceneStore
  4. 5 5
      src/components/base/assets/scss/_base-vars.scss
  5. 2 2
      src/components/base/assets/scss/components/_men-item.scss
  6. 1 1
      src/components/base/assets/scss/editor/_menu.scss
  7. 561 423
      src/components/base/components/icon/iconfont/demo_index.html
  8. 27 3
      src/components/base/components/icon/iconfont/iconfont.css
  9. 1 1
      src/components/base/components/icon/iconfont/iconfont.js
  10. 42 0
      src/components/base/components/icon/iconfont/iconfont.json
  11. BIN
      src/components/base/components/icon/iconfont/iconfont.ttf
  12. BIN
      src/components/base/components/icon/iconfont/iconfont.woff
  13. BIN
      src/components/base/components/icon/iconfont/iconfont.woff2
  14. 1699 545
      src/graphic/CanvasStyle/ImageLabels/SVGIcons.js
  15. 14 14
      src/graphic/CanvasStyle/default.js
  16. 6 18
      src/graphic/CanvasStyle/focus.js
  17. 7 18
      src/graphic/CanvasStyle/select.js
  18. 5 1
      src/graphic/Controls/AddPoint.js
  19. 72 4
      src/graphic/Controls/MoveLine.js
  20. 95 82
      src/graphic/Controls/UIControl.js
  21. 0 1
      src/graphic/Geometry/Circle.js
  22. 2 2
      src/graphic/Geometry/CurveRoadEdge.js
  23. 0 1
      src/graphic/Geometry/Elliptic.js
  24. 19 0
      src/graphic/Geometry/Geometry.js
  25. 1 4
      src/graphic/Geometry/Line.js
  26. 0 12
      src/graphic/Geometry/Point.js
  27. 1 0
      src/graphic/Geometry/RoadEdge.js
  28. 3 0
      src/graphic/Geometry/SVG.js
  29. 4 1
      src/graphic/History/History.js
  30. 10 5
      src/graphic/History/HistoryUtil.js
  31. 397 162
      src/graphic/Layer.js
  32. 7 9
      src/graphic/ListenLayer.js
  33. 47 72
      src/graphic/Load.js
  34. 160 18
      src/graphic/Renderer/Draw.js
  35. 2 2
      src/graphic/Service/CurveEdgeService.js
  36. 9 0
      src/graphic/Service/DataService.js
  37. 3 2
      src/graphic/Service/UIService.js
  38. 20 0
      src/graphic/Util/MathUtil.js
  39. 1 0
      src/graphic/enum/VectorCategory.js
  40. 3 3
      src/graphic/enum/VectorStyle.js
  41. 8 0
      src/graphic/enum/VectorWeight.js
  42. 0 1
      src/hook/custom/setup.ts
  43. 0 1
      src/hook/useEdit.ts
  44. 0 1
      src/hook/useGraphic.ts
  45. 1 1
      src/sdk/laser/core/enter.js
  46. 20 11
      src/views/graphic/geos/normalLine.vue
  47. 9 7
      src/views/graphic/geos/roadEdge.vue
  48. 5 2
      src/views/graphic/imageLabel.vue
  49. 148 156
      src/views/graphic/menus.ts
  50. 24 0
      src/views/scene/menus/pane.vue
  51. 2 2
      src/views/sys/menu/item/style.scss

+ 58 - 94
public/static/lib/potree/potree.js

@@ -54318,6 +54318,7 @@
 	            viewer.scene.measurements.forEach((e)=>{ 
 	                Potree.Utils.updateVisible(e, 'tranCamera', true); 
 	            }); 
+	            this.applyToCamera(viewport.camera);
 	            viewer.dispatchEvent({type:'camera_changed', viewport:viewer.mainViewport, changeInfo:{}});//update sprite
 	            
 	            console.log('tranCamera end');
@@ -63055,6 +63056,8 @@ void main() {
 		depth = (pos.z + 1.0) / 2.0;
 		gl_FragDepthEXT = depth;
 		
+        gl_FragDepthEXT = clamp(gl_FragDepthEXT, 0.0, 1.0);
+        
 		#if defined(color_type_depth)
 			color.r = linearDepth;
 			color.g = expDepth;
@@ -75041,6 +75044,13 @@ void main()
 	                    } 
 	                }
 	                 
+	                 
+	                let boxHelper = new Potree.Box3Helper(viewer.bound.boundingBox);
+					boxHelper.matrixAutoUpdate = false; 
+	                viewer.scene.scene.add(boxHelper); 
+	                viewer.bound.boxHelper = boxHelper;
+	                boxHelper.visible = false;
+	                
 	                console.log('allLoaded');
 	                viewer.dispatchEvent('allLoaded');
 	            }); 
@@ -75108,8 +75118,8 @@ void main()
 	    textarea.style.width = '160px';
 	    textarea.style.height =  '200px';
 	    textarea.style.position = 'fixed';
-	    textarea.style.left = 0;
-	    textarea.style.bottom = '50px';
+	    textarea.style.right = 0;
+	    textarea.style.bottom = '1px';
 	    textarea.style['z-index'] = 9999;
 	    textarea.style.color = 'black';
 	    textarea.style.opacity = 0.9;
@@ -76119,10 +76129,8 @@ void main()
 			material.fov = camera.fov * (Math.PI / 180);
 			/* material.screenWidth = renderer.domElement.clientWidth;
 			material.screenHeight = renderer.domElement.clientHeight; */
-	        material.resolution = resolution;
-	        
-	        
-			//material.spacing = this.pcoGeometry.spacing; // * Math.max(this.scale.x, this.scale.y, this.scale.z);  //应该不需要
+	        material.resolution = resolution; 
+	        material.spacing = this.pcoGeometry.spacing; // * Math.max(this.scale.x, this.scale.y, this.scale.z);  
 			material.near = camera.near;
 			material.far = camera.far;
 			material.uniforms.octreeSize.value = this.pcoGeometry.boundingBox.getSize(new Vector3()).x;
@@ -76137,7 +76145,7 @@ void main()
 
 			let getVal = (a, b) => a != void 0 ? a : b;
 	        
-	        
+	       
 	      
 	        let pickWindowSize_ = MathUtils$1.clamp( Math.round((1.1-this.maxLevel/this.nodeMaxLevel)*80),  5, 100);
 			let pickWindowSize = getVal(params.pickWindowSize, pickWindowSize_    ); /* 65 */ //拾取像素边长,越小越精准,但点云稀疏的话可能容易出现识别不到的情况。 另外左下侧会有缝隙无法识别到,缝隙大小和这个值有关//突然发现pickWindowSize在一百以内的变化对pick费时影响甚微,1和100差1毫秒不到,但400时会多4毫秒
@@ -76157,12 +76165,10 @@ void main()
 	                window.testScreen = 0;
 	            } 
 	        };
-	        
-	      
-
+	     
 			let pointSizeType = getVal(params.pointSizeType, this.material.pointSizeType);
 			let pointSize = getVal(params.pointSize, this.material.size);
-	 
+	   
 			let nodes = this.nodesOnRay(this.visibleNodes, ray);
 	 
 			if (nodes.length === 0) { 
@@ -76195,8 +76201,8 @@ void main()
 
 			{ // update pick material
 				pickMaterial.pointSizeType = pointSizeType;
-				//pickMaterial.shape = this.material.shape;
-				pickMaterial.shape = Potree.PointShape.PARABOLOID;
+				 //pickMaterial.shape = this.material.shape;
+	              pickMaterial.shape = Potree.PointShape.PARABOLOID;
 
 				pickMaterial.uniforms.uFilterReturnNumberRange.value = this.material.uniforms.uFilterReturnNumberRange.value;
 				pickMaterial.uniforms.uFilterNumberOfReturnsRange.value = this.material.uniforms.uFilterNumberOfReturnsRange.value;
@@ -76210,7 +76216,9 @@ void main()
 				pickMaterial.uniforms.maxSize.value = this.material.uniforms.maxSize.value;
 				pickMaterial.classification = this.material.classification;
 				pickMaterial.recomputeClassification();
-	 
+	            
+	            
+	            
 	            //pickClipped判断转移到上一层函数 
 	            let {bigClipInBox,clipBoxes_in,clipBoxes_out} = this.material;
 	            pickMaterial.setClipBoxes(bigClipInBox, clipBoxes_in, clipBoxes_out, []); 
@@ -76228,7 +76236,7 @@ void main()
 				parseInt(pixelPos.x - (pickWindowSize - 1) / 2),
 				parseInt(pixelPos.y - (pickWindowSize - 1) / 2),
 				parseInt(pickWindowSize), parseInt(pickWindowSize));
-
+	 
 
 			renderer.state.buffers.depth.setTest(pickMaterial.depthTest);
 			renderer.state.buffers.depth.setMask(pickMaterial.depthWrite);
@@ -76270,7 +76278,7 @@ void main()
 
 			let pixels = buffer;
 			let ibuffer = new Uint32Array(buffer.buffer); //四个数整合成一个
-
+	        // console.log(pixels.join(','))
 			// find closest hit inside pixelWindow boundaries
 			let min = Number.MAX_VALUE;
 			let hits = [], hits2 = [], rSquare;
@@ -76479,7 +76487,7 @@ void main()
 	            } 
 	            
 	        }  
-	        console.log('changePointSize:'  + this.dataset_id + ' , num: ' + (num && num.toPrecision(3)) + ' , size: ' + size.toPrecision(3),  'nodeMaxLevel', nodeMaxLevel.toPrecision(3), 'testMaxNodeCount',viewer.testMaxNodeCount     /* this.material.spacing */);
+	        //console.log('changePointSize:'  + this.dataset_id + ' , num: ' + (num && num.toPrecision(3)) + ' , size: ' + size.toPrecision(3),  'nodeMaxLevel', nodeMaxLevel.toPrecision(3), 'testMaxNodeCount',viewer.testMaxNodeCount     /* this.material.spacing */)
 	        if(size){
 	            if(Potree.settings.sortCloudMat){//被废弃,不给material分组了
 	                this.size = size;this.material.size = size;
@@ -81193,6 +81201,8 @@ void main()
 	                }
 	            }
 	            this.editStateChange(true);
+	            
+	            viewer.dispatchEvent({type:'dragMarker', object:this});
 	            return true
 	        }
 	        
@@ -81470,7 +81480,7 @@ void main()
 	        e.drag.endDragFun && e.drag.endDragFun(e);//  addmarker
 	         
 	        //if(this.changeCallBack)this.changeCallBack()
-	           
+	        viewer.dispatchEvent({type:'dropMarker', object:this});
 	        return true
 	    };
 	    
@@ -88379,6 +88389,7 @@ void main()
 			
 	        //TODO adapt to multiple lights
 			//this.renderShadowMap(visiblePointClouds2, camera, lights);  //???????
+	 
 
 			{  
 				for (let pointcloud of visiblePointClouds2) {
@@ -88391,7 +88402,7 @@ void main()
 	                material.near = camera.near;
 	                material.far = camera.far;
 	                material.uniforms.octreeSize.value = octreeSize;
-		
+	                 
 	                if(useEDL ){  
 	                    material.useEDL = true;
 	                    //material.fakeEDL = false; //add
@@ -89655,7 +89666,7 @@ void main()
 	        let raycaster; 
 	        
 	        viewer.addTimeMark('getIntersect','start');
-
+	 
 	        let getByDepthTex = ()=>{ 
 	            let intersect;
 	            if(prop.pos3d){
@@ -89693,6 +89704,8 @@ void main()
 	                {pickClipped: true, isMeasuring: this.isMeasuring, pickWindowSize, cameraChanged: !!prop.pos3d }  
 	                
 	            );
+	            
+	        
 	            //恢复
 	            if(prop.pos3d){
 	                viewport.view.applyToCamera(camera);
@@ -90599,6 +90612,7 @@ void main()
 	        
 	        
 			let drag = (e) => {
+	            
 	            if(!this.enabled)return
 	 
 	            let viewport = e.dragViewport;
@@ -91745,16 +91759,8 @@ void main()
 	                if(this.lastView){
 	                    this.switchView2(this.lastView); 
 	                }
-	            });
-	            
-	                
-	                 
-	            
-	            
-	        });
-	        
-	      
-	        
+	            }); 
+	        }); 
 	    }
 	   
 	    render(){
@@ -91793,56 +91799,7 @@ void main()
 	        this.switchView('perspective');
 	    }  
 	    
-	    /* switchView(type, dir, done){
-	        let view = viewer.mainViewport.view
-	        if(type == 'ortho'){
-	            if(viewer.mainViewport.camera != viewer.scene.cameraO){
-	                viewer.scene.cameraO.position.copy(viewer.mainViewport.camera.position)
-	                viewer.scene.cameraO.quaternion.copy(viewer.mainViewport.camera.quaternion)
-	                viewer.mainViewport.camera = viewer.scene.cameraO
-	                viewer.setCameraMode(CameraMode.ORTHOGRAPHIC) 
-	                navCubeViewer.controls.setEnable(false)
-	                 
-	                //假设保持到目前中心的视角范围不变
-	                splitScreen.setShiftTarget(viewer.mainViewport, viewer.bound.center)
-	                let dis = new THREE.Vector3().subVectors(viewer.mainViewport.shiftTarget,  viewer.scene.cameraO.position).length() ;   //-nearestPano[0].score
-		                    
-	                //根据2d->3d的式子逆求zoom
-	                let halfHeight = Math.abs(dis) * Math.tan( THREE.Math.degToRad(viewer.scene.cameraP.fov/2)); 
-	                viewer.scene.cameraO.zoom = viewer.scene.cameraO.top / halfHeight;
-	                viewer.scene.cameraO.updateProjectionMatrix();
-	                 
-	                console.log('zoom', viewer.scene.cameraO.zoom)
-	                
-	            }
-	            
-	            viewer.focusOnObject(viewer.bound, 'boundingBox', 1000, {dir }).promise.done(()=>{
-	                done && done()
-	                //console.log('回2', name)
-	                navCubeViewer.dispatchEvent('content_changed')
-	            })
-	        }else{
-	            
-	            if(viewer.mainViewport.camera == viewer.scene.cameraO){
-	                //viewer.scene.cameraP.position.copy(viewer.mainViewport.camera.position)
-	                //viewer.scene.cameraP.quaternion.copy(viewer.mainViewport.camera.quaternion)
-	                viewer.mainViewport.camera = viewer.scene.cameraP
-	                viewer.setCameraMode(CameraMode.PERSPECTIVE)
-	                
-	                //假设保持到目前中心的视角范围不变
-	                
-	                splitScreen.setShiftTarget(viewer.mainViewport, viewer.bound.center)
-	                viewer.mainViewport.targetPlane.setFromNormalAndCoplanarPoint( view.direction.clone(), viewer.bound.center )  
-	                viewer.mainViewport.targetPlane.projectPoint(view.position, viewer.mainViewport.shiftTarget )  
-	                 
-	                let halfHeight = viewer.scene.cameraO.top/viewer.scene.cameraO.zoom 
-	                let dis = halfHeight / Math.tan( THREE.Math.degToRad(viewer.scene.cameraP.fov/2)) 
-	                
-	                view.position.copy(viewer.mainViewport.shiftTarget).sub(view.direction.clone().multiplyScalar(dis)); 
-	                this.controls.setEnable(true) 
-	            } 
-	        }
-	    } */
+	    
 	    switchView(type, {yaw, pitch, dir}={}, done){
 	        if(viewer.mainViewport.view.isFlying())return
 	        let view = viewer.mainViewport.view;
@@ -91852,9 +91809,7 @@ void main()
 	            this.lastView.zoom = viewer.mainViewport.camera.zoom;
 	            
 	        }
-	        
-	        
-	        
+	         
 	        if(type == 'ortho'){
 	            let startCamera, endCamera;
 	            if(viewer.mainViewport.camera != viewer.scene.cameraO){
@@ -106127,10 +106082,13 @@ ENDSEC
 	        //默认隐藏, 显示的条件:测量拖拽  或  外部消息setEnable
 	        
 	        Potree.Utils.updateVisible(this, "default", false, 0); //默认隐藏 
-	        
-	        viewer.addEventListener("MeasureDragChange",(e)=>{//测量drag 
-	            Potree.Utils.updateVisible(this, "measure", e.state, 1,   e.state?'add':'cancel'); 
-	        });
+	       
+	        viewer.addEventListener("dragMarker",(e)=>{//测量drag 
+	            Potree.Utils.updateVisible(this, "measure", true, 1,   'add' ); 
+	        }); 
+	        viewer.addEventListener("dropMarker",(e)=>{//测量drag 
+	            Potree.Utils.updateVisible(this, "measure", false, 1,   'cancel' ); 
+	        }); 
 	         
 	        
 	        viewer.scene.view.addEventListener('flyingDone',()=>{
@@ -139313,10 +139271,16 @@ ENDSEC
 	                var inv = camera.matrixWorldInverse;
 	            }else {
 	                var cameraTemp = camera.clone();
-	                cameraTemp.position.copy(cameraPos);  
-	                cameraTemp.lookAt(target);
-	                cameraTemp.updateMatrix();
-	                cameraTemp.updateMatrixWorld();
+	                 
+	                let view = viewer.mainViewport.view.clone();
+	                view.position.copy(cameraPos);
+	                view.lookAt(target);
+	                if(o.endPitch != void 0){
+	                    view.pitch = o.endPitch;
+	                    view.yaw = o.endYaw;
+	                }
+	                view.applyToCamera(cameraTemp);
+	                 
 	                //对镜头的bound
 	                var inv = cameraTemp.matrixWorldInverse;
 	            } 
@@ -139329,7 +139293,7 @@ ENDSEC
 	                scale = 1.3;                
 	            }else { 
 	                bound = boundingBox.applyMatrix4(inv);
-	                scale = 0.9; 
+	                scale = 1.0;//0.9; 
 	            }
 	            
 	            boundSize = bound.getSize(new Vector3);
@@ -139464,7 +139428,7 @@ ENDSEC
 	            if(Potree.settings.displayMode == 'showPointCloud'){  //点云 
 	                let minDis = 0.3;
 	                
-	                //if(o.checkIntersect){
+	                if(o.checkIntersect){
 	                    let checkIntersect = ( )=>{ 
 	                        let intersect = this.inputHandler.ifBlockedByIntersect({pos3d:position, cameraPos: target});// 不一定准确
 	                        if(intersect){ 
@@ -139518,7 +139482,7 @@ ENDSEC
 	                    
 	                    checkIntersect(); 
 	                    //多折线没有areaPlane 有时候会看向空白区域 - -
-	                //}      
+	                }      
 	            }else if(Potree.settings.displayMode == 'showPanos'){//全景 (比较难校准)
 	                let target2, dir;
 	                if( object.measureType.includes('MulDistance')){//因为该线不闭合,可能看向target的方向会没有线,所以换一个target

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1 - 1
public/static/lib/potree/potree.js.map


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1 - 1
server/test/a0k4xu045_202305311600080410/attach/sceneStore


+ 5 - 5
src/components/base/assets/scss/_base-vars.scss

@@ -9,8 +9,8 @@
   --colors-color: #999;
   --colors-border-color: rgba(var(--colors-primary-fill), 0.16);
   --colors-content-color: rgb(--colors-primary-fill);
-  
-  
+
+
   --colors-normal-back: rgba(var(--colors-primary-fill), 0.1);
   --colors-normal-base: rgba(var(--colors-primary-fill), 0.7);
   --colors-normal-hover: rgba(var(--colors-primary-fill), 1);
@@ -22,7 +22,7 @@
   --colors-normal-fill-click: var(--colors-primary-click);
 
   --colors-error-fill: 250, 63, 72;
-  
+
   --small-size: 12px;
   --medium-size: 14px;
   --big-size: 16px;
@@ -38,11 +38,11 @@
 
   --editor-head-filter: blur(0px);
   --editor-head-height: 50px;
-  
+
   --editor-head-back: #252828;
 
   --editor-menu-filter: var(--editor-head-filter);
-  --editor-menu-width: 80px;
+  --editor-menu-width: 64px;
   --editor-menu-left: 0px;
   --editor-menu-right: 0px;
   --editer-menu-fill: 27, 27, 28;

+ 2 - 2
src/components/base/assets/scss/components/_men-item.scss

@@ -13,7 +13,7 @@
 
   span{
     margin-top: 6px;
-    width: 68px;
+    //width: 68px;
     overflow: hidden;
     word-wrap: break-word;
     text-align: center;
@@ -25,4 +25,4 @@
       color: var( --color-main-normal);
       background-color: rgba(255,255,255,0.06);
   }
-}
+}

+ 1 - 1
src/components/base/assets/scss/editor/_menu.scss

@@ -3,7 +3,7 @@
 .ui-editor-menu {
     user-select: none;
     width: var(--editor-menu-width);
-    filter: var(--editor-menu-filter); 
+    filter: var(--editor-menu-filter);
     background-color: var(--editor-menu-back);
     position: fixed;
     left: var(--editor-menu-left);

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 561 - 423
src/components/base/components/icon/iconfont/demo_index.html


+ 27 - 3
src/components/base/components/icon/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4084834 */
-  src: url('iconfont.woff2?t=1686814186940') format('woff2'),
-       url('iconfont.woff?t=1686814186940') format('woff'),
-       url('iconfont.ttf?t=1686814186940') format('truetype');
+  src: url('iconfont.woff2?t=1686900891221') format('woff2'),
+       url('iconfont.woff?t=1686900891221') format('woff'),
+       url('iconfont.ttf?t=1686900891221') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-jtxx_fangxb:before {
+  content: "\e7a4";
+}
+
+.icon-jtxx_fjdcxsfx:before {
+  content: "\e7a5";
+}
+
+.icon-jtxx_fengxb:before {
+  content: "\e7a0";
+}
+
+.icon-jtxx_jcd:before {
+  content: "\e7a1";
+}
+
+.icon-jtxx_jdcxsfx:before {
+  content: "\e7a2";
+}
+
+.icon-jtxx_ryydfx:before {
+  content: "\e7a3";
+}
+
 .icon-sc_sc:before {
   content: "\e79d";
 }

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1 - 1
src/components/base/components/icon/iconfont/iconfont.js


+ 42 - 0
src/components/base/components/icon/iconfont/iconfont.json

@@ -6,6 +6,48 @@
   "description": "交通事故现场勘验系统",
   "glyphs": [
     {
+      "icon_id": "36017753",
+      "name": "jtxx_fangxb",
+      "font_class": "jtxx_fangxb",
+      "unicode": "e7a4",
+      "unicode_decimal": 59300
+    },
+    {
+      "icon_id": "36017754",
+      "name": "jtxx_fjdcxsfx",
+      "font_class": "jtxx_fjdcxsfx",
+      "unicode": "e7a5",
+      "unicode_decimal": 59301
+    },
+    {
+      "icon_id": "36017749",
+      "name": "jtxx_fengxb",
+      "font_class": "jtxx_fengxb",
+      "unicode": "e7a0",
+      "unicode_decimal": 59296
+    },
+    {
+      "icon_id": "36017750",
+      "name": "jtxx_jcd",
+      "font_class": "jtxx_jcd",
+      "unicode": "e7a1",
+      "unicode_decimal": 59297
+    },
+    {
+      "icon_id": "36017751",
+      "name": "jtxx_jdcxsfx",
+      "font_class": "jtxx_jdcxsfx",
+      "unicode": "e7a2",
+      "unicode_decimal": 59298
+    },
+    {
+      "icon_id": "36017752",
+      "name": "jtxx_ryydfx",
+      "font_class": "jtxx_ryydfx",
+      "unicode": "e7a3",
+      "unicode_decimal": 59299
+    },
+    {
       "icon_id": "36016563",
       "name": "sc_sc",
       "font_class": "sc_sc",

BIN
src/components/base/components/icon/iconfont/iconfont.ttf


BIN
src/components/base/components/icon/iconfont/iconfont.woff


BIN
src/components/base/components/icon/iconfont/iconfont.woff2


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1699 - 545
src/graphic/CanvasStyle/ImageLabels/SVGIcons.js


+ 14 - 14
src/graphic/CanvasStyle/default.js

@@ -1,20 +1,20 @@
 import { coordinate } from "../Coordinate.js";
 
 const Road = {
-  strokeStyle: "#939393",
+  strokeStyle: "#2F8FFF",
   lineWidth: 1 * coordinate.ratio,
 };
 
 const RoadEdge = {
   ...Road,
   lineWidth: 1 * coordinate.ratio,
-  strokeStyle: "#000",
+  strokeStyle: "#2F8FFF",
 };
 
 const Lane = {
   ...RoadEdge,
   lineWidth: 1 * coordinate.ratio,
-  strokeStyle: "#000",
+  strokeStyle: "#2F8FFF",
   dash: [8 * coordinate.ratio, 8 * coordinate.ratio],
 };
 
@@ -117,8 +117,8 @@ const Measure = {
 };
 
 const NormalLine = {
-  strokeStyle: "#000",
-  lineWidth: 2 * coordinate.ratio,
+  strokeStyle: "#2F8FFF",
+  lineWidth: 1 * coordinate.ratio,
 };
 const CurveLine = {
   ...NormalLine,
@@ -136,7 +136,7 @@ const GuidePositionLine = {
 }
 const MeasureLine = {
   strokeStyle: "#2F8FFF",
-  lineWidth: 4 * coordinate.ratio,
+  lineWidth: 2 * coordinate.ratio,
   text: {
     fontSize: 12,
     fillColor: "#fff",
@@ -147,18 +147,18 @@ const MeasureLine = {
 const BaseLine = {
   strokeStyle: "red",
   fillStyle: "red",
-  lineWidth: 3 * coordinate.ratio,
+  lineWidth: 1 * coordinate.ratio,
 };
 
 const BasePoint = {
-  strokeStyle: "rgba(0,0,0,0)",
-  fillStyle: "#000",
+  strokeStyle: "rgba(255,255,255,0)",
+  fillStyle: "red",
   radius: 6 * coordinate.ratio,
-  lineWidth: 1 * coordinate.ratio,
+  lineWidth: 4 * coordinate.ratio,
   out: {
-    strokeStyle: "#000",
+    strokeStyle: "red",
     fillStyle: "rgba(255,255,255,0)",
-    radius: 8 * coordinate.ratio,
+    radius: 9 * coordinate.ratio,
     lineWidth: 1 * coordinate.ratio,
   },
 };
@@ -209,8 +209,8 @@ const TestPoint = {
 
 const SVG = {
   fillStyle: "rgba(0,0,0,0)",
-  strokeStyle: "black",
-  lineWidth: 2 * coordinate.ratio,
+  strokeStyle: "#3290FF",
+  lineWidth: 1 * coordinate.ratio,
 };
 
 export default {

+ 6 - 18
src/graphic/CanvasStyle/focus.js

@@ -14,13 +14,13 @@ const Circle = {
   radius: 30 * coordinate.ratio,
 };
 const MeasureLine = {
-  strokeStyle: "red",
+  strokeStyle: "#2F8FFF",
   lineWidth: 4 * coordinate.ratio,
   text: {
     fontSize: 12,
     fillColor: "#fff",
     padding: 6 * coordinate.ratio,
-    backColor: "red",
+    backColor: "#2F8FFF",
   },
 };
 const NormalLine = {
@@ -91,18 +91,6 @@ const DoubleArrowLine = {
   strokeStyle: "red",
 };
 
-const BasePoint = {
-  strokeStyle: "rgba(0,0,0,0)",
-  fillStyle: "#3290FF",
-  radius: 6 * coordinate.ratio,
-  lineWidth: 1 * coordinate.ratio,
-  out: {
-    strokeStyle: "#3290FF",
-    fillStyle: "rgba(255,255,255,0)",
-    radius: 8 * coordinate.ratio,
-    lineWidth: 1 * coordinate.ratio,
-  },
-};
 
 const TestPoint = {
   strokeStyle: "rgba(0,0,0,0)",
@@ -117,20 +105,20 @@ const TestPoint = {
   },
 };
 const BaseLine = {
-  strokeStyle: "#3290FF",
+  strokeStyle: "red",
+  fillStyle: "red",
   lineWidth: 3 * coordinate.ratio,
 };
 
 const SVG = {
-  fillStyle: "rgba(50,144,255,0.2)",
-  strokeStyle: "black",
+  fillStyle: "rgba(0,0,0,0)",
+  strokeStyle: "#3290FF",
   lineWidth: 2 * coordinate.ratio,
 };
 
 export default {
   Road,
   Text,
-  BasePoint,
   Point,
   SVG,
   SingleArrowLine,

+ 7 - 18
src/graphic/CanvasStyle/select.js

@@ -14,18 +14,19 @@ const Circle = {
   radius: 30 * coordinate.ratio,
 };
 const MeasureLine = {
-  strokeStyle: "red",
+  strokeStyle: "#2F8FFF",
   lineWidth: 4 * coordinate.ratio,
   text: {
     fontSize: 12,
     fillColor: "#fff",
     padding: 6 * coordinate.ratio,
-    backColor: "red",
+    backColor: "#2F8FFF",
   },
 };
 
 const BaseLine = {
-  strokeStyle: "#3290FF",
+  strokeStyle: "red",
+  fillStyle: "red",
   lineWidth: 3 * coordinate.ratio,
 };
 const NormalLine = {
@@ -89,18 +90,6 @@ const CrossPoint = {
   fillStyle: "#3290FF",
 };
 
-const BasePoint = {
-  strokeStyle: "rgba(0,0,0,0)",
-  fillStyle: "#3290FF",
-  radius: 6 * coordinate.ratio,
-  lineWidth: 1 * coordinate.ratio,
-  out: {
-    strokeStyle: "#3290FF",
-    fillStyle: "rgba(255,255,255,0)",
-    radius: 8 * coordinate.ratio,
-    lineWidth: 1 * coordinate.ratio,
-  },
-};
 
 const TestPoint = {
   strokeStyle: "rgba(0,0,0,0)",
@@ -116,11 +105,12 @@ const TestPoint = {
 };
 
 const SVG = {
-  fillStyle: "rgba(50,144,255,0.2)",
-  strokeStyle: "black",
+  fillStyle: "rgba(0,0,0,0)",
+  strokeStyle: "#3290FF",
   lineWidth: 2 * coordinate.ratio,
 };
 
+
 export default {
   Road,
   Text,
@@ -132,7 +122,6 @@ export default {
   CrossPoint,
   CurveRoad,
   MeasureLine,
-  BasePoint,
   BaseLine,
   CurveLine,
   Circle,

+ 5 - 1
src/graphic/Controls/AddPoint.js

@@ -101,11 +101,12 @@ export default class AddPoint {
       VectorCategory.Line.GuidePositionLine
     );
 
-    lineService.createByPointId(
+    let guidePositionLine = lineService.createByPointId(
       basePoint.vectorId,
       join.vectorId,
       VectorCategory.Line.PositionLine
     );
+    guidePositionLine.setLocationMode(Constant.angleLocationMode);
   }
 
   //综合定位法
@@ -159,6 +160,9 @@ export default class AddPoint {
     if (testPoint.getCategory() != VectorCategory.Point.TestPoint) {
       return;
     }
+    if (!Settings.baseLineId) {
+      return;
+    }
     let lineGeometry = dataService.getLine(Settings.baseLineId);
     let startPoint = dataService.getPoint(lineGeometry.startId);
     let endPoint = dataService.getPoint(lineGeometry.endId);

+ 72 - 4
src/graphic/Controls/MoveLine.js

@@ -1,5 +1,9 @@
+import Constant from "../Constant";
 import { dataService } from "../Service/DataService";
+import { lineService } from "../Service/LineService";
+import { pointService } from "../Service/PointService";
 import { mathUtil } from "../Util/MathUtil";
+import VectorCategory from "../enum/VectorCategory";
 
 export default class MoveLine {
   constructor() {}
@@ -10,10 +14,74 @@ export default class MoveLine {
     let line = dataService.getLine(lineId);
     let startPoint = dataService.getPoint(line.startId);
     let endPoint = dataService.getPoint(line.endId);
-    startPoint.x += dx;
-    startPoint.y += dy;
-    endPoint.x += dx;
-    endPoint.y += dy;
+    //垂直移动
+    if (
+      line.getCategory() == VectorCategory.Line.PositionLine &&
+      line.getLocationMode() == Constant.angleLocationMode
+    ) {
+      let point1 = {
+        x: startPoint.x + dx,
+        y: startPoint.y + dy,
+      };
+      let point2 = {
+        x: endPoint.x + dx,
+        y: endPoint.y + dy,
+      };
+      let lineGeometry = mathUtil.createLine1(point1, point2);
+      point1 = mathUtil.getJoinLinePoint(startPoint, lineGeometry);
+      //startPoint本来是基准点
+      if (startPoint.getCategory() == VectorCategory.Point.BasePoint) {
+        //达到一定距离才能移动
+        if (mathUtil.getDistance(startPoint, point1) < Constant.minAdsorbPix) {
+          return false;
+        }
+        let newStartPoint = pointService.create(point1);
+        lineService.createByPointId(
+          startPoint.vectorId,
+          newStartPoint.vectorId,
+          VectorCategory.Line.ExtendedPositionLine
+        );
+        dataService.deletePointParent(startPoint.vectorId, lineId);
+        line.startId = newStartPoint.vectorId;
+        newStartPoint.setPointParent(line.vectorId, "start");
+      } else {
+        startPoint.x = point1.x;
+        startPoint.y = point1.y;
+        let parents = Object.keys(startPoint.parent);
+        let extendedLine = dataService.getLine(parents[0]);
+        if (
+          extendedLine.getCategory() != VectorCategory.Line.ExtendedPositionLine
+        ) {
+          extendedLine = dataService.getLine(parents[1]);
+        }
+        if (
+          extendedLine.getCategory() == VectorCategory.Line.ExtendedPositionLine
+        ) {
+          //point1是基准点
+          point1 = dataService.getPoint(extendedLine.startId);
+          point2 = dataService.getPoint(extendedLine.endId);
+          if (mathUtil.getDistance(point1, point2) < Constant.minAdsorbPix) {
+            dataService.deleteLine(extendedLine.vectorId);
+            dataService.deletePoint(extendedLine.endId);
+
+            line.startId = point1.vectorId;
+            point1.setPointParent(line.vectorId, "start");
+
+            lineGeometry = mathUtil.createLine3(lineGeometry, point1);
+          }
+        }
+      }
+
+      point2 = mathUtil.getJoinLinePoint(endPoint, lineGeometry);
+      endPoint.x = point2.x;
+      endPoint.y = point2.y;
+    } else {
+      startPoint.x += dx;
+      startPoint.y += dy;
+      endPoint.x += dx;
+      endPoint.y += dy;
+    }
+    return true;
   }
 
   moveCurveLine(curveLineId, dx, dy) {

+ 95 - 82
src/graphic/Controls/UIControl.js

@@ -1,37 +1,38 @@
-import { coordinate } from "../Coordinate.js";
-import LayerEvents from "../enum/LayerEvents.js";
-import UIEvents from "../enum/UIEvents.js";
-import RoadTemplate from "../enum/RoadTemplate.js";
-import RoadStructure from "../enum/RoadStructure.js";
-import VectorType from "../enum/VectorType.js";
-import VectorStyle from "../enum/VectorStyle.js";
-import GeoActions from "../enum/GeoActions.js";
-import VectorEvents from "../enum/VectorEvents.js";
-import SVGType from "../enum/SVGType.js";
-import { stateService } from "../Service/StateService.js";
-import { uiService } from "../Service/UIService.js";
-import { dataService } from "../Service/DataService.js";
-import { historyService } from "../Service/HistoryService.js";
-import { elementService } from "../Service/ElementService";
-import { lineService } from "../Service/LineService.js";
-import { circleService } from "../Service/CircleService.js";
-import { textService } from "../Service/TextService.js";
-import { magnifierService } from "../Service/MagnifierService.js";
-import { mathUtil } from "../Util/MathUtil";
-import Constant from "../Constant";
+import { coordinate } from '../Coordinate.js';
+import LayerEvents from '../enum/LayerEvents.js';
+import UIEvents from '../enum/UIEvents.js';
+import RoadTemplate from '../enum/RoadTemplate.js';
+import RoadStructure from '../enum/RoadStructure.js';
+import VectorType from '../enum/VectorType.js';
+import VectorStyle from '../enum/VectorStyle.js';
+import VectorWeight from '../enum/VectorWeight.js';
+import GeoActions from '../enum/GeoActions.js';
+import VectorEvents from '../enum/VectorEvents.js';
+import SVGType from '../enum/SVGType.js';
+import { stateService } from '../Service/StateService.js';
+import { uiService } from '../Service/UIService.js';
+import { dataService } from '../Service/DataService.js';
+import { historyService } from '../Service/HistoryService.js';
+import { elementService } from '../Service/ElementService';
+import { lineService } from '../Service/LineService.js';
+import { circleService } from '../Service/CircleService.js';
+import { textService } from '../Service/TextService.js';
+import { magnifierService } from '../Service/MagnifierService.js';
+import { mathUtil } from '../Util/MathUtil';
+import Constant from '../Constant';
 // import { roomsUtil } from "../Room/RoomsUtil.js";
-import { addRoad } from "../Controls/AddRoad";
-import { addLine } from "./AddLine.js";
-import VectorCategory from "../enum/VectorCategory.js";
+import { addRoad } from '../Controls/AddRoad';
+import { addLine } from './AddLine.js';
+import VectorCategory from '../enum/VectorCategory.js';
 // import { floorplanData } from "../VectorData.js";
-import Message from "@/components/base/components/message/message.vue";
-import { pointService } from "../Service/PointService.js";
-import Settings from "../Settings.js";
-import { addPoint } from "./AddPoint.js";
-import { ellipticService } from "../Service/EllipticService.js";
-import { curveRoadPointService } from "../Service/CurveRoadPointService.js";
-import { roadService } from "../Service/RoadService.js";
-import { curveRoadService } from "../Service/CurveRoadService.js";
+import Message from '@/components/base/components/message/message.vue';
+import { pointService } from '../Service/PointService.js';
+import Settings from '../Settings.js';
+import { addPoint } from './AddPoint.js';
+import { ellipticService } from '../Service/EllipticService.js';
+import { curveRoadPointService } from '../Service/CurveRoadPointService.js';
+import { roadService } from '../Service/RoadService.js';
+import { curveRoadService } from '../Service/CurveRoadService.js';
 
 export default class UIControl {
   constructor(layer, newsletter, graphicStateUI) {
@@ -87,7 +88,7 @@ export default class UIControl {
         }
 
         //执行新的事件
-        if (uiService.isBelongRoad(selectUI) || selectUI == "road") {
+        if (uiService.isBelongRoad(selectUI) || selectUI == 'road') {
           stateService.setEventName(LayerEvents.AddRoad);
         } else if (selectUI == UIEvents.CurveRoad) {
           stateService.setEventName(LayerEvents.AddCurveRoad);
@@ -120,16 +121,51 @@ export default class UIControl {
   }
 
   updateVectorForSelectUI(selectUI) {
-    console.log("selectUI", selectUI)
+    console.log('selectUI', selectUI);
     const focusItem = stateService.getFocusItem();
+
+    // if (selectUI == VectorStyle.Bold || selectUI == VectorStyle.Thinning) {
+    //   if (focusItem.type == VectorType.Line) {
+    //     let Line = dataService.getLine(focusItem.vectorId);
+    //     Line.setStyle(selectUI);
+    //   } else if (focusItem.type == VectorType.RoadEdge) {
+    //     let roadEdge = dataService.getRoadEdge(focusItem.vectorId);
+    //     if (roadEdge) {
+    //       roadEdge.setStyle(selectUI);
+    //     } else {
+    //       roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId);
+    //       roadEdge.setStyle(selectUI);
+    //     }
+    //   }
+    //   this.layer.history.save();
+    //   this.layer.renderer.autoRedraw();
+    // }
+    // else
     if (uiService.isBelongRoadEdgeStyle(selectUI)) {
-      let roadEdge = dataService.getRoadEdge(focusItem.vectorId);
-      if (roadEdge) {
-        roadEdge.setStyle(selectUI);
+      let key = null;
+      if (VectorStyle[selectUI]) {
+        key = 'setStyle';
+      } else if (VectorWeight[selectUI]) {
+        key = 'setWeight';
+      }
+      console.log(key);
+
+      if (focusItem.type == VectorType.Line) {
+        let Line = dataService.getLine(focusItem.vectorId);
+        // Line.setStyle(selectUI);
+        Line[key](selectUI);
       } else {
-        roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId);
-        roadEdge.setStyle(selectUI);
+        let roadEdge = dataService.getRoadEdge(focusItem.vectorId);
+        if (roadEdge) {
+          // roadEdge.setStyle(selectUI);
+          roadEdge[key](selectUI);
+        } else {
+          roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId);
+          // roadEdge.setStyle(selectUI);
+          roadEdge[key](selectUI);
+        }
       }
+
       this.layer.history.save();
       this.layer.renderer.autoRedraw();
     } else if (selectUI == VectorEvents.AddLane) {
@@ -380,18 +416,18 @@ export default class UIControl {
   }
 
   getCadBlob(canvas) {
-    var type = "jpg";
+    var type = 'jpg';
     return new Promise((resolve) => canvas.toBlob(resolve, `${type}/image`));
   }
 
   downloadCadImg(canvas, filename) {
     // 图片导出为 jpg 格式
-    var type = "jpg";
+    var type = 'jpg';
     var imgData = canvas.toDataURL(type, 3);
     canvas.toBlob(`${type}/image`);
 
     // 加工image data,替换mime type
-    imgData = imgData.replace(this._fixType(type), "image/octet-stream");
+    imgData = imgData.replace(this._fixType(type), 'image/octet-stream');
     // 下载后的图片名
     //var filename = 'cad_' + new Date().getTime() + '.' + type
     // download
@@ -399,38 +435,19 @@ export default class UIControl {
   }
 
   saveFile(data, filename) {
-    var save_link = document.createElementNS(
-      "http://www.w3.org/1999/xhtml",
-      "a"
-    );
+    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
     save_link.href = data;
     save_link.download = filename;
 
-    var event = document.createEvent("MouseEvents");
-    event.initMouseEvent(
-      "click",
-      true,
-      false,
-      window,
-      0,
-      0,
-      0,
-      0,
-      0,
-      false,
-      false,
-      false,
-      false,
-      0,
-      null
-    );
+    var event = document.createEvent('MouseEvents');
+    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
     save_link.dispatchEvent(event);
   }
 
   _fixType(type) {
-    type = type.toLowerCase().replace(/jpg/i, "jpeg");
+    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
     var r = type.match(/png|jpeg|bmp|gif/)[0];
-    return "image/" + r;
+    return 'image/' + r;
   }
   /****************************************************************************针对菜单*******************************************************************************/
 
@@ -489,9 +506,7 @@ export default class UIControl {
   /******************************************************************************************************************************************************************/
 
   prompt(msg) {
-    this._prompts.push(
-      Message.success(typeof msg === "string" ? { msg } : msg)
-    );
+    this._prompts.push(Message.success(typeof msg === 'string' ? { msg } : msg));
   }
 
   // 进入持续添加出确认与取消框
@@ -499,7 +514,7 @@ export default class UIControl {
     this.graphicStateUI.continuedMode = true;
   }
   confirmEntry() {
-    console.log("确认");
+    console.log('确认');
     this.graphicStateUI.continuedMode = false;
     this.layer.exit();
     uiService.setSelectLineCategory(VectorCategory.Line.NormalLine);
@@ -508,7 +523,7 @@ export default class UIControl {
     this.layer.renderer.autoRedraw();
   }
   confirmCancel() {
-    console.log("取消");
+    console.log('取消');
     this.graphicStateUI.continuedMode = false;
     addPoint.deleteTestPoints();
     this.layer.exit();
@@ -520,16 +535,14 @@ export default class UIControl {
 
   // 设置默认设置
   setDefaultSetting(setting) {
-    console.log("获得设置", setting);
-
-    uiService.setRoadMidDivideWidth(
-      setting.roadQuarantineWidth / coordinate.res
-    );
-    uiService.setCurveRoadMidDivideWidth(
-      setting.roadQuarantineWidth / coordinate.res
-    );
+    console.log('获得设置', setting);
+
+    uiService.setRoadMidDivideWidth(setting.roadQuarantineWidth / coordinate.res);
+    uiService.setCurveRoadMidDivideWidth(setting.roadQuarantineWidth / coordinate.res);
     uiService.setSingleLaneWidth(setting.singleRoadWidth / coordinate.res);
-    uiService.setLineWidth(setting.lineWidth / 1000 / coordinate.res);
+    // uiService.setLineWidth(setting.lineWidth / 1000 / coordinate.res);
+    uiService.setLineWidth(setting.lineWidth);
+    this.layer.renderer.autoRedraw();
   }
 
   // 获取默认设置
@@ -540,8 +553,8 @@ export default class UIControl {
     return {
       singleRoadWidth: singleLaneWidth * coordinate.res,
       roadQuarantineWidth: roadMidDivideWidth * coordinate.res,
-      // lineWidth: lineWidth * coordinate.res * 1000,
-      lineWidth: lineWidth ,
+      lineWidth: lineWidth * coordinate.res * 1000,
+      lineWidth: lineWidth,
     };
   }
 

+ 0 - 1
src/graphic/Geometry/Circle.js

@@ -4,7 +4,6 @@ import Geometry from "./Geometry";
 import Constant from "../Constant.js";
 import Style from "../CanvasStyle";
 
-//不靠墙
 export default class Circle extends Geometry {
   constructor(center, radius, vectorId) {
     super();

+ 2 - 2
src/graphic/Geometry/CurveRoadEdge.js

@@ -4,14 +4,14 @@ import VectorType from "../enum/VectorType.js";
 import { mathUtil } from "../Util/MathUtil.js";
 
 export default class CurveRoadEdge extends Geometry {
-  constructor(start, end, vectorId, parentId) {
+  constructor(start, end, vectorId, parentId, points) {
     super();
     this.parent = parentId;
     this.start = {};
     this.end = {};
     this.vectorId = null;
     this.style = null;
-    this.points = [];
+    this.points = points || [];
     this.curves = [];
     this.geoType = VectorType.CurveRoadEdge;
     this.setId(vectorId);

+ 0 - 1
src/graphic/Geometry/Elliptic.js

@@ -4,7 +4,6 @@ import Geometry from "./Geometry";
 import Constant from "../Constant.js";
 import Style from "../CanvasStyle";
 
-//不靠墙
 export default class Elliptic extends Geometry {
   constructor(center, radiusX, radiusY, vectorId) {
     super();

+ 19 - 0
src/graphic/Geometry/Geometry.js

@@ -107,6 +107,13 @@ export default class Geometry {
   setStyle(style) {
     this.style = style;
   }
+  getStyle() {
+    return this.weight;
+  }
+
+  setWeight(weight) {
+    this.weight = weight;
+  }
 
   getType() {
     return this.type;
@@ -116,6 +123,18 @@ export default class Geometry {
     this.type = type;
   }
 
+  getCategory() {
+    return this.category;
+  }
+
+  setLocationMode(value) {
+    this.locationMode = value;
+  }
+
+  getLocationMode() {
+    return this.locationMode;
+  }
+
   // ptSrc: 圆上某点(初始点);
   // ptRotationCenter: 圆心点;
   // angle: 旋转角度°  -- [angle * M_PI / 180]:将角度换算为弧度

+ 1 - 4
src/graphic/Geometry/Line.js

@@ -12,6 +12,7 @@ export default class Line extends Geometry {
     this.startId = startId;
     this.endId = endId;
     this.category = Settings.selectLineCategory;
+    this.locationMode = null;
     this.color = Style.SingleArrowLine.strokeStyle; //箭头类型会用到
     this.value = null; //测量线会用到
     this.geoType = VectorType.Line;
@@ -27,10 +28,6 @@ export default class Line extends Geometry {
     this.category = value;
   }
 
-  getCategory() {
-    return this.category;
-  }
-
   getDir(pointId) {
     if (this.startId == pointId) {
       return "start";

+ 0 - 12
src/graphic/Geometry/Point.js

@@ -24,10 +24,6 @@ export default class Point extends Geometry {
     this.y = position.y;
   }
 
-  getCategory() {
-    return this.category;
-  }
-
   getLinkedBasePointId() {
     return this.linkedBasePointId;
   }
@@ -52,12 +48,4 @@ export default class Point extends Geometry {
       this.category = value;
     }
   }
-
-  setLocationMode(value) {
-    this.locationMode = value;
-  }
-
-  getLocationMode() {
-    return this.locationMode;
-  }
 }

+ 1 - 0
src/graphic/Geometry/RoadEdge.js

@@ -12,6 +12,7 @@ export default class RoadEdge extends Geometry {
     this.vectorId = null;
     this.style = null;
     this.geoType = VectorType.RoadEdge;
+    this.lineWidth = 4
     this.setId(vectorId);
     this.setPositions(start, end);
   }

+ 3 - 0
src/graphic/Geometry/SVG.js

@@ -90,6 +90,9 @@ export default class SVG extends Geometry {
     this.points.push(point3);
     this.points.push(point4);
   }
+  setPoints(points){
+    this.points = points
+  }
 
   setBoundingVertexs2(position, pointIndex) {
     if (mathUtil.getDistance(position, this.center) < Constant.minAdsorbPix) {

+ 4 - 1
src/graphic/History/History.js

@@ -782,12 +782,14 @@ export default class History {
   goNextForCurveRoadEdges(itemForCurveRoadEdges) {
     for (let i = 0; i < itemForCurveRoadEdges.length; ++i) {
       const item = itemForCurveRoadEdges[i];
+ 
       if (item.handle == HistoryEvents.AddCurveRoadEdge) {
         let vCurveRoadEdge = curveEdgeService.create(
           item.curveRoadEdge.start,
           item.curveRoadEdge.end,
           item.curveRoadEdge.id,
-          item.curveRoadEdge.parent
+          item.curveRoadEdge.parent,
+          item.curveRoadEdge.points,
         );
         historyUtil.assignCurveRoadEdgeFromCurveRoadEdge(
           vCurveRoadEdge,
@@ -873,6 +875,7 @@ export default class History {
     historyService.redoHistoryRecord();
     const item = historyService.getHistoryRecord();
     if (item) {
+ 
       stateService.clear();
 
       this.goNextForPoints(item.points);

+ 10 - 5
src/graphic/History/HistoryUtil.js

@@ -27,7 +27,8 @@ export default class HistoryUtil {
     if (
       line1.startId == line2.startId &&
       line1.endId == line2.endId &&
-      line1.category == line2.category
+      line1.category == line2.category &&
+      line1.locationMode == line2.locationMode
     ) {
       return false;
     } else {
@@ -295,6 +296,7 @@ export default class HistoryUtil {
     lineInfo.start = line2.start;
     lineInfo.end = line2.end;
     lineInfo.category = line2.category;
+    lineInfo.locationMode = line2.locationMode;
     lineInfo.value = line2.value;
     this.setLineInfo(lineInfo);
   }
@@ -425,7 +427,8 @@ export default class HistoryUtil {
     curveRoadPointInfo.parent = JSON.parse(
       JSON.stringify(curveRoadPoint2.parent)
     );
-    curveRoadPointInfo.index = curveRoadPoint1.index;
+
+    curveRoadPointInfo.index = curveRoadPoint2.index;
     this.setCurveRoadPointInfo(curveRoadPointInfo);
   }
 
@@ -486,7 +489,8 @@ export default class HistoryUtil {
     curveRoadInfo.points = [];
     for (let i = 0; i < curveRoad2.points.length; ++i) {
       curveRoadInfo.points[i] = {};
-      curveRoadInfo.points[i].vectorId = curveRoad2.points[i].vectorId;
+      // curveRoadInfo.points[i].vectorId = curveRoad2.points[i].vectorId;
+      curveRoadInfo.points[i] = curveRoad2.points[i];
     }
     this.setCurveRoadInfo(curveRoadInfo);
   }
@@ -542,6 +546,7 @@ export default class HistoryUtil {
     data.start = line.startId;
     data.end = line.endId;
     data.category = line.category;
+    data.locationMode = line.locationMode;
     data.type = line.geoType;
     return data;
   }
@@ -715,7 +720,6 @@ export default class HistoryUtil {
     data.rightEdgeId = curveRoad.rightEdgeId;
     data.points = JSON.parse(JSON.stringify(curveRoad.points));
     data.curves = JSON.parse(JSON.stringify(curveRoad.curves));
-
     data.way = curveRoad.way;
     if (curveRoad.way == Constant.oneWay) {
       data.singleCurveRoadWidth = curveRoad.singleRoadWidth;
@@ -780,6 +784,7 @@ export default class HistoryUtil {
     line.startId = lineInfo.start;
     line.endId = lineInfo.end;
     line.category = lineInfo.category;
+    line.locationMode = lineInfo.locationMode;
     line.value = lineInfo.value;
     return line;
   }
@@ -925,7 +930,7 @@ export default class HistoryUtil {
     //   );
     // }
     curveRoad.points = JSON.parse(JSON.stringify(curveRoadInfo.points));
-    curveRoad.curves = JSON.parse(JSON.stringify(curveRoadInfo.midDivide));
+    curveRoad.curves = JSON.parse(JSON.stringify(curveRoadInfo.curves));
 
     if (curveRoad.way == Constant.oneWay) {
       curveRoad.singleCurveRoadWidth = curveRoadInfo.singleCurveRoadWidth;

+ 397 - 162
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,11 +154,15 @@ 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:
@@ -172,7 +176,11 @@ 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:
@@ -186,7 +194,11 @@ 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:
@@ -194,18 +206,34 @@ 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();
@@ -218,18 +246,34 @@ 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();
@@ -240,12 +284,18 @@ 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(
@@ -260,7 +310,10 @@ 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();
@@ -341,14 +394,24 @@ 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) {
-        if (eventName == LayerEvents.MoveMagnifier && stateService.getSelectItem().state != 0) {
+        if (
+          eventName == LayerEvents.MoveMagnifier &&
+          stateService.getSelectItem().state != 0
+        ) {
         } else {
           stateService.clearFocusItem();
           this.uiControl.focusVector = null;
@@ -369,15 +432,17 @@ 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);
@@ -486,12 +551,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);
@@ -608,9 +673,16 @@ 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:
@@ -621,7 +693,10 @@ 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,
@@ -631,7 +706,11 @@ 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 {
@@ -668,19 +747,23 @@ 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) {
@@ -723,13 +806,25 @@ 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);
+          let flag = moveLine.moveLine(
+            draggingItem.vectorId,
+            (dx * coordinate.defaultZoom) / coordinate.zoom,
+            (dy * coordinate.defaultZoom) / coordinate.zoom
+          );
+          if (!flag) {
+            this.lastX = this.lastX - dx / coordinate.ratio;
+            this.lastY = this.lastY - dy / coordinate.ratio;
+          }
           needAutoRedraw = true;
         }
         break;
@@ -771,16 +866,33 @@ 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;
           }
@@ -790,9 +902,22 @@ 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;
           }
@@ -811,14 +936,22 @@ 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;
     }
@@ -894,19 +1027,40 @@ 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();
@@ -1049,7 +1203,11 @@ 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();
@@ -1062,7 +1220,7 @@ export default class Layer {
         break;
     }
 
-    this.setEventName('mouseUp');
+    this.setEventName("mouseUp");
     stateService.clearDraggingItem();
     if (needAutoRedraw) {
       this.renderer.autoRedraw();
@@ -1072,9 +1230,11 @@ 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;
@@ -1111,10 +1271,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);
@@ -1125,105 +1285,142 @@ 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);
           }
@@ -1232,7 +1429,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());
@@ -1240,14 +1437,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) {
@@ -1286,7 +1483,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();
@@ -1314,7 +1511,8 @@ 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();
@@ -1331,7 +1529,10 @@ 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);
@@ -1466,23 +1667,57 @@ 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 = {};
@@ -1492,7 +1727,7 @@ export default class Layer {
     }
     if (otherPoint2) {
       otherPoint.y = otherPoint2.y;
-      if (!otherPoint.hasOwnProperty('x')) {
+      if (!otherPoint.hasOwnProperty("x")) {
         otherPoint.x = otherPoint2.x;
       }
     }

+ 7 - 9
src/graphic/ListenLayer.js

@@ -302,8 +302,9 @@ export default class ListenLayer {
 
       const line = dataService.getLine(lineId);
       if (
-        line.getCategory() == VectorCategory.Line.PositionLine ||
-        line.getCategory() == VectorCategory.Line.GuidePositionLine
+        line.getCategory() == VectorCategory.Line.GuidePositionLine ||
+        (line.getCategory() == VectorCategory.Line.PositionLine &&
+          line.getLocationMode() != Constant.angleLocationMode)
       ) {
         continue;
       }
@@ -1285,20 +1286,17 @@ export default class ListenLayer {
         VectorType.SVG,
         this.modifyPoint.index
       );
-    } else if (this.modifyPoint.magnifierId) {  
-      if(this.modifyPoint.index==0){
+    } else if (this.modifyPoint.magnifierId) {
+      if (this.modifyPoint.index == 0) {
         //点击隐藏的放大镜不显示
         stateService.setSelectItem(
           this.modifyPoint.magnifierId,
           VectorType.Magnifier,
           this.modifyPoint.index
         );
-      }else{
-        stateService.setSelectState(
-          this.modifyPoint.index
-        );
+      } else {
+        stateService.setSelectState(this.modifyPoint.index);
       }
-    
     } else if (this.modifyPoint.linkedEdgeId) {
       stateService.setSelectItem(
         this.modifyPoint.linkedEdgeId,

+ 47 - 72
src/graphic/Load.js

@@ -1,19 +1,20 @@
-import { dataService } from "./Service/DataService.js";
-import { lineService } from "./Service/LineService.js";
-import { pointService } from "./Service/PointService.js";
-import { imageService } from "./Service/ImageService.js";
-import VectorCategory from "./enum/VectorCategory.js";
-import { coordinate } from "./Coordinate.js";
-import Settings from "./Settings";
-import { circleService } from "./Service/CircleService.js";
-import { magnifierService } from "./Service/MagnifierService.js";
-import { textService } from "./Service/TextService.js";
-import { mathUtil } from "./Util/MathUtil.js";
+import { dataService } from './Service/DataService.js';
+import { lineService } from './Service/LineService.js';
+import { pointService } from './Service/PointService.js';
+import { imageService } from './Service/ImageService.js';
+import VectorCategory from './enum/VectorCategory.js';
+import { coordinate } from './Coordinate.js';
+import Settings from './Settings';
+import { circleService } from './Service/CircleService.js';
+import { magnifierService } from './Service/MagnifierService.js';
+import { textService } from './Service/TextService.js';
+import { svgService } from './Service/SVGService.js';
+import { mathUtil } from './Util/MathUtil.js';
 
 export default class Load {
   constructor(layer) {
     this.layer = layer;
-    this.version = "v1.0";
+    this.version = 'v1.0';
     this.vectorsJson = null;
     this.newVectorId = null;
   }
@@ -22,10 +23,7 @@ export default class Load {
     this.layer.initLocation();
     if (dataLocal) {
       if (dataLocal.backgroundImg) {
-        let bgImg = imageService.createBackgroundImg(
-          dataLocal.backgroundImg.src,
-          dataLocal.backgroundImg.vectorId
-        );
+        let bgImg = imageService.createBackgroundImg(dataLocal.backgroundImg.src, dataLocal.backgroundImg.vectorId);
         bgImg.setCenter(dataLocal.backgroundImg.center);
         bgImg.setDisplay(dataLocal.backgroundImg.display);
         bgImg.setAngle(dataLocal.backgroundImg.angle);
@@ -38,11 +36,7 @@ export default class Load {
       }
       if (dataLocal.circles) {
         for (let key in dataLocal.circles) {
-          let circle = circleService.create(
-            dataLocal.circles[key].center,
-            dataLocal.circles[key].radius,
-            key
-          );
+          let circle = circleService.create(dataLocal.circles[key].center, dataLocal.circles[key].radius, key);
           circle.setPoints(dataLocal.circles[key].points);
           circle.setColor(dataLocal.circles[key].color);
           circle.setDisplay(dataLocal.circles[key].display);
@@ -50,10 +44,7 @@ export default class Load {
       }
       if (dataLocal.magnifiers) {
         for (let key in dataLocal.magnifiers) {
-          let magnifier = magnifierService.create(
-            dataLocal.magnifiers[key].position,
-            key
-          );
+          let magnifier = magnifierService.create(dataLocal.magnifiers[key].position, key);
           magnifier.setSrc(dataLocal.magnifiers[key].photoUrl);
           magnifier.setDisplay(dataLocal.magnifiers[key].display);
           try {
@@ -67,27 +58,36 @@ export default class Load {
         for (let key in dataLocal.points) {
           let point = pointService.create(dataLocal.points[key], key);
           point.setCategory(dataLocal.points[key].category);
-          point.setParent(
-            JSON.parse(JSON.stringify(dataLocal.points[key].parent))
-          );
+          point.setParent(JSON.parse(JSON.stringify(dataLocal.points[key].parent)));
           point.setDisplay(dataLocal.points[key].display);
         }
       }
+      if (dataLocal.svgs) {
+        for (let key in dataLocal.svgs) {
+          let svg = svgService.create(dataLocal.svgs[key].center, dataLocal.svgs[key].type, dataLocal.svgs[key].vectorId);
+          svg.setPoints(dataLocal.svgs[key].points)
+        }
+      }
 
       if (dataLocal.lines) {
         for (let key in dataLocal.lines) {
-          let line = lineService.createByPointId(
-            dataLocal.lines[key].startId,
-            dataLocal.lines[key].endId,
-            dataLocal.lines[key].category,
-            key
-          );
+          let line = lineService.createByPointId(dataLocal.lines[key].startId, dataLocal.lines[key].endId, dataLocal.lines[key].category, key);
+
+          if (dataLocal.lines[key].style) {
+            line.setStyle(dataLocal.lines[key].style);
+          }
+          if (dataLocal.lines[key].weight) {
+            line.setWeight(dataLocal.lines[key].weight);
+          }
           if (dataLocal.lines[key].color) {
             line.setColor(dataLocal.lines[key].color);
           }
           if (dataLocal.lines[key].value) {
             line.setValue(dataLocal.lines[key].value);
           }
+          if (dataLocal.lines[key].locationMode) {
+            line.setLocationMode(dataLocal.lines[key].locationMode);
+          }
           line.setDisplay(dataLocal.lines[key].display);
           if (line.getCategory() == VectorCategory.Line.BaseLine) {
             Settings.baseLineId = key;
@@ -104,18 +104,15 @@ export default class Load {
           text.setAngle(dataLocal.texts[key].angle || 0);
         }
       }
-      if (dataLocal.hasOwnProperty("currentId")) {
+      if (dataLocal.hasOwnProperty('currentId')) {
         dataService.setCurrentId(dataLocal.currentId);
       }
-      if (dataLocal.hasOwnProperty("res")) {
+      if (dataLocal.hasOwnProperty('res')) {
         coordinate.setRes(dataLocal.res);
       }
     } else if (data3d) {
       if (data3d.backImage) {
-        let bgImg = imageService.createBackgroundImg(
-          data3d.backImage,
-          data3d.vectorId
-        );
+        let bgImg = imageService.createBackgroundImg(data3d.backImage, data3d.vectorId);
         bgImg.setCenter(coordinate.center);
         try {
           if (bgImg.src) {
@@ -132,20 +129,13 @@ export default class Load {
         if (data3d.baseLines) {
           for (let i = 0; i < data3d.baseLines.length; ++i) {
             //理论上基准线只能有一条
-            let baseLine = lineService.create(
-              this.getXY(width, height, data3d.baseLines[i][0]),
-              this.getXY(width, height, data3d.baseLines[i][1]),
-              VectorCategory.Line.BaseLine
-            );
+            let baseLine = lineService.create(this.getXY(width, height, data3d.baseLines[i][0]), this.getXY(width, height, data3d.baseLines[i][1]), VectorCategory.Line.BaseLine);
             Settings.baseLineId = baseLine.vectorId;
-            const geometryBaseLine = mathUtil.createLine1(
-              dataService.getPoint(baseLine.startId),
-              dataService.getPoint(baseLine.endId)
-            );
+            const geometryBaseLine = mathUtil.createLine1(dataService.getPoint(baseLine.startId), dataService.getPoint(baseLine.endId));
             //文字要和基准线的方向一致
-            if (typeof geometryBaseLine.a != "undefined") {
+            if (typeof geometryBaseLine.a != 'undefined') {
               angle = Math.atan(geometryBaseLine.a);
-            } else if (geometryBaseLine.hasOwnProperty("x")) {
+            } else if (geometryBaseLine.hasOwnProperty('x')) {
               angle = Math.PI / 2;
             } else {
               angle = 0;
@@ -156,19 +146,13 @@ export default class Load {
           for (let i = 0; i < data3d.measures.length; ++i) {
             //理论上基准线只能有一条
             //
-            const line = lineService.create(
-              this.getXY(width, height, data3d.measures[i].pos[0]),
-              this.getXY(width, height, data3d.measures[i].pos[1]),
-              VectorCategory.Line.MeasureLine
-            );
+            const line = lineService.create(this.getXY(width, height, data3d.measures[i].pos[0]), this.getXY(width, height, data3d.measures[i].pos[1]), VectorCategory.Line.MeasureLine);
             line.value = data3d.measures[i].dis;
           }
         }
         if (data3d.basePoints) {
           for (let i = 0; i < data3d.basePoints.length; ++i) {
-            let point = pointService.create(
-              this.getXY(width, height, data3d.basePoints[i])
-            );
+            let point = pointService.create(this.getXY(width, height, data3d.basePoints[i]));
             point.setCategory(VectorCategory.Point.BasePoint);
           }
         }
@@ -178,18 +162,9 @@ export default class Load {
             //   this.getXY(width, height, data3d.fixPoints[i].pos)
             // );
             // point.setCategory(VectorCategory.Point.FixPoint);
-            console.log(
-              "001-fixPoints-" +
-                i +
-                ":" +
-                JSON.stringify(data3d.fixPoints[i].pos)
-            );
-            let text = textService.create(
-              this.getXY(width, height, data3d.fixPoints[i].pos)
-            );
-            console.log(
-              "002-fixPoints-" + i + ":" + JSON.stringify(text.center)
-            );
+            console.log('001-fixPoints-' + i + ':' + JSON.stringify(data3d.fixPoints[i].pos));
+            let text = textService.create(this.getXY(width, height, data3d.fixPoints[i].pos));
+            console.log('002-fixPoints-' + i + ':' + JSON.stringify(text.center));
             text.setValue(data3d.fixPoints[i].text);
             text.setAngle(angle);
           }
@@ -222,6 +197,6 @@ export default class Load {
   // 退出页面清除缓存及其他操作
   clear() {
     this.layer.uiControl.menu_clear();
-    console.warn("clear");
+    console.warn('clear');
   }
 }

+ 160 - 18
src/graphic/Renderer/Draw.js

@@ -8,6 +8,8 @@ import UIEvents from "@/graphic/enum/UIEvents.js";
 import VectorCategory from "@/graphic/enum/VectorCategory.js";
 import Settings from "@/graphic/Settings.js";
 import SVGIcons from "../CanvasStyle/ImageLabels/SVGIcons";
+import VectorStyle from "@/graphic/enum/VectorStyle.js";
+import VectorWeight from "@/graphic/enum/VectorWeight.js";
 
 const imgCache = {};
 const help = {
@@ -200,6 +202,139 @@ const help = {
     ctx.fillText(text, -textCenter.x, -textCenter.y);
     ctx.restore();
   },
+  isTriangleClockwise(p1, p2, p3) {
+    const crossProduct = (p2.x - p1.x) * (p3.y - p1.y) - (p3.x - p1.x) * (p2.y - p1.y);
+    return crossProduct < 0;
+  },
+  drawStyleLine(ctx, line, style = VectorStyle.SingleSolidLine, weight = VectorStyle.Thinning) {
+    ctx.save();
+    style = style || VectorStyle.SingleSolidLine
+    ctx.beginPath();
+    const lineWidth = Settings.lineWidth * (ctx.lineWidth || 1) * (weight === VectorWeight.Bold ? 2 : 1);
+
+    switch (style) {
+      case VectorStyle.PointDrawLine:
+      case VectorStyle.SingleDashedLine:
+      case VectorStyle.SingleSolidLine:
+        ctx.lineWidth = lineWidth
+        if (style === VectorStyle.SingleDashedLine) {
+          ctx.setLineDash([8 * coordinate.ratio, 8 * coordinate.ratio]);
+        } else if (style === VectorStyle.PointDrawLine) {
+          ctx.setLineDash([6 * coordinate.ratio, 6* coordinate.ratio, 2 * coordinate.ratio]);
+        }
+
+        ctx.moveTo(line[0].x, line[0].y);
+        ctx.lineTo(line[1].x, line[1].y);
+        break
+        // 单实线
+      case VectorStyle.DoubleDashedLine:
+      case VectorStyle.DoubleSolidLine:
+        if (style === VectorStyle.DoubleDashedLine) {
+          ctx.setLineDash([8 * coordinate.ratio, 8 * coordinate.ratio]);
+        }
+        ctx.lineWidth = lineWidth * 4
+        ctx.moveTo(line[0].x, line[0].y);
+        ctx.lineTo(line[1].x, line[1].y);
+        ctx.stroke();
+
+
+        ctx.moveTo(line[0].x, line[0].y);
+        ctx.lineTo(line[1].x, line[1].y);
+        ctx.lineWidth = lineWidth * 2
+        ctx.strokeStyle = 'rgb(255,255,255)'
+        break
+      case VectorStyle.BrokenLine:
+        const ldis = 5 * coordinate.ratio
+        if (mathUtil.getDistance(...line) < ldis * 2) {
+          ctx.moveTo(line[0].x, line[0].y);
+          ctx.lineTo(line[1].x, line[1].y);
+        } else {
+          const start = mathUtil.translate(line[0], line[1], line[0], ldis)
+          const end = mathUtil.translate(line[0], line[1], line[1], -ldis)
+          const lineDis = mathUtil.getDistance(start, end)
+          const len = Math.ceil(lineDis / (6 * coordinate.ratio))
+          const split = lineDis / len
+
+          const points = [start]
+          let temp = start
+          for (let i = 0; i < len ; i++) {
+            temp = mathUtil.translate(temp, line[1], temp, split)
+            points.push(temp)
+          }
+
+          ctx.moveTo(line[0].x, line[0].y);
+          ctx.lineTo(start.x, start.y);
+          for (let i = 0; i < points.length - 1; i++) {
+            const vTop = help.getPerpendicularPoint(
+              points[i],
+              points[i + 1],
+              mathUtil.lineCenter(points[i], points[i + 1]),
+              (split * ((i%2) ? -1 : 1)) / 2
+            )
+            ctx.lineTo(vTop.x, vTop.y);
+          }
+          ctx.lineTo(end.x, end.y);
+          ctx.lineTo(line[1].x, line[1].y);
+        }
+        ctx.lineWidth = lineWidth
+        break
+      case VectorStyle.Greenbelt:
+        const dis = 4 * coordinate.ratio
+        const size = 8 * coordinate.ratio
+        const p1 = help.getPerpendicularPoint(
+          line[0], line[1], line[0], dis
+        )
+        const p2 = help.getPerpendicularPoint(
+          line[0], line[1], line[1], dis
+        )
+        const p3 = help.getPerpendicularPoint(
+          p1, p2, p2, size
+        )
+        const p4 = help.getPerpendicularPoint(
+          p1, p2, p1, size
+        )
+
+        ctx.beginPath()
+        ctx.lineWidth = lineWidth
+        ctx.moveTo(line[0].x, line[0].y);
+        ctx.lineTo(line[1].x, line[1].y);
+        ctx.stroke();
+        ctx.beginPath()
+        ctx.moveTo(p4.x, p4.y);
+        ctx.lineTo(p1.x, p1.y);
+        ctx.lineTo(p2.x, p2.y);
+        ctx.lineTo(p3.x, p3.y);
+        ctx.stroke();
+
+
+        const rdis = 6 * coordinate.ratio
+        const lineDis = mathUtil.getDistance(p3, p4)
+        const len = Math.ceil(lineDis / rdis)
+        const split = lineDis / len
+        const points = [p3]
+        const geo = [p4, {...p4, x: 999}, p3]
+        let angle = (mathUtil.Angle1(...geo) / 180) * Math.PI
+        const isClock = help.isTriangleClockwise(...geo) || angle === 0
+
+        angle = isClock ? -angle : angle
+
+        let temp = p3
+        for (let i = 0; i < len; i++) {
+          temp = mathUtil.translate(temp, p4, temp, split)
+          points.push(temp)
+        }
+        for (let i = 0; i < points.length - 1; i++) {
+          const center = mathUtil.lineCenter(points[i], points[i+1])
+          ctx.beginPath()
+          ctx.arc(center.x, center.y, split / 2, angle, angle + Math.PI, !isClock)
+          ctx.stroke();
+        }
+        ctx.lineWidth = lineWidth
+        break
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
 };
 
 export default class Draw {
@@ -327,6 +462,7 @@ export default class Draw {
     ctx.save();
     ctx.beginPath();
     help.setVectorStyle(ctx, null, "Lane");
+    ctx.lineWidth *= Settings.lineWidth
     ctx.setLineDash(Style.Lane.dash);
     ctx.moveTo(start.x, start.y);
     ctx.lineTo(end.x, end.y);
@@ -346,6 +482,7 @@ export default class Draw {
       : dataService.getRoadPoint(vector.startId);
     const end = isTemp ? vector.end : dataService.getRoadPoint(vector.endId);
 
+
     const drawRoadEdgeChild = (edgeVector) => {
       const flag = mathUtil.isSameDirForVector(
         start,
@@ -355,12 +492,9 @@ export default class Draw {
       );
 
       if (flag) {
-        ctx.beginPath();
         const point1 = coordinate.getScreenXY(edgeVector.start);
         const point2 = coordinate.getScreenXY(edgeVector.end);
-        ctx.moveTo(point1.x, point1.y);
-        ctx.lineTo(point2.x, point2.y);
-        ctx.stroke();
+        help.drawStyleLine(ctx, [point1, point2], edgeVector.style, edgeVector.weight)
       }
       if (import.meta.env.DEV) {
         this.drawTextByInfo(
@@ -383,8 +517,13 @@ export default class Draw {
     ctx.save();
     isTemp && (ctx.globalAlpha = 0.3);
     help.setVectorStyle(ctx, leftEdge);
+    let [style, fo] = help.getVectorStyle(vector)
+    fo && help.setStyle(ctx, style)
     drawRoadEdgeChild(leftEdge);
+
     help.setVectorStyle(ctx, rightEdge);
+    fo && help.setStyle(ctx, style)
+
     drawRoadEdgeChild(rightEdge);
     ctx.restore();
 
@@ -452,14 +591,15 @@ export default class Draw {
       const ctx = this.context;
       ctx.save();
       help.setVectorStyle(ctx, vector);
+      ctx.lineWidth *= Settings.lineWidth
       for (let coves of covesArray) {
         help.drawCoves(ctx, coves);
       }
       ctx.restore();
     }
 
-    this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.rightEdgeId));
-    this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.leftEdgeId));
+    this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.rightEdgeId), vector);
+    this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.leftEdgeId), vector);
     vector.leftLanesCurves &&
       vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
     vector.rightLanesCurves &&
@@ -470,11 +610,14 @@ export default class Draw {
     // }
   }
 
-  drawCurveRoadEdge(vector, isTemp) {
+  drawCurveRoadEdge(vector, roadVector) {
     const [coves] = help.transformCoves([vector.curves]);
     const ctx = this.context;
+    const [style, select] = help.getVectorStyle(roadVector)
     ctx.save();
     help.setVectorStyle(ctx, vector);
+    select && help.setStyle(ctx, style)
+    ctx.lineWidth *= Settings.lineWidth
     help.drawCoves(ctx, coves);
     ctx.restore();
 
@@ -489,6 +632,7 @@ export default class Draw {
     ctx.save();
 
     help.setVectorStyle(ctx, null, "CurveLan");
+    ctx.lineWidth *= Settings.lineWidth
     ctx.setLineDash(Style.Lane.dash);
     help.drawCoves(ctx, coves);
     ctx.restore();
@@ -697,7 +841,7 @@ export default class Draw {
     if (Settings.selectBasePointId === vector.vectorId) {
       style = {
         ...style,
-        fillStyle: "red",
+        strokeStyle: "rgba(255,255,255,1)",
         out: style.out && {
           ...style.out,
           strokeStyle: "red",
@@ -712,14 +856,15 @@ export default class Draw {
     }
 
     if (vector.category === "BasePoint") {
+      ctx.font = `${22}px Microsoft YaHei`
       const bound = help.getTextCenter(ctx, "基准点")
       const textPt = {
-        y: pt.y - bound.height,
-        x: pt.x - (bound.width / 2)
+        y: vector.y + bound.height,
+        x: vector.x - (bound.width / 2)
       }
 
       ctx.fillStyle = style.fillStyle
-      this.drawTextByInfo(coordinate.getXYFromScreen(textPt), "基准点", 0, false);
+      this.drawTextByInfo(textPt, "基准点", 0, false);
     } else {
       if (import.meta.env.DEV) {
         if (vector.vectorId) {
@@ -800,12 +945,13 @@ export default class Draw {
       this.context.lineTo(points[1].x, points[1].y);
       this.context.lineTo(points[2].x, points[2].y);
       this.context.lineTo(points[3].x, points[3].y);
-      this.context.strokeStyle = "red"
+      this.context.strokeStyle = style.strokeStyle
+      this.context.lineWidth = 2 *  coordinate.ratio
       this.context.setLineDash([6 * coordinate.ratio, 2 * coordinate.ratio]);
       this.context.closePath();
       this.context.stroke();
       this.context.restore();
-      vector.points.forEach(point => this.drawPoint({...point, color: 'red', radius: 5 }))
+      vector.points.forEach(point => this.drawPoint({...point, color: style.strokeStyle, radius: 5 }))
     }
   }
 
@@ -900,11 +1046,7 @@ export default class Draw {
       this.context.setLineDash(style.dash);
     }
 
-    this.context.beginPath();
-    this.context.moveTo(start.x, start.y);
-    this.context.lineTo(end.x, end.y);
-    this.context.stroke();
-    this.context.restore();
+    help.drawStyleLine(this.context, [start, end], vector.style, vector.weight)
 
     const drawPoints = () => {
       // if (attr) {

+ 2 - 2
src/graphic/Service/CurveEdgeService.js

@@ -5,8 +5,8 @@ import { mathUtil } from "../Util/MathUtil.js";
 export default class CurveEdgeService {
   constructor() {}
 
-  create(start, end, vectorId, parentId) {
-    let curveEdge = new CurveRoadEdge(start, end, vectorId, parentId);
+  create(start, end, vectorId, parentId, points) {
+    let curveEdge = new CurveRoadEdge(start, end, vectorId, parentId, points);
     this.setCurves(curveEdge);
     dataService.addCurveRoadEdge(curveEdge);
     return curveEdge;

+ 9 - 0
src/graphic/Service/DataService.js

@@ -183,6 +183,15 @@ export class DataService {
     }
   }
 
+  deletePointParent(pointId, lineId) {
+    if (pointId && lineId) {
+      let point = this.getPoint(pointId);
+      if (point) {
+        delete point.parent[lineId];
+      }
+    }
+  }
+
   //圆圈
   getCircles() {
     return this.vectorData.circles;

+ 3 - 2
src/graphic/Service/UIService.js

@@ -7,6 +7,7 @@ import UIEvents from "../enum/UIEvents.js";
 import VectorCategory from "../enum/VectorCategory.js";
 import Constant from "../Constant.js";
 import VectorStyle from "../enum/VectorStyle.js";
+import VectorWeight from "../enum/VectorWeight.js";
 import RoadTemplate from "../enum/RoadTemplate.js";
 import RoadStructure from "../enum/RoadStructure.js";
 
@@ -122,9 +123,9 @@ export default class UIService {
       return true;
     } else if (ui == VectorStyle.Greenbelt) {
       return true;
-    } else if (ui == VectorStyle.Bold) {
+    } else if (ui == VectorWeight.Bold) {
       return true;
-    } else if (ui == VectorStyle.Thinning) {
+    } else if (ui == VectorWeight.Thinning) {
       return true;
     } else {
       return false;

+ 20 - 0
src/graphic/Util/MathUtil.js

@@ -348,6 +348,26 @@ export default class MathUtil {
       return ((2 * Math.PI - fi) * 180) / Math.PI;
     }
   }
+  Angle1(o, s, e) {
+    let cosfi = 0,
+      fi = 0,
+      norm = 0;
+    let dsx = s.x - o.x;
+    let dsy = s.y - o.y;
+    let dex = e.x - o.x;
+    let dey = e.y - o.y;
+
+    cosfi = dsx * dex + dsy * dey;
+    norm = (dsx * dsx + dsy * dsy) * (dex * dex + dey * dey);
+    cosfi /= Math.sqrt(norm);
+
+    if (cosfi >= 1.0) return 0;
+    //if (cosfi <= -1.0) return Math.PI;
+    if (cosfi <= -1.0) return 180;
+    fi = Math.acos(cosfi);
+
+    return (fi * 180) / Math.PI;
+  }
 
   getArrow(start, end, ange = 30, L = 20) {
     let a = Math.atan2(end.y - start.y, end.x - start.x);

+ 1 - 0
src/graphic/enum/VectorCategory.js

@@ -8,6 +8,7 @@ const VectorCategory = {
     GuideLine: "GuideLine",
     PositionLine: "PositionLine", //定位线。基准点与待测点相连的线,或者与待测基准点相连的线
     GuidePositionLine: "GuidePositionLine", //定位辅助线
+    ExtendedPositionLine: "ExtendedPositionLine", //定位延长线
   },
   Point: {
     BasePoint: "BasePoint", //基准点

+ 3 - 3
src/graphic/enum/VectorStyle.js

@@ -15,8 +15,8 @@ const VectorStyle = {
   // 绿化带
   Greenbelt: "Greenbelt",
   // 加粗
-  Bold: "Bold",
-  // 变细
-  Thinning: "Thinning",
+  // Bold: "Bold",
+  // // 变细
+  // Thinning: "Thinning",
 };
 export default VectorStyle;

+ 8 - 0
src/graphic/enum/VectorWeight.js

@@ -0,0 +1,8 @@
+import UIEvents from './UIEvents';
+const VectorWight = {
+  // 加粗
+  Bold: 'Bold',
+  // 变细
+  Thinning: 'Thinning',
+};
+export default VectorWight;

+ 0 - 1
src/hook/custom/setup.ts

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

+ 0 - 1
src/hook/useEdit.ts

@@ -129,7 +129,6 @@ export function useDesaveAssist<T extends object>(
     try {
       await setting.save(args)
     } catch (e) {
-      console.error('111', e)
       // recovery && recovery()
       throw e
     }

+ 0 - 1
src/hook/useGraphic.ts

@@ -21,7 +21,6 @@ const newsletter = ref<{
 
 const changeIndex = ref(0)
 export const changeStore = () => {
-  console.error("111")
   changeIndex.value++
 }
 export const useChange = (fn: () => void) => {

+ 1 - 1
src/sdk/laser/core/enter.js

@@ -794,7 +794,7 @@ var enter = ({
                     viewer.controls.setEnable(true)
                 }
 
-                let gotIntersect = (e)=>{
+                let gotIntersect = (e)=>{ 
                     if(e.intersect && e.intersect.location){
                         console.log('quit', e.intersect.location)
                         quit()

+ 20 - 11
src/views/graphic/geos/normalLine.vue

@@ -12,12 +12,12 @@ 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 VectorWeight from "@/graphic/enum/VectorWeight";
 import VectorCategory from "@/graphic/enum/VectorCategory";
 
 
 const props = defineProps<{ geo: FocusVector }>()
 const vector = computed(() => dataService.getLine(props.geo.vectorId))
-console.error(props.geo)
 
 const clickHandlerFactory = (key) => {
   return () => drawRef.value.uiControl.updateVectorForSelectUI(key)
@@ -58,8 +58,24 @@ const lineTypeMenu = [
   {key: VectorStyle.Greenbelt, icon: "treelawn", text: "绿化带 ", onClick: clickHandlerFactory(VectorStyle.Greenbelt)},
 ]
 const lineWidthMenu = [
-  {key: VectorStyle.Bold, icon: 'l_thick', text: "粗", onClick: clickHandlerFactory(VectorStyle.Bold)},
-  {key: VectorStyle.Thinning, icon: 'l_thin', text: "细", onClick: clickHandlerFactory(VectorStyle.Thinning)},
+  {
+    key: VectorWeight.Bold,
+    icon: 'l_thick',
+    text: "宽度",
+    onClick: () => {
+      clickHandlerFactory(VectorWeight.Bold)()
+      menus.value[1] = lineWidthMenu[1]
+    }
+  },
+  {
+    key: VectorWeight.Thinning,
+    icon: 'l_thin',
+    text: "宽度",
+    onClick: () => {
+      clickHandlerFactory(VectorWeight.Thinning)()
+      menus.value[1] = lineWidthMenu[0]
+    }
+  },
 ]
 
 const appendMenus = props.geo.category === VectorCategory.Line.NormalLine
@@ -88,14 +104,7 @@ const menus = ref([
       childMenus.value = toRaw(childMenus.value) === lineTypeMenu ? null : lineTypeMenu
     }
   },
-  {
-    key: UITypeExtend.width,
-    text: "宽度",
-    icon: 'l_thick',
-    onClick() {
-      childMenus.value = toRaw(childMenus.value) === lineWidthMenu ? null : lineWidthMenu
-    }
-  },
+  vector.value?.style === VectorWeight.Bold ? lineWidthMenu[0] : lineWidthMenu[1],
   ...appendMenus,
   {
     key: 'copy',

+ 9 - 7
src/views/graphic/geos/roadEdge.vue

@@ -12,11 +12,12 @@ 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 VectorWeight from "@/graphic/enum/VectorWeight";
 
 
 const props = defineProps<{ geo: FocusVector }>()
-const vector = computed(() => dataService.getLine(props.geo.vectorId))
-console.error(props.geo)
+const vector = computed(() => dataService.getRoadEdge(props.geo.vectorId))
+console.error(vector.value)
 
 const clickHandlerFactory = (key) => {
   return () => drawRef.value.uiControl.updateVectorForSelectUI(key)
@@ -57,21 +58,22 @@ const lineTypeMenu = [
   {key: VectorStyle.Greenbelt, icon: "treelawn", text: "绿化带 ", onClick: clickHandlerFactory(VectorStyle.Greenbelt)},
 ]
 const lineWidthMenu = [
+
   {
-    key: VectorStyle.Bold,
+    key: VectorWeight.Bold,
     icon: 'l_thick',
     text: "宽度",
     onClick: () => {
-      clickHandlerFactory(VectorStyle.Bold)()
+      clickHandlerFactory(VectorWeight.Bold)()
       menus.value[1] = lineWidthMenu[1]
     }
   },
   {
-    key: VectorStyle.Thinning,
+    key: VectorWeight.Thinning,
     icon: 'l_thin',
     text: "宽度",
     onClick: () => {
-      clickHandlerFactory(VectorStyle.Thinning)()
+      clickHandlerFactory(VectorWeight.Thinning)()
       menus.value[1] = lineWidthMenu[0]
     }
   },
@@ -103,7 +105,7 @@ const menus = ref([
       childMenus.value = toRaw(childMenus.value) === lineTypeMenu ? null : lineTypeMenu
     }
   },
-  lineWidthMenu[0],
+  vector.value?.style === VectorWeight.Bold ? lineWidthMenu[0] : lineWidthMenu[1],
   ...appendMenus
 ])
 

+ 5 - 2
src/views/graphic/imageLabel.vue

@@ -13,7 +13,7 @@
     <div v-for="typeMenu in typeMenus" :key="typeMenu.title" class="type-menu">
       <h2 @click="showTypeMenu = typeMenu">
         {{typeMenu.title}}
-        <ui-icon :type="showTypeMenu.title === typeMenu.title ? 'del' : 'copy'" />
+        <ui-icon :type="showTypeMenu.title === typeMenu.title ? 'fold' : 'unfold'" />
       </h2>
       <div class="menu-list" v-show="showTypeMenu.title === typeMenu.title">
         <div
@@ -48,11 +48,14 @@ const typeMenusRaw = typeKeys.map(({type, children}) => ({
   }))
 }))
 const keyword = ref("")
+console.log(typeMenusRaw)
 const typeMenus = computed(() => typeMenusRaw
   .map(
     (typeMenu) => ({
       ...typeMenu,
-      children: typeMenu.children.filter(item => item.text.includes(keyword.value))
+      children: typeMenu.children
+        .filter(item => item.text.includes(keyword.value))
+        .sort((a, b) => a.icon.localeCompare(b.icon))
     })
   )
   .filter(typeMenu => typeMenu.children.length > 0)

+ 148 - 156
src/views/graphic/menus.ts

@@ -1,126 +1,133 @@
-import {uiType, UIType, graphicState} from "@/hook/useGraphic";
-import {
-  findMenuByAttr,
-  generateByMenus as generateByMenusRaw,
-  generateMixMenus as generateMixMenusRaw
-} from '@/utils/menus'
-import Message from "@/components/base/components/message/message.vue";
-import RoadStructure from '@/graphic/enum/RoadStructure'
-import RoadTemplate from '@/graphic/enum/RoadTemplate'
-import {computed} from "vue";
-import { mount } from '@/components/base/utils/componentHelper'
-import Setting from "@/views/graphic/setting.vue";
+import { uiType, UIType, graphicState } from '@/hook/useGraphic';
+import { findMenuByAttr, generateByMenus as generateByMenusRaw, generateMixMenus as generateMixMenusRaw } from '@/utils/menus';
+import Message from '@/components/base/components/message/message.vue';
+import RoadStructure from '@/graphic/enum/RoadStructure';
+import RoadTemplate from '@/graphic/enum/RoadTemplate';
+import { computed } from 'vue';
+import { mount } from '@/components/base/utils/componentHelper';
+import Setting from '@/views/graphic/setting.vue';
 
 export enum Mode {
   Road,
-  Photo
+  Photo,
 }
 
 export const UITypeExtend = {
-  structure: "structure",
-  template: "template",
-  measure: "measure",
-  road: "__road",
-  image: "__image",
-  line: "__line",
-  photo: "photo",
-  setup: "setup",
-  lineType: "lineType",
-  width: "width",
-  lock: "lock",
-  basemap: "Basemap"
-}
+  structure: 'structure',
+  template: 'template',
+  measure: 'measure',
+  road: '__road',
+  image: '__image',
+  line: '__line',
+  photo: 'photo',
+  setup: 'setup',
+  lineType: 'lineType',
+  width: 'width',
+  lock: 'lock',
+  basemap: 'Basemap',
+};
 
 export type MenuRaw = {
-  key: string,
-  text: string,
-  onClick?: (data: MenuRaw) => void,
-  icon?: string,
-  children?: MenusRaw
-  extend?: MenusRaw
-}
-export type MenusRaw = Array<MenuRaw>
-
+  key: string;
+  text: string;
+  onClick?: (data: MenuRaw) => void;
+  icon?: string;
+  children?: MenusRaw;
+  extend?: MenusRaw;
+};
+export type MenusRaw = Array<MenuRaw>;
 
 export const structureMenusRaw = [
-  { key: RoadStructure.BranchRoad, icon: "jg_zl-1", text: "支路" },
-  { key: RoadStructure.NarrowRoad, icon: "jg_zl", text: "窄路" },
-  { key: RoadStructure.ShoulderRoad, icon: "jg_lj", text: "路肩" },
-  { key: RoadStructure.ZebraCrossing, icon: "jg_bmx", text: "斑马线" },
-  { key: RoadStructure.Bridge, icon: "jg_q", text: "桥" },
-  { key: RoadStructure.Tunnel, icon: "jg_sd", text: "隧道" },
-  { key: RoadStructure.Sidewalk, icon: "jg_rxd", text: "人行道" },
-  { key: RoadStructure.ConstructionSection, icon: "jg_sgld", text: "施工路段" },
-  { key: RoadStructure.Downhill, icon: "jg_road_u", text: "下坡" },
-  { key: RoadStructure.Uphill, icon: "jg_sp", text: "上坡" },
-  { key: RoadStructure.RoadsideGutter, icon: "jg_lpsg", text: "路边水沟" },
-  { key: RoadStructure.RoadsAndRails, icon: "jg_dltlpjk", text: "道路与铁..." },
-  { key: RoadStructure.FireHydrantWell, icon: "jg_xfsj", text: "消火栓井" },
-  { key: RoadStructure.Gullies, icon: "jg_ysk", text: "雨水口" },
-  { key: RoadStructure.RoadPotholes, icon: "jg_lmak", text: "路面凹坑" },
-  { key: RoadStructure.ProtrudingRoad, icon: "jg_lmtcbf", text: "路面凸出..." },
-  { key: RoadStructure.WaterOnTheRoad, icon: "jg_lmjs", text: "路面积水" },
-]
+  { key: RoadStructure.BranchRoad, icon: 'jg_zl-1', text: '支路' },
+  { key: RoadStructure.NarrowRoad, icon: 'jg_zl', text: '窄路' },
+  { key: RoadStructure.ShoulderRoad, icon: 'jg_lj', text: '路肩' },
+  { key: RoadStructure.ZebraCrossing, icon: 'jg_bmx', text: '斑马线' },
+  { key: RoadStructure.Bridge, icon: 'jg_q', text: '桥' },
+  { key: RoadStructure.Tunnel, icon: 'jg_sd', text: '隧道' },
+  { key: RoadStructure.Sidewalk, icon: 'jg_rxd', text: '人行道' },
+  { key: RoadStructure.ConstructionSection, icon: 'jg_sgld', text: '施工路段' },
+  { key: RoadStructure.Downhill, icon: 'jg_road_u', text: '下坡' },
+  { key: RoadStructure.Uphill, icon: 'jg_sp', text: '上坡' },
+  { key: RoadStructure.RoadsideGutter, icon: 'jg_lpsg', text: '路边水沟' },
+  { key: RoadStructure.RoadsAndRails, icon: 'jg_dltlpjk', text: '道路与铁...' },
+  { key: RoadStructure.FireHydrantWell, icon: 'jg_xfsj', text: '消火栓井' },
+  { key: RoadStructure.Gullies, icon: 'jg_ysk', text: '雨水口' },
+  { key: RoadStructure.RoadPotholes, icon: 'jg_lmak', text: '路面凹坑' },
+  { key: RoadStructure.ProtrudingRoad, icon: 'jg_lmtcbf', text: '路面凸出...' },
+  { key: RoadStructure.WaterOnTheRoad, icon: 'jg_lmjs', text: '路面积水' },
+];
 
 export const templateMenusRaw = [
-  { key: RoadTemplate.SBend, icon: "mb_sxwl", text: "s型弯路" },
-  { key: RoadTemplate.TJunction, icon: "mb_dzlk", text: "丁字路口" },
-  { key: RoadTemplate.FiveForks, icon: "mb_wclk", text: "五岔路口" },
-  { key: RoadTemplate.ExitRamp, icon: "mb_ckzd", text: "出口匝道" },
-  { key: RoadTemplate.Crossroads, icon: "mb_szlk", text: "十字路口" },
-  { key: RoadTemplate.NationalHighwayShoulder, icon: "mb_gdlj", text: "国道(路肩)" },
-  { key: RoadTemplate.IndoorSection, icon: "mb_snld", text: "室内路段" },
-  { key: RoadTemplate.Bend, icon: "mb_wd", text: "弯道" },
-  { key: RoadTemplate.SharpCurve, icon: "mb_jzwd", text: "急转弯道" },
-  { key: RoadTemplate.SixForkIntersection, icon: "mb_lclk", text: "六岔路口" },
-  { key: RoadTemplate.WideNarrowRoad, icon: "mb_kbzld", text: "宽变窄路段" },
-  { key: RoadTemplate.Corner, icon: "mb_zjwd", text: "直角弯道" },
-  { key: RoadTemplate.ImportSmashedRoad, icon: "mb_jkzd", text: "进口匝道" },
-  { key: RoadTemplate.HighSpeedTollBooth, icon: "mb_gssfz", text: "高速收费站" },
-  { key: RoadTemplate.HighSpeedHarbor, icon: "mb_gsgw", text: "高速港湾" },
-  { key: RoadTemplate.HighwaySection, icon: "mb_gsld", text: "高速路段" }
-]
+  { key: RoadTemplate.SBend, icon: 'mb_sxwl', text: 's型弯路' },
+  { key: RoadTemplate.TJunction, icon: 'mb_dzlk', text: '丁字路口' },
+  { key: RoadTemplate.FiveForks, icon: 'mb_wclk', text: '五岔路口' },
+  { key: RoadTemplate.ExitRamp, icon: 'mb_ckzd', text: '出口匝道' },
+  { key: RoadTemplate.Crossroads, icon: 'mb_szlk', text: '十字路口' },
+  { key: RoadTemplate.NationalHighwayShoulder, icon: 'mb_gdlj', text: '国道(路肩)' },
+  { key: RoadTemplate.IndoorSection, icon: 'mb_snld', text: '室内路段' },
+  { key: RoadTemplate.Bend, icon: 'mb_wd', text: '弯道' },
+  { key: RoadTemplate.SharpCurve, icon: 'mb_jzwd', text: '急转弯道' },
+  { key: RoadTemplate.SixForkIntersection, icon: 'mb_lclk', text: '六岔路口' },
+  { key: RoadTemplate.WideNarrowRoad, icon: 'mb_kbzld', text: '宽变窄路段' },
+  { key: RoadTemplate.Corner, icon: 'mb_zjwd', text: '直角弯道' },
+  { key: RoadTemplate.ImportSmashedRoad, icon: 'mb_jkzd', text: '进口匝道' },
+  { key: RoadTemplate.HighSpeedTollBooth, icon: 'mb_gssfz', text: '高速收费站' },
+  { key: RoadTemplate.HighSpeedHarbor, icon: 'mb_gsgw', text: '高速港湾' },
+  { key: RoadTemplate.HighwaySection, icon: 'mb_gsld', text: '高速路段' },
+];
 
 export const measureMenusRaw = [
   {
     key: UIType.BaseLine,
-    icon: "line",
-    text: "基准线",
-    disabled: computed(() => graphicState.value.existsBaseLine)
+    icon: 'line',
+    text: '基准线',
+    disabled: computed(() => graphicState.value.existsBaseLine),
+  },
+  { key: UIType.BasePoint, text: '基准点', icon: 'point' },
+  {
+    key: UIType.NormalLocationMode,
+    text: '自由测量',
+    icon: 'measure_f',
+    onClick(data) {
+      if (graphicState.value.canAllLocationMode) {
+        uiType.change(data.key);
+      } else {
+        Message.success({ msg: '请添加基准线及基准点后再执行此操作', time: 3000 });
+      }
+    },
   },
-  { key: UIType.BasePoint, text: "基准点", icon: "point", },
-  { key: UIType.NormalLocationMode, text: "自由测量", icon: "measure_f" },
   {
     key: UIType.AngleLocationMode,
-    text: "直角定位法",
-    icon: "measure_r",
+    text: '直角定位法',
+    icon: 'measure_r',
     onClick(data) {
+      console.error(graphicState.value.canAllLocationMode);
       if (graphicState.value.canAllLocationMode) {
-        uiType.change(data.key)
+        uiType.change(data.key);
       } else {
-        Message.success({ msg: "请添加基准线及基准点后再执行此操作", time: 3000 })
+        Message.success({ msg: '请添加基准线及基准点后再执行此操作', time: 3000 });
       }
-    }
+    },
   },
   {
     key: UIType.AllLocationMode,
-    text: "综合定位法",
-    icon: "measure_c",
+    text: '综合定位法',
+    icon: 'measure_c',
     onClick(data) {
       if (graphicState.value.canAllLocationMode) {
-        uiType.change(data.key)
+        uiType.change(data.key);
       } else {
-        Message.success({ msg: "请添加基准线及基准点后再执行此操作", time: 3000 })
+        Message.success({ msg: '请添加基准线及基准点后再执行此操作', time: 3000 });
       }
-    }
+    },
   },
-]
+];
 
 export const mainMenusRaw: MenusRaw = [
   {
     key: UIType.Line,
-    text: "画线",
-    icon: "line_d",
+    text: '画线',
+    icon: 'line_d',
     // children: [
     //   {
     //     key: UIType.Line,
@@ -136,100 +143,85 @@ export const mainMenusRaw: MenusRaw = [
   },
   {
     key: UITypeExtend.road,
-    text: "道路",
-    icon: "road",
+    text: '道路',
+    icon: 'road',
     children: [
-      { key: UIType.OneEdgeOneLanRoad, icon: "road_ss", text: "" },
-      { key: UIType.OneEdgeTwoLanRoad, icon: "road_sd", 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.CurveRoad, icon: "road_wl", text: "" },
-      { key: UITypeExtend.structure, icon: "r_template", text: "道路结构", extend: structureMenusRaw },
-      { key: UITypeExtend.template, icon: "r_structure", text: "道路模板", extend: templateMenusRaw },
-    ]
-  }, {
+      { key: UIType.OneEdgeOneLanRoad, icon: 'road_ss', text: '' },
+      { key: UIType.OneEdgeTwoLanRoad, icon: 'road_sd', 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.CurveRoad, icon: 'road_wl', text: '' },
+      { key: UITypeExtend.structure, icon: 'r_template', text: '道路结构', extend: structureMenusRaw },
+      { key: UITypeExtend.template, icon: 'r_structure', text: '道路模板', extend: templateMenusRaw },
+    ],
+  },
+  {
     key: UITypeExtend.image,
-    text: "图例",
-    icon: "road",
+    text: '图例',
+    icon: 'road',
     // children: [
     //   { key: UIType.BusPlane, text: "客车平面图" }
     // ]
   },
   {
     key: UITypeExtend.measure,
-    text: "测量",
+    text: '测量',
     children: measureMenusRaw,
-    icon: "measure"
+    icon: 'measure',
   },
-  { key: UIType.Text, text: "文字", icon: "text" },
-  { key: UIType.Magnifier, text: "放大镜", icon: "magnify_g" },
+  { key: UIType.Text, text: '文字', icon: 'text' },
+  { key: UIType.Magnifier, text: '放大镜', icon: 'magnify_g' },
 
   // { key: UITypeExtend.photo, text: "照片库" },
   {
     key: UITypeExtend.setup,
-    icon: "setting",
-    text: "设置",
+    icon: 'setting',
+    text: '设置',
     onClick() {
-      const { destroy } = mount(
-        Setting,
-        {
-          props: {
-            close() {
-              destroy();
-            }
-          }
-        } as any
-      )
-    }
+      const { destroy } = mount(Setting, {
+        props: {
+          close() {
+            destroy();
+          },
+        },
+      } as any);
+    },
   },
 ];
 
 export const photoMenusRaw: MenusRaw = [
-  { key: UIType.Text, text: "文字", icon: "text" },
-  { key: UIType.Circle, text: "圈出", icon: "circle" },
-  { key: UIType.SingleArrow, text: "箭头", icon: "arrows" },
-  { key: UIType.Magnifier, text: "放大镜", icon: "magnify_g" },
-]
-
+  { key: UIType.Text, text: '文字', icon: 'text' },
+  { key: UIType.Circle, text: '圈出', icon: 'circle' },
+  { key: UIType.SingleArrow, text: '箭头', icon: 'arrows' },
+  { key: UIType.Magnifier, text: '放大镜', icon: 'magnify_g' },
+];
 
 export const headActionMenuRaw = [
-  { key: UIType.GoBack, text: "回退", icon: "backout" },
-  { key: UIType.GoAhead, text: "前进", icon: "redo" },
-  { key: UIType.Clear, text: "清除", icon: "reset" },
-  { key: UIType.BackImageChange, text: "底图开关", icon: "map" },
-]
-
-export const focusMenuRaw : { [key in string]: MenusRaw } = {
-}
+  { key: UIType.GoBack, text: '回退', icon: 'backout' },
+  { key: UIType.GoAhead, text: '前进', icon: 'redo' },
+  { key: UIType.Clear, text: '清除', icon: 'reset' },
+  { key: UIType.BackImageChange, text: '底图开关', icon: 'map' },
+];
 
+export const focusMenuRaw: { [key in string]: MenusRaw } = {};
 
-export const generateByMenus = <T extends MenuRaw>(
-  generateFn: (men: MenuRaw) => T,
-  mainMenus: MenusRaw = mainMenusRaw
-) => generateByMenusRaw(generateFn, mainMenus);
+export const generateByMenus = <T extends MenuRaw>(generateFn: (men: MenuRaw) => T, mainMenus: MenusRaw = mainMenusRaw) => generateByMenusRaw(generateFn, mainMenus);
 
-export const findMainMenuByAttr = (
-  value: MenusRaw,
-  attr = "extend" as const,
-  mainMenus = mainMenusRaw,
-) => findMenuByAttr(value, attr, mainMenus)
+export const findMainMenuByAttr = (value: MenusRaw, attr = 'extend' as const, mainMenus = mainMenusRaw) => findMenuByAttr(value, attr, mainMenus);
 
-export const generateMixMenus = <T extends {}, K extends keyof MenuRaw>(
-  childKey: K,
-  generateFn: (men: MenuRaw) => T,
-  mainMenus: MenusRaw = mainMenusRaw
-) => generateMixMenusRaw(
-  childKey,
-  generateFn,
-  mainMenus,
-    menu => {
+export const generateMixMenus = <T extends {}, K extends keyof MenuRaw>(childKey: K, generateFn: (men: MenuRaw) => T, mainMenus: MenusRaw = mainMenusRaw) =>
+  generateMixMenusRaw(
+    childKey,
+    generateFn,
+    mainMenus,
+    (menu) => {
       if (menu.onClick) {
-        menu.onClick(menu)
+        menu.onClick(menu);
       } else {
-        uiType.change(menu.key as any)
+        uiType.change(menu.key as any);
       }
     },
-  () => uiType.current
-);
+    () => uiType.current
+  );

+ 24 - 0
src/views/scene/menus/pane.vue

@@ -2,6 +2,7 @@
   <ActionMenus
       v-if="!store.child.value"
       class="menus"
+      :class="{level: level === 2}"
       :menus="store.menus as any"
       :active-key="store.activeMenuKey.value"
       dire="column"
@@ -96,3 +97,26 @@ onMounted(() => {
   z-index: 2;
 }
 </style>
+
+<style>
+.level div:first-child {
+  background-color: rgba(255, 255, 255, .3);
+  height: 50px;
+  width: 50px;
+  min-width: 50px;
+  margin-top: -26px;
+  border-radius: 50%;
+  margin-bottom: 30px !important;
+  position: relative;
+
+  &:after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 1px;
+    bottom: -15px;
+    background-color: rgba(255, 255, 255, .3);
+
+  }
+}
+</style>

+ 2 - 2
src/views/sys/menu/item/style.scss

@@ -10,8 +10,8 @@
 }
 
 .child-menu-item {
-  height: 80px;
-  width: 80px;
+  height: 84px;
+  width: 84px;
   font-size: 12px;
 }