Vue利用百度地图画圆并且获取圆心坐标和半径

程序员文章站 2022-05-21 09:22:49

...

Vue利用百度地图画圆并且获取圆心坐标和半径

这个东西不好整，既要使用Vue接入百度地图，又要画圆。

Vue接入百度地图

Vue 接入百度地图其实是有插件的，vue-baidu-map 这个插件有官网，直接 npm install 就可以。

vue-baidu-map API接口： https://dafrok.github.io/vue-baidu-map/#/

然后教程啥的都写的很清晰，包括安装和使用，自己就接进去了，但是画圆获取圆心坐标和半径有点问题，可能不满足这个需求，所以说就得用百度地图官网的API接口，看一眼：

Vue利用百度地图画圆并且获取圆心坐标和半径
在最后的 “辅助工具” 里面的 “鼠标绘制功能(GL)” 就可以绘制圆形。

所以说我们首先得在Vue项目中引入原生的百度API接口。

引入原生的百度地图API

在 index.html 文件中引入百度地图API连接

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=这里填写你申请的key值"></script>

在使用地图的组件里面创建一个div用来展示地图，记住，一定要给这个div设置宽和高，不然显示不出来，不要太相信100%的方式设置宽高。

<div id="container" style="height:500px;width=700px"></div>

然后写一个方法来初始化百度地图，创建的方法在 created 里面调用

 mounted() {
    this.init();
  },
  methods: {
    init() {
      this.map = new window.BMapGL.Map("container", { enableMapClick: false }); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
      this.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
	}
}

注意哈，BMap可能找不到，也许是一定找不到，会说没有找到方法之类的错，记住，在BMap这些百度自带的对象前面加 window. 就可以了，就像上面一样。

好了，按照上面的样子，百度地图就引进来了，但是哈，不建议这样用，用插件就可以，特别好，但是呢，因为这个项目需求不能使用插件，因为插件不支持画圆获取坐标的功能，只能这样凑合着用。

画圆获取中心点坐标和半径

然后就是画圆了，这个东西不好整，官网给的demo就是单纯的画一个圆，没有说怎么拿到中心点坐标和半径，尽管给你展示出来了，但好像没有给提供接口拿数据，也是做了很多的准备，查阅了很多的资料才整理出来一个小的demo，但是有瑕疵，一会再说问题出在哪里。

先看官网案例： http://lbsyun.baidu.com/jsdemo.htm#gl_tool_2

首先在 index.html 文件中引入需要的 js 文件，就写在上一个需要你填key值得那句代码下面就行：

