feat:修改部分问题

qingyiay

2024-02-01 a6ed23b018343a68f9fd276647cc4af817398d1b

 src/views/your/map/areaMap.vue

@@ -1,291 +1,281 @@
<template>
    <div>
  <div>
    <div style="float: left;width: 15%;overflow:auto">
        <Table
                border
                :columns="columns"
                :data="data"
                ref="table"
                height="600"
                highlight-row
                @on-current-change="handleRowChange"
        ></Table>
      <Table
          border
          :columns="columns"
          :data="data"
          ref="table"
          height="600"
          highlight-row
          @on-current-change="handleRowChange"
      ></Table>
    </div>
    <div style="float: right;width: 85%;">
        <!--<div id="container"></div>-->
        <!--<ul class="drawing-panel" style="z-index: 99;">-->
            <!--<li class = "btn" @click="openEdit">开启编辑</li>-->
            <!--<li class = "btn" @click="closeEdit">保存编辑</li>-->
        <!--</ul>-->
      <!--<div id="container"></div>-->
      <!--<ul class="drawing-panel" style="z-index: 99;">-->
      <!--<li class = "btn" @click="openEdit">开启编辑</li>-->
      <!--<li class = "btn" @click="closeEdit">保存编辑</li>-->
      <!--</ul>-->

        <ul class = "drawing-panel">
            <li class="bmap-btn bmap-polygon" id="polygon" @click="draw"></li>
            <!--<li class = "btn" @click="clearAll">清除重画</li>-->
        </ul>
        <div id = "container"></div>
      <ul class="drawing-panel">
        <li class="bmap-btn bmap-polygon" id="polygon" @click="draw"></li>
<!--        <li class="btn" @click="clearAll">清除重画</li>-->
      </ul>
      <div id="container"></div>
    </div>
    </div>
  </div>
</template>

