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 | 32 | </el-col> |
33 | 33 | <el-col :span="24"> |
34 | 34 | <el-table |
35 | - style="width: 100%" | |
35 | + style="width: 99%" | |
36 | 36 | :data="tableData"> |
37 | 37 | <el-table-column |
38 | 38 | type="index" |
... | ... | @@ -110,7 +110,7 @@ |
110 | 110 | </el-input> |
111 | 111 | </el-form-item> |
112 | 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 | 114 | <el-button :class="[dialogParams.fShape == '矩形'?'clickBtn':'','btn']" @click="draw('rectangle','矩形')" style="margin-bottom: 5px">绘制矩形</el-button> |
115 | 115 | <el-button :class="[dialogParams.fShape == '圆形'?'clickBtn':'','btn']" @click="draw('circle','圆形')" style="margin-bottom: 5px">绘制圆形</el-button> |
116 | 116 | <el-button @click="closeDraw" v-if="dialogParams.dialogType == 'edit'" style="margin-bottom: 5px">结束编辑</el-button> |
... | ... | @@ -182,6 +182,9 @@ export default { |
182 | 182 | dialogType:'', |
183 | 183 | regionalType:'', |
184 | 184 | regionalName:'', |
185 | + rectangleNothPoint:[], | |
186 | + rectangleSouthPoint:[], | |
187 | + polygonPoint:[],//多边形坐标点 | |
185 | 188 | centerOfCircle:[],//圆形中心点坐标 |
186 | 189 | }, |
187 | 190 | polygon: null, |
... | ... | @@ -225,8 +228,17 @@ export default { |
225 | 228 | this.dialogParams.fShape = fShape; |
226 | 229 | console.log('打印fBoundary',JSON.parse(fBoundary)); |
227 | 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 | 404 | }); |
393 | 405 | this.mapEditor = new AMap.CircleEditor(this.map, editShap); |
394 | 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 | 409 | var bounds = new AMap.Bounds(southWest, northEast) |
398 | 410 | editShap = new AMap.Rectangle({ |
399 | 411 | bounds: bounds, |
... | ... | @@ -410,6 +422,17 @@ export default { |
410 | 422 | zIndex:50, |
411 | 423 | }); |
412 | 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 | 437 | editShap.setMap(this.map); |
415 | 438 | // 缩放地图到合适的视野级别 |
... | ... | @@ -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 | 497 | async handleSubmit(formName){ |
604 | 498 | this.$refs[formName].validate(async (valid) => { |
... | ... | @@ -620,7 +514,7 @@ export default { |
620 | 514 | let params= { |
621 | 515 | id:this.dialogParams.id, |
622 | 516 | fName: this.dialogParams.regionalName, |
623 | - fSsczid: this.rowData.fSsczid, | |
517 | + fSsczid: this.dialogParams.fSsczid, | |
624 | 518 | fRegionalType: this.dialogParams.regionalType, |
625 | 519 | fShape: this.dialogParams.fShape, |
626 | 520 | fRemark:this.dialogParams.fRemark, |
... | ... | @@ -668,10 +562,21 @@ export default { |
668 | 562 | this.dialogParams.dialogType= type; |
669 | 563 | switch (type){ |
670 | 564 | case 'add': |
565 | + this.dialogParams.fSsczid = this.rowData.fSsczid; | |
671 | 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 | 576 | this.dialogParams.title='新增区域'; |
673 | 577 | break; |
674 | 578 | case 'edit': |
579 | + this.dialogParams.fSsczid = row.f_ssczid; | |
675 | 580 | this.dialogParams.id = row.id_; |
676 | 581 | this.dialogParams.title='编辑区域'; |
677 | 582 | this.getRegionDetailInfoData(row.id_); | ... | ... |