vue BMapGL创建可绘制折线区域百度地图

先上成果图： 可自定义标记点、折线、矩形、圆形，根据产品需求我还需要自定义绘制线条颜色，首先要先去百度地图后台区申请账号、密钥这边不做赘述到处都有教程，直接介绍步骤：

1.先在项目public目录下的index.html 引入：（搜了很多文档都是这种方式引入，亲测可用）

    <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></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>

2.HTML部分，我地图试做再弹窗里的：

<!--地图绘制区域弹窗-->
    <el-dialog width="800px" title="分区经度、纬度" :visible.sync="mapShow">
        <el-row>
          <el-form ref="mapform" :model="form" label-width="90px">       
            <el-col :span="8">
              <el-form-item label="分区颜色" prop="partitionCode">
                <el-color-picker v-model="form.colour"></el-color-picker>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div class="mapDraw">
          <ul class="drawing-panel">
              <li class="bmap-btn bmap-marker" @click="draw('marker')"
       :style="{ 'background-position-y': actNav === 'marker' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-polyline" @click="draw('polyline')"
       :style="{ 'background-position-y': actNav === 'polyline' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-rectangle" @click="draw('rectangle')"
       :style="{ 'background-position-y': actNav === 'rectangle' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-polygon" @click="draw('polygon')"
       :style="{ 'background-position-y': actNav === 'polygon' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-circle" @click="draw('circle')"
       :style="{ 'background-position-y': actNav === 'circle' ? '-52px' : '0px' }"></li>
          </ul>
          <div id="myMap" ref="map" class="map"></div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveMap()">保存</el-button>
          <el-button @click="mapShow = false">取 消</el-button>
        </div>
    </el-dialog>

3.CSS部分

.drawing-panel {
  z-index: 999;
  position: absolute;
  top: 0;
  margin-left: 15px;
  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;
}
    
.map{
  width: 100%;
  height: 600px;
}

4.data里面定义的参数

      //地图
      map:'',
      //辅助地图
      BMapGL:'',
      lng:'',
      lat:'',
      actNav:'' ,//默认选择折线绘制
      pointArr:[], //地图点坐标集合

5.JS部分 我主要是处理折线区域的逻辑，点矩形还有圆需要自行看官方文档处理，地图初始化的时候一定要用this.nexttick 来处理，元素没有渲染完的话，地图是无法找到容器ID的，导致无法显示。

    //打开地图弹窗
    openMap() {
      this.mapShow = true;
      let that = this;
      this.$nextTick(() => {    //必须等元素加载完成后再加载地图
        that.initMap();
      })
    },
    //获取当前IP定位的经纬度
    getMyPosition(){
      let that = this;
      this.$nextTick(() => {    //必须等元素加载完成后再加载地图
        let geolocation = new BMapGL.Geolocation();
        geolocation.getCurrentPosition(function(res){
            that.lng = res.point.lng;
            that.lat = res.point.lat;
        });
      })
    },
    //初始化地图
    initMap(){
      // 创建地图实例
      this.BMapGL = BMapGL; //把百度地图库引入到this
      this.map = new BMapGL.Map("myMap");  //myMap为dom元素id，创建Map实例
      //this.lng this.lat 自己设置的坐标
      console.log('根据IP定位返回的结果',this.lng,this.lat);  //根据IP获取当前地址有时候返回很慢，所以以防万一写死一个初始化经纬度
      let marker1 = new BMapGL.Marker(new BMapGL.Point(this.lng?this.lng:118.058319,this.lat?this.lat:24.613407));
      this.map.addOverlay(marker1); //添加坐标
      //回显折线区域
      // let polyline = new BMapGL.Polyline([
      //  		new BMapGL.Point(118.05736564501707,24.613589381486417),
      //  		new BMapGL.Point(118.05783400013014,24.612841635810746),
      //  		new BMapGL.Point(118.05822961055289,24.61310215946441),
      //     new BMapGL.Point(118.0577208679834,24.613792596175927),
      //     new BMapGL.Point(118.05736102673862,24.61358863699323)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
      // this.map.addOverlay(polyline);
      // 初始化地图，设置中心点坐标和地图级别
      this.map.centerAndZoom(new BMapGL.Point(this.lng?this.lng:118.058319,this.lat?this.lat:24.613407), 19);
      //开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true);
      //地图旋转角度
      this.map.setHeading(10)
      //地图倾斜角度
      this.map.setTilt(19);
      //修改地图中心点
      this.map.setCenter(this.lng?this.lng:118.058319,this.lat?this.lat:24.613407);
      //设置map显示类型
      //BMAP_EARTH_MAP 地图卫星模式
      //BMAP_NORMAL_MAP 普通模式
      this.map.setMapType(BMAP_EARTH_MAP)
      //地图个性化样式
      this.map.setMapStyleV2({
         styleId: 'a0c43e8c7279db0a4a032712d0e4c32c' //官网地图api个性化获取
      });


    },
    //绘制地图
    draw(drawingType) {
      let that =this;
      this.actNav = drawingType
      //这里看需求可以把它设置为全局变量。
      let styleOptions = {
        strokeColor: this.form.colour,   // 边线颜色
        fillColor: this.form.colour,     // 填充颜色。当参数为空时，圆形没有填充颜色
        strokeWeight: 2,          // 边线宽度，以像素为单位
        strokeOpacity: 1,         // 边线透明度，取值范围0-1
        fillOpacity: 0.2          // 填充透明度，取值范围0-1
      };
      const labelOptions = {
        borderRadius: '2px',
        background: '#FFFBCC',
        border: '1px solid #E1E1E1',
        color: '#703A04',
        fontSize: '12px',
        letterSpacing: '0',
        padding: '5px'
      };
      // 实例化鼠标绘制工具
      const drawingManager = new BMapGLLib.DrawingManager(this.map, {
        //isOpen: true,        // 是否开启绘制模式
        enableCalculate: false, // 绘制是否进行测距测面
        enableSorption: true, // 是否开启边界吸附功能
        sorptiondistance: 20, // 边界吸附距离
        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();
      }
      // 监听事件
      if (drawingType == 'polyline') {        //折线
        // 监听折线绘制完成事件
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 获取折线对象
          let polyline = e.overlay;
          console.log('返回的数据',polyline);
          polyline.points.map(function(item, index) {    //循环把返回的点集合 推到数组里
             that.pointArr.push(item.latLng)
          });
          console.log('返回的数据点集合',that.pointArr);
        });
      }else if (drawingType == 'rectangle') {
        // 监听矩形绘制完成事件
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 获取矩形对象
          const rectangle = e.overlay;
          // 获取矩形的四个顶点
          const points = rectangle.getPath();
          console.log(points, "顶点");
          this.scope_point = points;
        });
      } else if (drawingType == 'circle') {
        // 监听圆形绘制完成事件
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 获取圆形对象
          const circle = e.overlay;
          // 获取圆形的圆心
          const center = circle.getCenter();
          console.log(center, "圆心");
          // 获取圆形的半径
          const radius = circle.getRadius();
          console.log(radius, "半径");
          this.scope_point = center;
          this.scope_radius = radius;
        });
      } else if (drawingType == 'marker') {
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 获取标注对象
          const marker = e.overlay;
          // 获取标注的经纬度坐标
          this.point = marker.getPosition();
          // 创建地理编码服务实例
          const geocoder = new BMapGL.Geocoder();
          // 将经纬度坐标解析为地址信息
          geocoder.getLocation(this.point, (result) => {
            this.newForm.address = result.address;
            console.log(this.point, result.address, "地址");
          });
        });
      }
    },