设为首页收藏本站
开启辅助访问
百度地图画圆：动态绘制显示圆半径 您所在的位置：网站首页 › 百度地图如何标记范围 › 百度地图画圆：动态绘制显示圆半径

百度地图画圆：动态绘制显示圆半径

2024-07-03 07:56| 来源: 网络整理| 查看: 265

百度地图画圆：动态绘制显示圆半径

    在开发百度地图时，项目需要借助画圆工具框选地图上的点，原始画圆工具可以通过 enableCalculate() 方法获取框选区域面积，进而可以计算圆的半径。 在这里插入图片描述     但怎么样才能够动态绘制显示如上图的圆半径呢？百度地图Polyline是根据两点进行绘制，只有有两点的坐标既可以绘制线，圆心centerPoint我们可以很好的获取，下面就是解决绘制圆外圈的点的信息。我们首先绘制圆，一步一步进行分析：

//绘制地图 var map = new BMap.Map('map'); var point = new BMap.Point(114.065537,22.553321); map.centerAndZoom(point , 13); map.enableScrollWheelZoom(); //圆的样式 var styleOptions = { strokeColor: "red", //边线颜色。 fillColor: "#DDD3D1", //填充颜色。当参数为空时，圆形将没有填充效果。 strokeWeight: 2, //边线的宽度，以像素为单位。 strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。 fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。 strokeStyle: 'solid' //边线的样式，solid或dashed。 }; //画圆 var drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否开启绘制模式 enableDrawingTool: false, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5) //偏离值 }, circleOptions: styleOptions, //圆的样式 }); drawingManager.open(); //drawingManager.enableCalculate(); //计算区域面积 drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);//

    要想获取圆心的坐标，我们可以通过查看drawingManager 下面包含什么：

circleOptions: {strokeColor: "red", fillColor: "#DDD3D1", strokeWeight: 2, strokeOpacity: 0.8, fillOpacity: 0.4, …} controlButton: "left" map: Ka {ba: "TANGRAM__1f", K: {…}, Ua: div#bdMyMap, width: 1396, height: 688, …} markerOptions: {} polygonOptions: {} polylineOptions: {} rectangleOptions: {} __listeners: {onoverlaycomplete: {…}} _drawingType: "circle" _enableCalculate: false _isOpen: true _map: Ka {ba: "TANGRAM__1f", K: {…}, Ua: div#bdMyMap, width: 1396, height: 688, …} _mask: e {_enableEdgeMove: true, _map: Ka, container: div, V: div, __listeners: {…}} _opts: {isOpen: false, enableDrawingTool: false, drawingToolOptions: {…}, circleOptions: {…}} __proto__: b.lang.Class

    因此，可以通过监听在地图上画圆的事件获取圆心：

var label=null; var polyline=null; map.addEventListener("mousemove", function () { if(drawingManager._mask!=null) { drawingManager._mask.addEventListener('mousedown',showCirle); map.removeEventListener("mousemove", showCirle); } }); var centerPoint=null;//圆心 var showCirle=function(e){ if (centerPoint == null) { debugger; centerPoint=e.point; drawingManager._mask.addEventListener("mousemove", showRadius);//showRadius计算画圆的半径，下面将进行讲解 //将获取的圆心，作为marker点添加再地图上 var maker = new BMap.Marker(e.point); map.addOverlay(maker); } };

    有圆心了，那么如何计算半径呢，我们只要获取另外一个点的坐标即可，通过 getDistance() 方法，进而计算圆的半径：

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

    通过上述，进而在画圆时，可以动态显示半径范围（如果想显示框选面积，可以通过 drawingManager.enableCalculate() 获取），结果如下： 在这里插入图片描述 参考来源：https://www.cnblogs.com/tly0512/p/3139657.html                  https://blog.csdn.net/Coder_Qiang/article/details/52155766?utm_source=blogxgwz5                  http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有