贝塞尔曲线根据控制点转换Google地图坐标点

A . 阿冰

于 2024-09-29 16:39:24 发布

阅读量163

点赞数 7

文章标签： google map 算法 js

本文链接：https://blog.csdn.net/weixin_43824144/article/details/142638372

版权

先定义生成贝塞尔曲线方法

本文中坐标格式是Google格式例：new google.maps.LatLng(lat, lng)

/*
 * 二次贝塞尔曲线（二次贝塞尔有一个控制点）
 * t 生成点在第几位
*/
calculateQuadraticBezierPoint(t, P0, P1, P2) {
   var x =
       Math.pow(1 - t, 2) * P0.lat() +
       2 * (1 - t) * t * P1.lat() +
       Math.pow(t, 2) * P2.lat();
   var y =
       Math.pow(1 - t, 2) * P0.lng() +
       2 * (1 - t) * t * P1.lng() +
       Math.pow(t, 2) * P2.lng();
   return new google.maps.LatLng(x, y);
}
// 
/*
 * 三次贝塞尔曲线（二次贝塞尔有两个控制点）
 * t 生成点在第几位
*/
calculateBezierPoint(t, P0, P1, P2, P3) {
   var x =
       Math.pow(1 - t, 3) * P0.lat() +
       3 * Math.pow(1 - t, 2) * t * P1.lat() +
       3 * (1 - t) * Math.pow(t, 2) * P2.lat() +
       Math.pow(t, 3) * P3.lat();
   var y =
       Math.pow(1 - t, 3) * P0.lng() +
       3 * Math.pow(1 - t, 2) * t * P1.lng() +
       3 * (1 - t) * Math.pow(t, 2) * P2.lng() +
       Math.pow(t, 3) * P3.lng();
   return new google.maps.LatLng(x, y);
}

/*
 * 生成贝塞尔曲线上的点
 * P0 起点坐标 
 * P1 第一个控制点坐标 
 * P1 第二个控制点坐标 
 * P2 结束点坐标
 * numPoints 两点之间需要创建多少个点
*/
generateBezierCurve(P0, P1, P2, P3, numPoints) {
    var curvePoints = [];
    for (var i = 0; i <= numPoints; i++) {
        var t = i / numPoints;
        if (P3) {
            curvePoints.push(this.calculateBezierPoint(t, P0, P1, P2, P3));
        } else {
            curvePoints.push(this.calculateQuadraticBezierPoint(t, P0, P1, P2));
        }
    }
    return curvePoints;
}

如果要连线的话


/*
 * 两点之间连接曲线
 * 100 代表在两点中间创建100个点
*/
new google.maps.Polyline({
    path: generateBezierCurve(P0, P1, P2, P3, 100),
    strokeColor: '#FFF',
    strokeOpacity: 0.8,
    strokeWeight: 4,
    map: xxx
});