<script>
    import {
        getAllArea,
        addAreaMap,
        getAllByAreaId,
        delAreaMap,
    } from "@/api/open";
    export default {
        name: "",
        data() {
            return {
                polygon: {},
                columns: [
                    {
                        title: "片区名称",
                        key: "name",
                    },
                ],
                data:[],
                map:{},
                areaId:"",
                drawingManager:{},
                overlays:[]
            }
import {
  getAllArea,
  addAreaMap,
  getAllByAreaId,
  delAreaMap,
} from "@/api/open";

export default {
  name: "",
  data() {
    return {
      polygon: {},
      columns: [
        {
          title: "片区名称",
          key: "name",
        },
        mounted() {
            this.getDataList();

            this.map = new BMapGL.Map('container',{enableMapClick:false});
            var point = new BMapGL.Point(118.187167,39.636514);
            this.map.centerAndZoom(point, 12);
            this.map.enableScrollWheelZoom(true);







            // this.polygon = new BMapGL.Polygon([
            //     new BMapGL.Point(118.127822,39.697015),
            //     new BMapGL.Point(118.253728,39.697459),
            //     new BMapGL.Point(118.256028,39.601458),
            //     new BMapGL.Point(118.109424,39.59612),
            //     new BMapGL.Point(118.100801,39.650809),
            // ], {
            //     strokeColor: 'blue',
            //     strokeWeight: 2,
            //     strokeOpacity: 0.5
            // });
            // this.map.addOverlay(this.polygon);
        },
        methods:{
            clearAll() {
                for(var i = 0; i < this.overlays.length; i++){
                    this.map.removeOverlay(this.overlays[i]);
                }
                this.overlays.length = 0
            },
            draw(e) {
                this.clearAll();

                var styleOptions = {
                    strokeColor: '#5E87DB',   // 边线颜色
                    fillColor: '#5E87DB',     // 填充颜色。当参数为空时，圆形没有填充颜色
                    strokeWeight: 2,          // 边线宽度，以像素为单位
                    strokeOpacity: 1,         // 边线透明度，取值范围0-1
                    fillOpacity: 0.2          // 填充透明度，取值范围0-1
                };

                // 实例化鼠标绘制工具
                this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
                    // isOpen: true,        // 是否开启绘制模式
                    enableCalculate: false, // 绘制是否进行测距测面
                    enableSorption: true,   // 是否开启边界吸附功能
                    sorptiondistance: 20,   // 边界吸附距离
                    polygonOptions: styleOptions,    // 多边形的样式
                });

                console.log(e)
                var arr = document.getElementsByClassName('bmap-btn');
                for(var i = 0; i<arr.length; i++) {
                    arr[i].style.backgroundPositionY = '0';
                }
                //e.style.backgroundPositionY = '-52px';
                var drawingType = BMAP_DRAWING_POLYGON;
                // 进行绘制
                if (this.drawingManager._isOpen && this.drawingManager.getDrawingMode() === drawingType) {
                    this.drawingManager.close();
                } else {
                    this.drawingManager.setDrawingMode(drawingType);
                    this.drawingManager.open();
                }

                this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete);
            },
            overlaycomplete(e){
                this.overlays.push(e.overlay);
                var path = e.overlay.getPath();
                delAreaMap({id:this.areaId}).then((res) => {
                    if(res.success){
                        for(var i=0;i<path.length;i++){
                            addAreaMap({areaId:this.areaId,lng:path[i].lng,lat:path[i].lat,seq:i}).then((res) => {
                                this.findMap();
                            });
                            //this.sleep(150)
                        }
                        // addAreaMap({areaId:this.areaId,lng:path[0].lng,lat:path[0].lat}).then((res) => {
                        //
                        // });
                    }
                });
            },
            sleep(delay) {
                var start = (new Date()).getTime();
                while((new Date()).getTime() - start < delay) {
                    continue;
                }
            },
            openEdit() {
                this.polygon.enableEditing();
            },
            closeEdit() {
                this.polygon.disableEditing();
                var obj = this.polygon.points;
                console.log(this.polygon)

                delAreaMap({id:this.areaId}).then((res) => {
                    if(res.success){
                        for(var i=0;i<obj.length;i++){
                            addAreaMap({areaId:this.areaId,lng:this.getLng(obj[i].lng,obj[i].lat),lat:this.getLat(obj[i].lng,obj[i].lat)}).then((res) => {
                                this.findMap();
                            });
                        }
                    }
                });

            },
            getDataList() {
                getAllArea({}).then((res) => {
                    if (res.success) {
                        this.data = res.result;
                    }
                });
            },
            handleRowChange(currentRow, oldCurrentRow){
                this.areaId = currentRow.id
                this.findMap();
            },
            findMap(){
                getAllByAreaId({id:this.areaId}).then((res) => {
                    if (res.success) {
                        this.map.clearOverlays();
                        if(res.result.length>2){
                            var ps = []
                            for(var i=0;i<res.result.length;i++){
                                ps.push(new BMapGL.Point(res.result[i].lng,res.result[i].lat))
                            }
                            this.polygon = new BMapGL.Polygon(ps, {
                                strokeColor: 'blue',
                                strokeWeight: 2,
                                strokeOpacity: 0.5
                            });
                            this.map.addOverlay(this.polygon);
                        }else{
                            // this.polygon = new BMapGL.Polygon([
                            //     new BMapGL.Point(118.127822,39.697015),
                            //     new BMapGL.Point(118.253728,39.697459),
                            //     new BMapGL.Point(118.256028,39.601458),
                            //     new BMapGL.Point(118.109424,39.59612),
                            //     new BMapGL.Point(118.100801,39.650809),
                            // ], {
                            //     strokeColor: 'blue',
                            //     strokeWeight: 2,
                            //     strokeOpacity: 0.5
                            // });
                            // this.map.addOverlay(this.polygon);
                        }
                    }
                });
            }
        }
      ],
      data: [],
      map: {},
      areaId: "",
      drawingManager: {},
      overlays: []
    }
  },
  mounted() {
    this.getDataList();

    this.map = new BMapGL.Map('container', {enableMapClick: false});
    var point = new BMapGL.Point(118.187167, 39.636514);
    this.map.centerAndZoom(point, 12);
    this.map.enableScrollWheelZoom(true);
  },
  methods: {
    clearAll() {
      for (var i = 0; i < this.overlays.length; i++) {
        this.map.removeOverlay(this.overlays[i]);
      }
      this.overlays.length = 0
    },
    draw(e) {
      this.clearAll();

      var styleOptions = {
        strokeColor: '#5E87DB',   // 边线颜色
        fillColor: '#5E87DB',     // 填充颜色。当参数为空时，圆形没有填充颜色
        strokeWeight: 2,          // 边线宽度，以像素为单位
        strokeOpacity: 1,         // 边线透明度，取值范围0-1
        fillOpacity: 0.2          // 填充透明度，取值范围0-1
      };

      // 实例化鼠标绘制工具
      this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
        // isOpen: true,        // 是否开启绘制模式
        enableCalculate: false, // 绘制是否进行测距测面
        enableSorption: true,   // 是否开启边界吸附功能
        sorptiondistance: 20,   // 边界吸附距离
        polygonOptions: styleOptions,    // 多边形的样式
      });

      console.log(e)
      var arr = document.getElementsByClassName('bmap-btn');
      for (var i = 0; i < arr.length; i++) {
        arr[i].style.backgroundPositionY = '0';
      }
      //e.style.backgroundPositionY = '-52px';
      var drawingType = BMAP_DRAWING_POLYGON;
      // 进行绘制
      if (this.drawingManager._isOpen && this.drawingManager.getDrawingMode() === drawingType) {
        this.drawingManager.close();
      } else {
        this.drawingManager.setDrawingMode(drawingType);
        this.drawingManager.open();
      }

      this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete);
    },
    overlaycomplete(e) {
      this.overlays.push(e.overlay);
      var path = e.overlay.getPath();
      delAreaMap({id: this.areaId}).then((res) => {
        if (res.success) {
          for (var i = 0; i < path.length; i++) {
            addAreaMap({areaId: this.areaId, lng: path[i].lng, lat: path[i].lat, seq: i}).then((res) => {
              this.findMap();
            });
            //this.sleep(150)
          }
          // addAreaMap({areaId:this.areaId,lng:path[0].lng,lat:path[0].lat}).then((res) => {
          //
          // });
        }
      });
    },
    sleep(delay) {
      var start = (new Date()).getTime();
      while ((new Date()).getTime() - start < delay) {
        continue;
      }
    },
    openEdit() {
      this.polygon.enableEditing();
    },
    closeEdit() {
      this.polygon.disableEditing();
      var obj = this.polygon.points;
      console.log(this.polygon)

      delAreaMap({id: this.areaId}).then((res) => {
        if (res.success) {
          for (var i = 0; i < obj.length; i++) {
            addAreaMap({
              areaId: this.areaId,
              lng: this.getLng(obj[i].lng, obj[i].lat),
              lat: this.getLat(obj[i].lng, obj[i].lat)
            }).then((res) => {
              this.findMap();
            });
          }
        }
      });

    },
    getDataList() {
      getAllArea({}).then((res) => {
        if (res.success) {
          this.data = res.result;
        }
      });
    },
    handleRowChange(currentRow, oldCurrentRow) {
      this.areaId = currentRow.id
      this.findMap();
    },
    findMap() {
      getAllByAreaId({id: this.areaId}).then((res) => {
        if (res.success) {
          this.map.clearOverlays();
          if (res.result.length > 2) {
            var ps = []
            for (var i = 0; i < res.result.length; i++) {
              ps.push(new BMapGL.Point(res.result[i].lng, res.result[i].lat))
            }
            this.polygon = new BMapGL.Polygon(ps, {
              strokeColor: 'blue',
              strokeWeight: 2,
              strokeOpacity: 0.5
            });
            this.map.addOverlay(this.polygon);
          }
        }
      });
    }
  }
}

