Commit cb76080e605f18b94a6158dc650a16cdb794d20d
1 parent
71f388df
Exists in
dev
fix:优化高德地图的区域划分的功能
Showing
1 changed file
with
41 additions
and
136 deletions
Show diff stats
frontend/front/src/views/pages/regionalManage/components/regionManage.vue
| @@ -32,7 +32,7 @@ | @@ -32,7 +32,7 @@ | ||
| 32 | </el-col> | 32 | </el-col> |
| 33 | <el-col :span="24"> | 33 | <el-col :span="24"> |
| 34 | <el-table | 34 | <el-table |
| 35 | - style="width: 100%" | 35 | + style="width: 99%" |
| 36 | :data="tableData"> | 36 | :data="tableData"> |
| 37 | <el-table-column | 37 | <el-table-column |
| 38 | type="index" | 38 | type="index" |
| @@ -110,7 +110,7 @@ | @@ -110,7 +110,7 @@ | ||
| 110 | </el-input> | 110 | </el-input> |
| 111 | </el-form-item> | 111 | </el-form-item> |
| 112 | <el-form-item> | 112 | <el-form-item> |
| 113 | - <el-button :class="[dialogParams.fShape == '三角形'?'clickBtn':'','btn']" @click="draw('polygon','三角形')" style="margin-bottom: 5px">绘制多边形</el-button> | 113 | + <el-button :class="[dialogParams.fShape == '多边形'?'clickBtn':'','btn']" @click="draw('polygon','多边形')" style="margin-bottom: 5px">绘制多边形</el-button> |
| 114 | <el-button :class="[dialogParams.fShape == '矩形'?'clickBtn':'','btn']" @click="draw('rectangle','矩形')" style="margin-bottom: 5px">绘制矩形</el-button> | 114 | <el-button :class="[dialogParams.fShape == '矩形'?'clickBtn':'','btn']" @click="draw('rectangle','矩形')" style="margin-bottom: 5px">绘制矩形</el-button> |
| 115 | <el-button :class="[dialogParams.fShape == '圆形'?'clickBtn':'','btn']" @click="draw('circle','圆形')" style="margin-bottom: 5px">绘制圆形</el-button> | 115 | <el-button :class="[dialogParams.fShape == '圆形'?'clickBtn':'','btn']" @click="draw('circle','圆形')" style="margin-bottom: 5px">绘制圆形</el-button> |
| 116 | <el-button @click="closeDraw" v-if="dialogParams.dialogType == 'edit'" style="margin-bottom: 5px">结束编辑</el-button> | 116 | <el-button @click="closeDraw" v-if="dialogParams.dialogType == 'edit'" style="margin-bottom: 5px">结束编辑</el-button> |
| @@ -182,6 +182,9 @@ export default { | @@ -182,6 +182,9 @@ export default { | ||
| 182 | dialogType:'', | 182 | dialogType:'', |
| 183 | regionalType:'', | 183 | regionalType:'', |
| 184 | regionalName:'', | 184 | regionalName:'', |
| 185 | + rectangleNothPoint:[], | ||
| 186 | + rectangleSouthPoint:[], | ||
| 187 | + polygonPoint:[],//多边形坐标点 | ||
| 185 | centerOfCircle:[],//圆形中心点坐标 | 188 | centerOfCircle:[],//圆形中心点坐标 |
| 186 | }, | 189 | }, |
| 187 | polygon: null, | 190 | polygon: null, |
| @@ -225,8 +228,17 @@ export default { | @@ -225,8 +228,17 @@ export default { | ||
| 225 | this.dialogParams.fShape = fShape; | 228 | this.dialogParams.fShape = fShape; |
| 226 | console.log('打印fBoundary',JSON.parse(fBoundary)); | 229 | console.log('打印fBoundary',JSON.parse(fBoundary)); |
| 227 | this.dialogParams.centerOfCircle = centerOfCircle?centerOfCircle.split(','):[]; | 230 | this.dialogParams.centerOfCircle = centerOfCircle?centerOfCircle.split(','):[]; |
| 228 | - if(this.dialogParams.fShape == '圆形'){ | ||
| 229 | - | 231 | + let pointfBoundary = JSON.parse(fBoundary).coordinates; |
| 232 | + if(this.dialogParams.fShape == '矩形'){ | ||
| 233 | + this.dialogParams.rectangleNothPoint =pointfBoundary[0][0]; | ||
| 234 | + this.dialogParams.rectangleSouthPoint = pointfBoundary[0][2]; | ||
| 235 | + // console.log('打印this.dialogParams.rectangleNothPoint ',this.dialogParams.rectangleNothPoint ,this.dialogParams.rectangleSouthPoint ) | ||
| 236 | + }else if(this.dialogParams.fShape == '多边形'){ | ||
| 237 | + console.log('pointfBoundary',pointfBoundary[0]) | ||
| 238 | + let array = pointfBoundary.pop(); | ||
| 239 | + console.log('打印array',array); | ||
| 240 | + this.dialogParams.polygonPoint = array; | ||
| 241 | + console.log('打印this.this.dialogParams.polygonPoint ',this.dialogParams.polygonPoint ); | ||
| 230 | } | 242 | } |
| 231 | 243 | ||
| 232 | }) | 244 | }) |
| @@ -392,8 +404,8 @@ export default { | @@ -392,8 +404,8 @@ export default { | ||
| 392 | }); | 404 | }); |
| 393 | this.mapEditor = new AMap.CircleEditor(this.map, editShap); | 405 | this.mapEditor = new AMap.CircleEditor(this.map, editShap); |
| 394 | }else if(this.dialogParams.fShape == '矩形'){ | 406 | }else if(this.dialogParams.fShape == '矩形'){ |
| 395 | - var southWest = new AMap.LngLat(116.356449, 39.859008) | ||
| 396 | - var northEast = new AMap.LngLat(116.417901, 39.893797) | 407 | + var southWest = new AMap.LngLat(this.dialogParams.rectangleSouthPoint[0], this.dialogParams.rectangleSouthPoint[1]) |
| 408 | + var northEast = new AMap.LngLat(this.dialogParams.rectangleNothPoint[0], this.dialogParams.rectangleNothPoint[1]) | ||
| 397 | var bounds = new AMap.Bounds(southWest, northEast) | 409 | var bounds = new AMap.Bounds(southWest, northEast) |
| 398 | editShap = new AMap.Rectangle({ | 410 | editShap = new AMap.Rectangle({ |
| 399 | bounds: bounds, | 411 | bounds: bounds, |
| @@ -410,6 +422,17 @@ export default { | @@ -410,6 +422,17 @@ export default { | ||
| 410 | zIndex:50, | 422 | zIndex:50, |
| 411 | }); | 423 | }); |
| 412 | this.mapEditor = new AMap.RectangleEditor(this.map, editShap); | 424 | this.mapEditor = new AMap.RectangleEditor(this.map, editShap); |
| 425 | + }else { | ||
| 426 | + editShap = new AMap.Polygon({ | ||
| 427 | + path: this.dialogParams.polygonPoint, | ||
| 428 | + strokeColor: "#FF33FF", | ||
| 429 | + strokeWeight: 6, | ||
| 430 | + strokeOpacity: 0.2, | ||
| 431 | + fillOpacity: 0.4, | ||
| 432 | + fillColor: '#1791fc', | ||
| 433 | + zIndex: 50, | ||
| 434 | + }); | ||
| 435 | + this.mapEditor = new AMap.PolyEditor(this.map, editShap); | ||
| 413 | } | 436 | } |
| 414 | editShap.setMap(this.map); | 437 | editShap.setMap(this.map); |
| 415 | // 缩放地图到合适的视野级别 | 438 | // 缩放地图到合适的视野级别 |
| @@ -470,135 +493,6 @@ export default { | @@ -470,135 +493,6 @@ export default { | ||
| 470 | } | 493 | } |
| 471 | } | 494 | } |
| 472 | }, | 495 | }, |
| 473 | - //绘制多边形 | ||
| 474 | - drawPolygon () { | ||
| 475 | - if(this.overlays.length>0){ | ||
| 476 | - this.map.remove(this.overlays); | ||
| 477 | - this.map.clearMap(); | ||
| 478 | - //关闭绘画 | ||
| 479 | - this.mouseTool.close(true); | ||
| 480 | - this.overlays = []; | ||
| 481 | - return | ||
| 482 | - } | ||
| 483 | - this.mouseTool.polygon({ | ||
| 484 | - fillColor:'#00b0ff', | ||
| 485 | - strokeColor:'#80d8ff', | ||
| 486 | - // strokeOpacity: 1, | ||
| 487 | - strokeWeight: 6, | ||
| 488 | - strokeOpacity: 0.2, | ||
| 489 | - fillOpacity: 0.4, | ||
| 490 | - // 线样式还支持 'dashed' | ||
| 491 | - strokeStyle: "solid", | ||
| 492 | - // strokeStyle是dashed时有效 | ||
| 493 | - // strokeDasharray: [30,10], | ||
| 494 | - }); | ||
| 495 | - let that = this; | ||
| 496 | - this.mouseTool.on('draw', function(event) { | ||
| 497 | - if(that.overlays.length>1){ | ||
| 498 | - console.log('打印this.overlays',that.overlays,that.mouseTool); | ||
| 499 | - that.map.remove(that.overlays); | ||
| 500 | - //关闭绘画 | ||
| 501 | - // that.mouseTool.close(true); | ||
| 502 | - that.overlays = []; | ||
| 503 | - } | ||
| 504 | - let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组 | ||
| 505 | - that.overlays.push(event.obj); | ||
| 506 | - console.log('打印geoJson',geoJSON,that.overlays); | ||
| 507 | - // // 为矢量图形设置唯一标识和zIndex | ||
| 508 | - // console.log('覆盖物对象绘制完成',event.obj); | ||
| 509 | - // event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() }); | ||
| 510 | - // event.obj.setOptions({ zIndex: 100 }); | ||
| 511 | - | ||
| 512 | - // 其他矢量图形处理逻辑... | ||
| 513 | - // event.obj 为绘制出来的覆盖物对象 | ||
| 514 | - }); | ||
| 515 | - }, | ||
| 516 | - //绘制圆形 | ||
| 517 | - drawCircle () { | ||
| 518 | - if(this.overlays.length>0){ | ||
| 519 | - this.map.remove(this.overlays); | ||
| 520 | - //清除原来的电子围栏 | ||
| 521 | - this.map.clearMap(); | ||
| 522 | - //关闭绘画 | ||
| 523 | - this.mouseTool.close(true); | ||
| 524 | - this.overlays = []; | ||
| 525 | - return | ||
| 526 | - } | ||
| 527 | - console.log('打印this.overlays====>圆形',this.overlays) | ||
| 528 | - this.mouseTool.circle({ | ||
| 529 | - // strokeOpacity: 1, | ||
| 530 | - strokeWeight: 6, | ||
| 531 | - strokeOpacity: 0.2, | ||
| 532 | - fillColor:'#00b0ff', | ||
| 533 | - strokeColor:'#80d8ff', | ||
| 534 | - fillOpacity: 0.4, | ||
| 535 | - strokeStyle: 'solid', | ||
| 536 | - // 线样式还支持 'dashed' | ||
| 537 | - // strokeDasharray: [30,10], | ||
| 538 | - }) | ||
| 539 | - let that = this; | ||
| 540 | - this.mouseTool.on('draw', function(event) { | ||
| 541 | - if(that.overlays.length>0){ | ||
| 542 | - // console.log('打印this.overlays',that.overlays,that.mouseTool); | ||
| 543 | - that.map.remove(that.overlays); | ||
| 544 | - //关闭绘画 | ||
| 545 | - that.mouseTool.close(true); | ||
| 546 | - that.overlays = []; | ||
| 547 | - return | ||
| 548 | - } | ||
| 549 | - let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组 | ||
| 550 | - that.overlays.push(event.obj); | ||
| 551 | - // // 为矢量图形设置唯一标识和zIndex | ||
| 552 | - // event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() }); | ||
| 553 | - // event.obj.setOptions({ zIndex: 100 }); | ||
| 554 | - | ||
| 555 | - // 其他矢量图形处理逻辑... | ||
| 556 | - // event.obj 为绘制出来的覆盖物对象 | ||
| 557 | - console.log('覆盖物对象开始绘制====》圆形',event.obj,that.overlays); | ||
| 558 | - }); | ||
| 559 | - }, | ||
| 560 | - //绘制矩形 | ||
| 561 | - drawRectangle () { | ||
| 562 | - if(this.overlays.length>0){ | ||
| 563 | - this.map.remove(this.overlays); | ||
| 564 | - //关闭绘画 | ||
| 565 | - this.mouseTool.close(true); | ||
| 566 | - //清除原来的电子围栏 | ||
| 567 | - this.map.clearMap(); | ||
| 568 | - this.overlays = []; | ||
| 569 | - return | ||
| 570 | - } | ||
| 571 | - console.log('打印矩形=====》',this.overlays,this.mouseTool); | ||
| 572 | - this.mouseTool.rectangle({ | ||
| 573 | - strokeOpacity:0.5, | ||
| 574 | - strokeWeight: 6, | ||
| 575 | - fillColor:'#00b0ff', | ||
| 576 | - strokeColor:'#80d8ff', | ||
| 577 | - fillOpacity:0.5, | ||
| 578 | - // strokeStyle还支持 solid | ||
| 579 | - strokeStyle: 'solid', | ||
| 580 | - // strokeDasharray: [30,10], | ||
| 581 | - }) | ||
| 582 | - let that = this; | ||
| 583 | - this.mouseTool.on('draw', function(event) { | ||
| 584 | - if(that.overlays.length>0){ | ||
| 585 | - console.log('打印this.overlays',that.overlays,that.mouseTool); | ||
| 586 | - that.map.remove(that.overlays); | ||
| 587 | - //关闭绘画 | ||
| 588 | - that.mouseTool.close(true); | ||
| 589 | - that.overlays = []; | ||
| 590 | - return | ||
| 591 | - } | ||
| 592 | - let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组 | ||
| 593 | - that.overlays.push(event.obj); | ||
| 594 | - // 为矢量图形设置唯一标识和zIndex | ||
| 595 | - // event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() }); | ||
| 596 | - // event.obj.setOptions({ zIndex: 100 }); | ||
| 597 | - // 其他矢量图形处理逻辑... | ||
| 598 | - // event.obj 为绘制出来的覆盖物对象 | ||
| 599 | - console.log('覆盖物对象绘制完成=====>矩形',event,that.overlays) | ||
| 600 | - }); | ||
| 601 | - }, | ||
| 602 | //提交事件 | 496 | //提交事件 |
| 603 | async handleSubmit(formName){ | 497 | async handleSubmit(formName){ |
| 604 | this.$refs[formName].validate(async (valid) => { | 498 | this.$refs[formName].validate(async (valid) => { |
| @@ -620,7 +514,7 @@ export default { | @@ -620,7 +514,7 @@ export default { | ||
| 620 | let params= { | 514 | let params= { |
| 621 | id:this.dialogParams.id, | 515 | id:this.dialogParams.id, |
| 622 | fName: this.dialogParams.regionalName, | 516 | fName: this.dialogParams.regionalName, |
| 623 | - fSsczid: this.rowData.fSsczid, | 517 | + fSsczid: this.dialogParams.fSsczid, |
| 624 | fRegionalType: this.dialogParams.regionalType, | 518 | fRegionalType: this.dialogParams.regionalType, |
| 625 | fShape: this.dialogParams.fShape, | 519 | fShape: this.dialogParams.fShape, |
| 626 | fRemark:this.dialogParams.fRemark, | 520 | fRemark:this.dialogParams.fRemark, |
| @@ -668,10 +562,21 @@ export default { | @@ -668,10 +562,21 @@ export default { | ||
| 668 | this.dialogParams.dialogType= type; | 562 | this.dialogParams.dialogType= type; |
| 669 | switch (type){ | 563 | switch (type){ |
| 670 | case 'add': | 564 | case 'add': |
| 565 | + this.dialogParams.fSsczid = this.rowData.fSsczid; | ||
| 671 | this.dialogParams.id =''; | 566 | this.dialogParams.id =''; |
| 567 | + this.dialogParams.radius = ''; | ||
| 568 | + this.dialogParams.fShape = ''; | ||
| 569 | + this.dialogParams.fRemark = ''; | ||
| 570 | + this.dialogParams.regionalType =''; | ||
| 571 | + this.dialogParams.regionalName =''; | ||
| 572 | + this.dialogParams.rectangleNothPoint =[]; | ||
| 573 | + this.dialogParams.rectangleSouthPoint=[]; | ||
| 574 | + this.dialogParams.polygonPoint = [];//多边形坐标点 | ||
| 575 | + this.dialogParams.centerOfCircle = [];//圆形中心点坐标 | ||
| 672 | this.dialogParams.title='新增区域'; | 576 | this.dialogParams.title='新增区域'; |
| 673 | break; | 577 | break; |
| 674 | case 'edit': | 578 | case 'edit': |
| 579 | + this.dialogParams.fSsczid = row.f_ssczid; | ||
| 675 | this.dialogParams.id = row.id_; | 580 | this.dialogParams.id = row.id_; |
| 676 | this.dialogParams.title='编辑区域'; | 581 | this.dialogParams.title='编辑区域'; |
| 677 | this.getRegionDetailInfoData(row.id_); | 582 | this.getRegionDetailInfoData(row.id_); |