微信小程序 实现在底图上绘制扇形

第一件事 上图：

​

第二件事：上代码:

 

/**
 * 
 * @angle 传入的方位角
 * @ll 初始点坐标
 * @return 返回坐标点集合
 */
function logPoint(angle, ll) {
  var lls = [];
  lls.push({ longitude: ll.JD, latitude: ll.WD })
  var a = 75;//半径
  angle = angle - 20 > 0 ? angle - 20 : angle + 340;//更具方位角算出，扇形弧边的初始位置。

  var b, c;// 边长,a是圆半径固定是50，b是高（Y轴），C是长（X轴）
  var B;// 角度，设定B是向量-变化
  for (var i = 0; i < 10; i++) {
    var g = angle + i * 4;
    g = g > 360 ? g - 360 : g;
    var B = g / (180 / Math.PI);//Math中使用的是弧度并不是角度，所以将角度转换成弧度(180/π)°角度
    //  B = angleCenter < 360 ? angleCenter : angleCenter - 360
    // b = a * Math.sin(B);
    // c = a * Math.cos(B);
    b = a * Math.sin(B);
    c = a * Math.cos(B);

    // 1.同一纬线上经度差一度,实际距离差多少
    // 111km*cosφ （φ为当地纬度）
    // 2.同一经线上纬度差一度,实际距离差多少
    // 111km
    b = b / (111000 * Math.cos(ll.JD)) + ll.JD;
    c = c / 111000 + ll.WD;
    lls.push({
      angle: B,
      longitude: b,
      latitude: c,
    });
  }
  console.log(lls)
  return lls;
}

测试代码：

    var m = util.logPoint(30, {
        JD:jd,
        WD: wd,
      });
      pl.push({
        points: m,
        fillColor: "#00CC0030",
        strokeColor: "#0066FF",
        strokeWidth: 2,
        zIndex: 1
      })

    }

    this.setData({
      polygons: pl,//与map组件中的参数对应
    })

第三件事：填坑：

1.方法写在util.js中，所以不要忘记在js中导入module.exports = {

  logPoint: logPoint,

}  

在条用的页面中别忘记添加;var util = require('../../utils/util.js');

2.返回的结果是一个坐标点对象集合：

 angle: B,用于输出方位角

      longitude: b,经度，这个要和map中的面积和参数名保持一致否则读取失败

      latitude: c,纬度，同上

3.代码中前面使用了JD，WD，可以自己适当修改。

4.重点：4.1在界面中是通过找到每一个角度上的坐标点，来通过点连成面的，在实际过程中，需要小型超过360度情况的存在，用三目判断一下

var g = angle + i * 4;

    g = g > 360 ? g - 360 : g;

4.2  var B = g / (180 / Math.PI);//Math中使用的是弧度并不是角度，所以将角度转换成弧度(180/π)°角度

4.3 计算的时候是通过弧度，所以不用担心是角度问题，sin和cos本身就是在1导-1之间滑动的。

4.4最后加上计算的增加幅度在经纬度上变化的实际值。

有错误的地方希望指出一起学习进步！

5.示例代码：