</script>

<style scoped>
    body, html, #container {width: 100%; height: 600px; overflow: hidden; margin: 0; font-family: "微软雅黑";}
    ul li {list-style: none;}
    .drawing-panel {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 2.5rem;
        padding-left: 0;
        border-radius: .25rem;
        height: 47px;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .bmap-btn {
        border-right: 1px solid #d2d2d2;
        float: left;
        width: 64px;
        height: 100%;
        background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
        cursor: pointer;
    }
    .drawing-panel .bmap-marker {
        background-position: -65px 0;
    }
    .drawing-panel .bmap-polyline {
        background-position: -195px 0;
    }
    .drawing-panel .bmap-rectangle {
        background-position: -325px 0;
    }
    .drawing-panel .bmap-polygon {
        background-position: -260px 0;
    }
    .drawing-panel .bmap-circle {
        background-position: -130px 0;
    }
    /*body,*/
    /*html,*/
    /*#container {*/
        /*overflow: hidden;*/
        /*width: 100%;*/
        /*height: 600px;*/
        /*margin: 0;*/
        /*font-family: "微软雅黑";*/
    /*}*/
    /*ul li {*/
        /*list-style: none;*/
    /*}*/
    /*.drawing-panel {*/
        /*z-index: 999;*/
        /*position: fixed;*/
        /*bottom: 3.5rem;*/
        /*margin-left: 3rem;*/
        /*padding: 1rem 1rem;*/
        /*border-radius: .25rem;*/
        /*background-color: #fff;*/
        /*box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
    /*}*/
    /*.btn {*/
        /*width: 150px;*/
        /*height: 30px;*/
        /*float: left;*/
        /*background-color: #fff;*/
        /*color: rgba(27, 142, 236, 1);*/
        /*font-size: 14px;*/
        /*border:1px solid rgba(27, 142, 236, 1);*/
        /*border-radius: 5px;*/
        /*margin: 0 5px;*/
        /*text-align: center;*/
        /*line-height: 30px;*/
    /*}*/
    /*.btn:hover {*/
        /*background-color: rgba(27, 142, 236, 0.8);*/
        /*color: #fff;*/
    /*}*/
body, html, #container {
  width: 100%;
  height: 600px;
  overflow: hidden;
  margin: 0;
  font-family: "微软雅黑";
}

