百度地图绘制网格、编辑网格边界、编辑网格中心点坐标

各个网格弹框使用vxe-modal弹框进行展示
引入相应css与js

<!--鼠标绘制样式文件-->
<link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<script type="text/javascript"src="https://api.map.baidu.com/api?v='版本号'&ak='百度地图key'"></script>
<!--鼠标绘制js文件-->
<script type="text/javascript" src="https://api.map.baidu.com/librar/DrawingManager/1.4/src/DrawingManager_min.js"></script>

一、绘制网格，编辑网格边界

话不多说，直接上代码

initGisMap() {
 let obj = this
 let temp = ''
 let tem1 = ''
 let centrMarkers = ''
 let arr = []
 console.log(obj.formData.gridCenterNode)//已有网格数据
 if (obj.formData.gridCenterNode != '' && obj.formData.gridCenterNode != null) {
   //对接口返回的数据进行整理
      temp = obj.formData.gridCenterNode.replace("\"", "").replace("\"", "")
      tem1 = temp.substring(1, temp.length - 1)
      centrMarkers = [tem1.split(',')[0], tem1.split(',')[1]]
      console.log(centrMarkers)
      map = new BMap.Map("container");//初始化地图
      let point = new BMap.Point(centrMarkers[0], centrMarkers[1])
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom();
      marker = new BMap.Marker(point);
      map.addOverlay(marker);
   } else {
      centrMarkers = [102.70514021110947, 25.07732362444036]//默认中心点坐标
      map = new BMap.Map("container");
      let point = new BMap.Point(centrMarkers[0], centrMarkers[1])
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom();
      marker = new BMap.Marker(point);
      map.addOverlay(marker);
   }
 if((obj.formData.gridNode != '' && obj.formData.gridNode != null)||obj.showView){
   //修改网格边界
      obj.gridMapType = 'update'
      let arrNeed = JSON.parse(obj.formData.gridNode)//网格边界坐标
      let needPoint = []
      arrNeed.forEach(item=>{
        needPoint.push(new BMap.Point(item.lng, item.lat))
     })
     //绘制多边形
     polygon = new BMap.Polygon(needPoint, {strokeColor:"red",fillColor: "red", strokeWeight:3, strokeOpacity:0.8});   //创建折线
     map.addOverlay(polygon);   //增加折线
     if(obj.showView){
       polygon.disableEditing()
     }else {
       polygon.enableEditing()
     }
     polygon.addEventListener('lineupdate', (type, target) => {
       let path = type.currentTarget.getPath();
       let targetArr = []
       for (let i = 0; i < path.length; i++) {
         targetArr.push({lng:path[i].lng,lat:path[i].lat})
       }
         targetArr = JSON.stringify(targetArr)
         obj.formData.gridNode = targetArr
     })
}else{
//新增网格，绘制区域
    obj.gridMapType = 'add'
    //鼠标绘制完成回调方法   获取各个点的经纬度
    var overlays = [];
    var styleOptions = {
        strokeColor: "red", //边线颜色。
        fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3, //边线的宽度，以像素为单位。
        strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
     }
     //实例化鼠标绘制工具
     var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: true, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingMode: BMAP_DRAWING_POLYGON, //绘制模式  多边形
        drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
        offset: new BMap.Size(5, 5), //偏离值
        drawingModes: [
          BMAP_DRAWING_POLYGON
        ]
     },
     polygonOptions: styleOptions //多边形的样式
   });
  drawingManager.addEventListener('overlaycomplete', function (e) {
     overlays.push(e.overlay);
     let path = e.overlay.getPath(); //Array<Point> 返回多边型的点数组
     let targetArr = []
     for (let i = 0; i < path.length; i++) {
       console.log("lng:" + path[i].lng + "\n lat:" + path[i].lat);
       targetArr.push({lng:path[i].lng,lat:path[i].lat})
     }
     targetArr = JSON.stringify(targetArr)
     obj.formData.gridNode = targetArr
    });
  }
},

效果图：

1. 编辑网格边界
   
2. 新增网格，绘制边界
   单击鼠标标点——移动鼠标画折现——双击鼠标绘制结束
   
   绘制成功展示：

二、编辑网格中心节点坐标

initMap() {
	let obj = this
	let marker = []
	let centerMarke = []
	 let temp = ''
	 let tem1 = ''
	 let markers, map
	 if (obj.formData.gridCenterNode != '' && obj.formData.gridCenterNode != null) {
	 	temp = obj.formData.gridCenterNode.replace("\"", "").replace("\"", "")
	 	tem1 = temp.substring(1, temp.length - 1)
	 	centerMarke = [tem1.split(',')[0], tem1.split(',')[1]]
	 	map = new BMap.Map("mapContent");
	 	let point = new BMap.Point(centerMarke[0], centerMarke[1])
	 	map.centerAndZoom(point, 15);
	 	map.enableScrollWheelZoom();
	 	marker = new BMap.Marker(point);
	 	map.addOverlay(marker);
	 	marker.enableDragging();
	 	map.addEventListener('click', (e) => {
	 		map.removeOverlay(marker)
	 		marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
	 		map.addOverlay(marker);
	 		marker.enableDragging();
	 		let arr = [e.point.lng + ',' + e.point.lat]
	 		obj.centerMarker = arr
	 	})
	 } else {
	 	centerMarke = [102.70566637350713, 25.077097062450438]
	 	obj.centerMarker = centerMarke
	 	map = new BMap.Map("mapContent");
	 	let point = new BMap.Point(centerMarke[0], centerMarke[1])
	 	marker = new BMap.Marker(point);
	 	map.addOverlay(marker);
	 	map.centerAndZoom(point, 15);
	 	map.enableScrollWheelZoom();
	 	map.enableContinuousZoom();
	 	map.addEventListener('click', (e) => {
	 		map.removeOverlay(marker)
	 		marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
	 		map.addOverlay(marker);
	 		marker.enableDragging();
	 		let arr = [e.point.lng + ',' + e.point.lat]
	 		obj.centerMarker = arr
	 	})
	 }
},

效果图：
中心点通过鼠标拖动默认中心点进行改变