百度地图GL篇 四、辅助工具

上篇写到辅助工具，由于官方提供js写的方法，我们简单用vue来实现

1.引入需要的文件

<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>

2.html  四个图标为精灵图片 需要点击的时候修改样式

 <ul class="drawing-panel" v-if="pageType == 1 || pageType == 2">

      <li

        class="bmap-btn"

        id="marker"

        :style="{ backgroundPositionY: activeIndex == 4 ? '-52px' : '0px' }"

        @click="addDiviceMarker"

      ></li>

     <li

        class="bmap-btn bmap-polyline"

        :style="{ backgroundPositionY: activeIndex == 0 ? '-52px' : '0px' }"

        id="polyline"

        @click="toolDraw('polyline', 0)"

      ></li>

       <li

        class="bmap-btn bmap-rectangle"

        :style="{ backgroundPositionY: activeIndex == 1 ? '-52px' : '0px' }"

        id="rectangle"

        @click="toolDraw('rectangle', 1)"

      ></li>

      <li

        class="bmap-btn bmap-polygon"

        :style="{ backgroundPositionY: activeIndex == 2 ? '-52px' : '0px' }"

        id="polygon"

        @click="toolDraw('polygon', 2)"

      ></li>

      <li

        class="bmap-btn bmap-circle"

        :style="{ backgroundPositionY: activeIndex == 3 ? '-52px' : '0px' }"

        id="circle"

        @click="toolDraw('circle', 3)"

      ></li>

    </ul>

3.点击事件

 toolDraw(type, index) {

      this.activeIndex = index;

      switch (type) {

        case "polyline": {

          var drawingType = BMAP_DRAWING_POLYLINE;

          break;

        }

        case "rectangle": {

          var drawingType = BMAP_DRAWING_RECTANGLE;

          break;

        }

        case "polygon": {

          var drawingType = BMAP_DRAWING_POLYGON;

          break;

        }

        case "circle": {

          var drawingType = BMAP_DRAWING_CIRCLE;

          break;

        }

      }

      // 实例化鼠标绘制工具

      var drawingManager = new BMapGLLib.DrawingManager(this.map, {

        enableCalculate: true, // 绘制是否进行测距测面

        enableSorption: true, // 是否开启边界吸附功能

        sorptiondistance: 20, // 边界吸附距离

        enableGpc: true, // 是否开启延边裁剪功能

        circleOptions: styleOptions, // 圆的样式

        polylineOptions: styleOptions, // 线的样式

        polygonOptions: styleOptions, //多边形

        rectangleOptions: styleOptions, //矩形

        labelOptions: labelOptions, //label

      });

      // 进行绘制

      if (

        drawingManager._isOpen &&

        drawingManager.getDrawingMode() === drawingType

      ) {

        drawingManager.close();

      } else {

        drawingManager.setDrawingMode(drawingType);

        drawingManager.open();

      }

      // 绘制完成后获取相关的信息(面积等

      let that = this;

      drawingManager.addEventListener("overlaycomplete", function (e) {

        e.overlay.points.forEach((point) => {

          let obj = {

            name: "",

            longitude: point.latLng.lng + "",

            latitude: point.latLng.lat + "",

            projectid: "170",

          };

          that.polylineObj.list.push(JSON.stringify(obj));

        });

        that.polylineObj.userid = that.userid;

        console.log(that.polylineObj);

        let param = that.jsToFormData(that.polylineObj);

        insertline(param).then((res) => {

          console.log(res);

        });

        console.log(e);

      });

    },