ul li {
  list-style: none;
}

.drawing-panel {
  z-index: 999;
  position: fixed;
  bottom: 3.5rem;
  margin-left: 2.5rem;
  padding-left: 0;
  border-radius: .25rem;
  height: 47px;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}

.bmap-btn {
  border-right: 1px solid #d2d2d2;
  float: left;
  width: 64px;
  height: 100%;
  background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
  cursor: pointer;
}

.drawing-panel .bmap-marker {
  background-position: -65px 0;
}

.drawing-panel .bmap-polyline {
  background-position: -195px 0;
}

.drawing-panel .bmap-rectangle {
  background-position: -325px 0;
}

.drawing-panel .bmap-polygon {
  background-position: -260px 0;
}

.drawing-panel .bmap-circle {
  background-position: -130px 0;
}

/*body,*/
/*html,*/
/*#container {*/
/*overflow: hidden;*/
/*width: 100%;*/
/*height: 600px;*/
/*margin: 0;*/
/*font-family: "微软雅黑";*/
/*}*/
/*ul li {*/
/*list-style: none;*/
/*}*/
/*.drawing-panel {*/
/*z-index: 999;*/
/*position: fixed;*/
/*bottom: 3.5rem;*/
/*margin-left: 3rem;*/
/*padding: 1rem 1rem;*/
/*border-radius: .25rem;*/
/*background-color: #fff;*/
/*box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
/*}*/
/*.btn {*/
/*width: 150px;*/
/*height: 30px;*/
/*float: left;*/
/*background-color: #fff;*/
/*color: rgba(27, 142, 236, 1);*/
/*font-size: 14px;*/
/*border:1px solid rgba(27, 142, 236, 1);*/
/*border-radius: 5px;*/
/*margin: 0 5px;*/
/*text-align: center;*/
/*line-height: 30px;*/
/*}*/
/*.btn:hover {*/
/*background-color: rgba(27, 142, 236, 0.8);*/
/*color: #fff;*/
/*}*/
</style>