vue百度地图电子围栏

一、index.html引入

    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=GnexjLGB8o2AEgCrsKjquXTjTCeXVkgM"></script>
    <link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
    <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>

二、所需页面使用

<template>
<div class="area" v-drag v-if="Area">
  <div style="height: 40px;">
    <div
      style="
      font-size: 16px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 500;
      line-height: 22px;
      color: #ffffff;
      float: left;
      margin-left: 16px;
      margin-top: 20px;
      height: 22px;
    "
    >
      新增警戒区
    </div>
    <div
      style="
      float: right;
      width: 3%;
      height: 3%;
      color: #fff;
      cursor: pointer;
      margin-top: 20px;
      margin-right: 26px;

    "
      @click="close"
    >
      <Icon custom="i-icon i-icon-shop_fill" type="md-close" size="24"/>
    </div>
  </div>
  <div class="fillColor">
    <div style="width: 100%; height: 70px;">
      <span>填充:</span>
      <ColorPicker @on-change="changeColor1" alpha v-model="warnRegionList.fillColor" recommend/>
      <span>边框:</span>
      <ColorPicker @on-change="changeColor2" alpha v-model="warnRegionList.borderColor" recommend/>
    </div>
    <div style=" width: 100%; height: 50px;">
      <span>名称:</span>
      <Input maxlength="10" v-model="warnRegionList.warnRegionName" placeholder="请输入名称"
             style="width: 320px;"></Input>
    </div>
    <div>
      <span style="margin-left: 46px;">经纬度:</span>
      <Input v-model="warnRegionList.latAndLon" disabled type="textarea" :rows="6" style="width: 320px;"></Input>
    </div>
    <div style="margin-left: 175px;margin-top: 50px;">
      <Button style="background: #ECECEC; color: #333333" @click="cancel">取消</Button>
      <Button type="primary" style="margin-left: 30px;" @click="savejwd()">确定</Button>
    </div>
  </div>
