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


第一件事 上图:

微信小程序 实现在底图上绘制扇形_第1张图片wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

第二件事:上代码:

 

/**
 * 
 * @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.示例代码:

 

 

 

你可能感兴趣的:(微信开发,微信小程序,map,扇形,绘制)