<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>
    <ul style="soild 1px yellow" class="drawing-panel">
      <li class="bmap-btn bmap-circle" id="circle" @click="draw($event)"></li>
    </ul>
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: "", // 地图对象
      drawingManager: "", // 绘制管理器
      centerPoint: null, // 中心点
      label: null,
      polyline: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.map = new window.BMapGL.Map("container", { enableMapClick: false }); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
      this.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

      var styleOptions = {
        strokeColor: "#5E87DB", // 边线颜色
        fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
        strokeWeight: 2, // 边线宽度，以像素为单位
        strokeOpacity: 1, // 边线透明度，取值范围0-1
        fillOpacity: 0.2 // 填充透明度，取值范围0-1
      };
      var labelOptions = {
        borderRadius: "2px",
        background: "#FFFBCC",
        border: "1px solid #E1E1E1",
        color: "#703A04",
        fontSize: "12px",
        letterSpacing: "0",
        padding: "5px"
      };

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

      //添加鼠标绘制工具监听事件，用于获取绘制结果
      this.drawingManager.addEventListener(
        "overlaycomplete",
        this.overlaycomplete
      );
      // 给地图添加鼠标移动监听事件
      this.map.addEventListener("mousemove", () => {
        if (this.drawingManager._mask != null) {
          this.drawingManager._mask.addEventListener("mousedown", this.showCirle);
          this.map.removeEventListener("mousemove", this.showCirle);
        }
      });
    },

    /**
     * 画圆
     */
    draw(event) {
      this.centerPoint = null; // 中心点
      this.label = null;
      this.polyline = null;
      var arr = document.getElementsByClassName("bmap-btn");
      for (var i = 0; i < arr.length; i++) {
        arr[i].style.backgroundPositionY = "0";
      }
      event.target.style.backgroundPositionY = "-52px";
      switch (event.target.id) {
        case "marker": {
          var drawingType = BMAP_DRAWING_MARKER;
          break;
        }
        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;
        }
      }
      // 进行绘制
      if (
        this.drawingManager._isOpen &&
        this.drawingManager.getDrawingMode() === drawingType
      ) {
        this.drawingManager.close();
      } else {
        this.drawingManager.setDrawingMode(drawingType);
        this.drawingManager.open();
      }
    },

    overlaycomplete(event) {
      console.log("完成绘制：------> ", event)
      console.log(this.centerPoint);
      console.log(this.label);
      console.log(this.polyline);
      this.centerPoint = null; // 中心点
      this.label = null;
      this.polyline = null;
    },

    showCirle(event) {
      // 如果中心点是null
      if (this.centerPoint == null) {
        this.centerPoint = event.point; // 给中心点设置新的值
        this.drawingManager._mask.addEventListener("mousemove", this.showRadis);
        // var maker = new window.BMapGL.Marker(event.point);
        // this.map.addOverlay(maker);
      }
    },

    /**
     * 花半径
     */
    showRadis(event) {
      var radius = this.drawingManager._map.getDistance(
        this.centerPoint,
        event.point
      );
      if (!isNaN(radius)) {
        this.map.removeOverlay(this.label); //清除上一个显示半径的label标注
        this.map.removeOverlay(this.polyline); //清除上一个圆的半径直线
        //添加文字标签
        var opts = {
          position: event.point, // 指定文本标注所在的地理位置（当前鼠标的位置）
          offset: new window.BMapGL.Size(5, -15) //设置文本偏移量
        };
        this.label = new window.BMapGL.Label(
          (radius / 1000).toFixed(2) + "公里",
          opts
        ); // 创建文本标注对象
        //文本标注样式
        this.label.setStyle({
          color: "#438eff",
          //fontSize:'14px',
          fontWeight: "bold",
          border: "0px solid #ccc",
          backgroundColor: "" //#2267AD
        });
        //从圆心画半径
        this.polyline = new window.BMapGL.Polyline(
          [this.centerPoint, event.point],
          {
            strokeColor: "red",
            strokeWeight: 2,
            strokeOpacity: 0.5
          }
        ); //后面参数为划线的样式
        this.map.addOverlay(this.polyline); //添加半径直线
        this.map.addOverlay(this.label); //添加label
      }
    }
  }
};
</script>

<style>
body,
html,
#container {
  width: 100%;
  height: 500px;
  margin: 0;
  font-family: "微软雅黑";
}
ul li {
  list-style: none;
}
.info {
  z-index: 999;
  width: auto;
  min-width: 22rem;
  padding: 0.75rem 1.25rem;
  margin-left: 1.25rem;
  position: fixed;
  top: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  font-size: 14px;
  color: #666;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.drawing-panel {
  z-index: 999;
  position: fixed;
  bottom: 3.5rem;
  margin-left: 2.5rem;
  padding-left: 0;
  border-radius: 0.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;
}
</style>

最后的效果

Vue利用百度地图画圆并且获取圆心坐标和半径

存在问题

有些问题我不好解决，就一直留着在这里总结一下，有需要的大佬看一下能不能帮忙修改一下。

点击对号之后效果是对的，但是点击叉号之后，那个自己绘制的半径和xx公里一直存在，而且在画图会受影响，但是只要点击了对号就不影响，就是因为数据没有初始化，我想获取一下点击叉号的点击事件，然后初始化一下就可以，但是不会。
鼠标把圆拖出来之后，如果在拖动圆的按键来继续扩大或减小圆的大小，这个代码就没治了，因为代码里面没有监听，关键是不知道怎么监听，真尴尬。

【参考源码】：https://gitee.com/wjw1014/vue_learning_vuex/blob/master/src/components/map.vue