ZongYue / lpg

Download as
Browse Code »

Commit cb76080e605f18b94a6158dc650a16cdb794d20d

Authored by 郭娟
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
  Diff comments   View file @cb76080
... ... @@ -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_);
... ...