</div>
</template>
export default {
data() {
return{
p:{},
Area:false,//警戒区编辑时出现的弹窗
color1: '',//填充色
color2: '',//边框色
jwd: [],//编辑围栏拿到的经纬度数组
latlng: [],//拿到数组里的经纬度数据
warnRegionList:
  {
borderColor: "",//边框色
    bridgeId: '',
    fillColor: "",//填充色
    // isDelete: true,
    latAndLon: "",//经纬度
    transparency: 0,//透明度
    updateOpId: 0,
    updateTime: "",
    warnRegionId: '',
    warnRegionName: ""//警戒区名称
  },
styleOptions: {
strokeColor: '',    //边线颜色。
  fillColor: '',      //填充颜色。当参数为空时，圆形将没有填充效果。
  strokeWeight: 3,       //边线的宽度，以像素为单位。
  strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
  fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
  strokeStyle: 'solid' //边线的样式，solid或dashed。
},
}
},
methods:{
/**
 * 电子围栏编辑点击打开
 */
drawFencing() {
  this.Area = true;
  this.draw()
},
draw() {
      let that = this;
      var labelOptions = {
        borderRadius: '2px',
        background: '#FFFBCC',
        border: '1px solid #E1E1E1',
        color: '#703A04',
        fontSize: '12px',
        letterSpacing: '0',
        padding: '5px'
      };
      //实例化鼠标绘制工具
      var drawingManager = new BMapGLLib.DrawingManager(this.map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingToolOptions: {
          anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
          offset: new BMapGL.Size(25, 5), //偏离值
        },
        enableCalculate: true, // 绘制是否进行测距测面
        circleOptions: this.styleOptions, //圆的样式
        polylineOptions: this.styleOptions, //线的样式
        polygonOptions: this.styleOptions, //多边形的样式
        rectangleOptions: this.styleOptions //矩形的样式
      });
      //获取区域经纬度
      var overlaycomplete = function (e) {
        that.jwd.push(e.overlay.points);
        that.jwd[0].forEach((item) => {
          that.latlng.push(item.latLng)
        })
        that.warnRegionList.latAndLon = JSON.stringify(that.latlng)
        let a = document.getElementsByClassName('BMapGLLib_Drawing BMap_noprint anchorTL')
        //遍历删除电子围栏的标识
        for (let i = 0; i < a.length; i++) {
          a[i].attributes[1].nodeValue = ""
        }
      };

      // 添加鼠标绘制工具监听事件，用于获取绘制结果
      drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    },
//关闭电子围栏保存数据的窗口
cancel() {
this.Area = false;
  this.warnRegionList.fillColor = '';
  this.warnRegionList.borderColor = '';
  this.warnRegionList.warnRegionName = '';
  this.warnRegionList.latAndLon = '';
  this.styleOptions.strokeColor = '';
  this.styleOptions.fillColor = '';
  let a = document.getElementsByClassName('BMapGLLib_Drawing BMap_noprint anchorTL')
//遍历删除电子围栏的标识 就是画电子围栏的按钮 防止每次编辑时画框框的按钮被覆盖掉
  for (let i = 0; i < a.length; i++) {
    a[i].attributes[1].nodeValue = ""
  }
this.$Message.info('取消编辑!')
},
//保存经纬度
savejwd() {
  let a = document.getElementsByClassName('BMapGLLib_Drawing BMap_noprint anchorTL')
// console.log(a)
  //遍历删除电子围栏的标识 删除电子围栏按钮 防止每次编辑时画框框的按钮被覆盖掉
  for (let i = 0; i < a.length; i++) {
    a[i].attributes[1].nodeValue = ""
  }
let data = JSON.parse(JSON.stringify(this.warnRegionList));
  saveOrUpdateWarnRegionBatchAPI(data).then((res) => {
if (res.success) {
this.$Message.info('保存成功!');
      this.latAndLon = JSON.parse(res.result.latAndLon);
  
    }
  })
this.warnRegionList.fillColor = '';
  this.warnRegionList.borderColor = '';
  this.warnRegionList.warnRegionName = '';
  this.warnRegionList.latAndLon = '';
  this.styleOptions.strokeColor = '';
  this.styleOptions.fillColor = '';
  this.Area = false;
this.latlng = [];
  this.jwd = []
},
/**
 * 已知经纬度画区域
 */
//获取所有警戒区
getAllWarnRegion() {
getAllWarnRegionAPI().then((res) => {
if (res.success) {
let polArry = [];
      let that = this;
      res.result.forEach(item => {
        item.latAndLon = JSON.parse(JSON.stringify(item.latAndLon))
let jsonArray = eval(item.latAndLon);
        jsonArray.forEach((i) => {
          that.p = new BMapGL.Point(i.lng, i.lat);
          polArry.push(that.p);
        })
        that.styleOptions.fillColor = item.fillColor;
        that.styleOptions.strokeStyle = item.strokeStyle;
        that.polygon = new BMapGL.Polygon(polArry, that.styleOptions);
        that.map.addOverlay(this.polygon);
        polArry = []
      });
    }
  })
},

//清除图层 每次删除一个电子围栏时清除地图上所有图层，在调用获取所有区域画出电子围栏，可以调用this.getAllWarnRegion()
clear() {
this.map.clearOverlays()
},
},
mounted(){
this.getAllWarnRegion();
}
}

百度地图电子围栏自带五个画图的框，我只保留一个

/deep/ .BMapGLLib_Drawing .BMapGLLib_polyline {
  display: none !important;
}

/deep/ .BMapGLLib_Drawing_panel {
  margin-left: 912px !important;
  margin-top: 90px !important;
}

/deep/ .BMapGLLib_Drawing .BMapGLLib_marker {
  display: none !important;
}

/deep/ .BMapGLLib_Drawing .BMapGLLib_circle {
  display: none !important;
}

/deep/ .BMapGLLib_Drawing .BMapGLLib_rectangle {
  display: none !important;
}

剩一个

成果展示