diff --git a/frontend/front/src/views/pages/regionalManage/components/regionManage.vue b/frontend/front/src/views/pages/regionalManage/components/regionManage.vue index 3e9152b..cd2842b 100644 --- a/frontend/front/src/views/pages/regionalManage/components/regionManage.vue +++ b/frontend/front/src/views/pages/regionalManage/components/regionManage.vue @@ -32,7 +32,7 @@ - 绘制多边形 + 绘制多边形 绘制矩形 绘制圆形 结束编辑 @@ -182,6 +182,9 @@ export default { dialogType:'', regionalType:'', regionalName:'', + rectangleNothPoint:[], + rectangleSouthPoint:[], + polygonPoint:[],//多边形坐标点 centerOfCircle:[],//圆形中心点坐标 }, polygon: null, @@ -225,8 +228,17 @@ export default { this.dialogParams.fShape = fShape; console.log('打印fBoundary',JSON.parse(fBoundary)); this.dialogParams.centerOfCircle = centerOfCircle?centerOfCircle.split(','):[]; - if(this.dialogParams.fShape == '圆形'){ - + let pointfBoundary = JSON.parse(fBoundary).coordinates; + if(this.dialogParams.fShape == '矩形'){ + this.dialogParams.rectangleNothPoint =pointfBoundary[0][0]; + this.dialogParams.rectangleSouthPoint = pointfBoundary[0][2]; + // console.log('打印this.dialogParams.rectangleNothPoint ',this.dialogParams.rectangleNothPoint ,this.dialogParams.rectangleSouthPoint ) + }else if(this.dialogParams.fShape == '多边形'){ + console.log('pointfBoundary',pointfBoundary[0]) + let array = pointfBoundary.pop(); + console.log('打印array',array); + this.dialogParams.polygonPoint = array; + console.log('打印this.this.dialogParams.polygonPoint ',this.dialogParams.polygonPoint ); } }) @@ -392,8 +404,8 @@ export default { }); this.mapEditor = new AMap.CircleEditor(this.map, editShap); }else if(this.dialogParams.fShape == '矩形'){ - var southWest = new AMap.LngLat(116.356449, 39.859008) - var northEast = new AMap.LngLat(116.417901, 39.893797) + var southWest = new AMap.LngLat(this.dialogParams.rectangleSouthPoint[0], this.dialogParams.rectangleSouthPoint[1]) + var northEast = new AMap.LngLat(this.dialogParams.rectangleNothPoint[0], this.dialogParams.rectangleNothPoint[1]) var bounds = new AMap.Bounds(southWest, northEast) editShap = new AMap.Rectangle({ bounds: bounds, @@ -410,6 +422,17 @@ export default { zIndex:50, }); this.mapEditor = new AMap.RectangleEditor(this.map, editShap); + }else { + editShap = new AMap.Polygon({ + path: this.dialogParams.polygonPoint, + strokeColor: "#FF33FF", + strokeWeight: 6, + strokeOpacity: 0.2, + fillOpacity: 0.4, + fillColor: '#1791fc', + zIndex: 50, + }); + this.mapEditor = new AMap.PolyEditor(this.map, editShap); } editShap.setMap(this.map); // 缩放地图到合适的视野级别 @@ -470,135 +493,6 @@ export default { } } }, - //绘制多边形 - drawPolygon () { - if(this.overlays.length>0){ - this.map.remove(this.overlays); - this.map.clearMap(); - //关闭绘画 - this.mouseTool.close(true); - this.overlays = []; - return - } - this.mouseTool.polygon({ - fillColor:'#00b0ff', - strokeColor:'#80d8ff', - // strokeOpacity: 1, - strokeWeight: 6, - strokeOpacity: 0.2, - fillOpacity: 0.4, - // 线样式还支持 'dashed' - strokeStyle: "solid", - // strokeStyle是dashed时有效 - // strokeDasharray: [30,10], - }); - let that = this; - this.mouseTool.on('draw', function(event) { - if(that.overlays.length>1){ - console.log('打印this.overlays',that.overlays,that.mouseTool); - that.map.remove(that.overlays); - //关闭绘画 - // that.mouseTool.close(true); - that.overlays = []; - } - let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组 - that.overlays.push(event.obj); - console.log('打印geoJson',geoJSON,that.overlays); - // // 为矢量图形设置唯一标识和zIndex - // console.log('覆盖物对象绘制完成',event.obj); - // event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() }); - // event.obj.setOptions({ zIndex: 100 }); - - // 其他矢量图形处理逻辑... - // event.obj 为绘制出来的覆盖物对象 - }); - }, - //绘制圆形 - drawCircle () { - if(this.overlays.length>0){ - this.map.remove(this.overlays); - //清除原来的电子围栏 - this.map.clearMap(); - //关闭绘画 - this.mouseTool.close(true); - this.overlays = []; - return - } - console.log('打印this.overlays====>圆形',this.overlays) - this.mouseTool.circle({ - // strokeOpacity: 1, - strokeWeight: 6, - strokeOpacity: 0.2, - fillColor:'#00b0ff', - strokeColor:'#80d8ff', - fillOpacity: 0.4, - strokeStyle: 'solid', - // 线样式还支持 'dashed' - // strokeDasharray: [30,10], - }) - let that = this; - this.mouseTool.on('draw', function(event) { - if(that.overlays.length>0){ - // console.log('打印this.overlays',that.overlays,that.mouseTool); - that.map.remove(that.overlays); - //关闭绘画 - that.mouseTool.close(true); - that.overlays = []; - return - } - let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组 - that.overlays.push(event.obj); - // // 为矢量图形设置唯一标识和zIndex - // event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() }); - // event.obj.setOptions({ zIndex: 100 }); - - // 其他矢量图形处理逻辑... - // event.obj 为绘制出来的覆盖物对象 - console.log('覆盖物对象开始绘制====》圆形',event.obj,that.overlays); - }); - }, - //绘制矩形 - drawRectangle () { - if(this.overlays.length>0){ - this.map.remove(this.overlays); - //关闭绘画 - this.mouseTool.close(true); - //清除原来的电子围栏 - this.map.clearMap(); - this.overlays = []; - return - } - console.log('打印矩形=====》',this.overlays,this.mouseTool); - this.mouseTool.rectangle({ - strokeOpacity:0.5, - strokeWeight: 6, - fillColor:'#00b0ff', - strokeColor:'#80d8ff', - fillOpacity:0.5, - // strokeStyle还支持 solid - strokeStyle: 'solid', - // strokeDasharray: [30,10], - }) - let that = this; - this.mouseTool.on('draw', function(event) { - if(that.overlays.length>0){ - console.log('打印this.overlays',that.overlays,that.mouseTool); - that.map.remove(that.overlays); - //关闭绘画 - that.mouseTool.close(true); - that.overlays = []; - return - } - let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组 - that.overlays.push(event.obj); - // 为矢量图形设置唯一标识和zIndex - // event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() }); - // event.obj.setOptions({ zIndex: 100 }); - // 其他矢量图形处理逻辑... - // event.obj 为绘制出来的覆盖物对象 - console.log('覆盖物对象绘制完成=====>矩形',event,that.overlays) - }); - }, //提交事件 async handleSubmit(formName){ this.$refs[formName].validate(async (valid) => { @@ -620,7 +514,7 @@ export default { let params= { id:this.dialogParams.id, fName: this.dialogParams.regionalName, - fSsczid: this.rowData.fSsczid, + fSsczid: this.dialogParams.fSsczid, fRegionalType: this.dialogParams.regionalType, fShape: this.dialogParams.fShape, fRemark:this.dialogParams.fRemark, @@ -668,10 +562,21 @@ export default { this.dialogParams.dialogType= type; switch (type){ case 'add': + this.dialogParams.fSsczid = this.rowData.fSsczid; this.dialogParams.id =''; + this.dialogParams.radius = ''; + this.dialogParams.fShape = ''; + this.dialogParams.fRemark = ''; + this.dialogParams.regionalType =''; + this.dialogParams.regionalName =''; + this.dialogParams.rectangleNothPoint =[]; + this.dialogParams.rectangleSouthPoint=[]; + this.dialogParams.polygonPoint = [];//多边形坐标点 + this.dialogParams.centerOfCircle = [];//圆形中心点坐标 this.dialogParams.title='新增区域'; break; case 'edit': + this.dialogParams.fSsczid = row.f_ssczid; this.dialogParams.id = row.id_; this.dialogParams.title='编辑区域'; this.getRegionDetailInfoData(row.id_); -- libgit2 0.21.2