leaflet曲线2

fk129

已于 2022-06-17 15:05:31 修改

阅读量1.2k

点赞数 4

分类专栏： leaflet 文章标签： leaflet gis

于 2022-06-17 08:58:58 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36061522/article/details/125326764

版权

leaflet 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用贝塞尔曲线算法来处理地理坐标点，提供了一个函数getBezierLine来计算连续两点间的曲线，并通过getBezierPoint函数详细阐述了如何获取两点之间的贝塞尔曲线坐标点。重点在于坐标点的计算和路径的生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

贝塞尔曲线

/**
* 获取坐标点集合的贝塞尔曲线
* @param {*} latlngs  坐标点集合  
*/
 getBezierLine(latlngs){
    let paths = [],   
        num = 200   // 返回坐标点个数
    for(let i = 0;i < latlngs.length - 1;i++){
        let path = this.getBezierPoint(latlngs[i], latlngs[i+1], num) 
        if(i != 0) path = path.slice(1)   
        paths = paths.concat(path)
    }
    return paths
},


/**
 * 获取两点间贝赛尔曲线坐标点
 * @param {*} point_start 开始坐标
 * @param {*} point_end 结束坐标
 * @param {*} num  返回坐标个数
 * @returns 
 */
getBezierPoint(point_start, point_end, num = 100){
    // 地理坐标转换成像素坐标
    var startPoint = {x: point_start.lat, y: point_start.lng}
    var endPoint = {x: point_end.lat, y: point_end.lng}
    //求出相对的第三个点，用于固定曲线的弯曲度，
    // 已知两点p1(x1,y1)、p2(x2,y2)和两点所对应的角度A和B,x3、y3是对应第三点的坐标
    //x3 = (x1*cotB+x2*cotA+y2-y1)/(cotA+cotB)
    //y3 = (y1*cotB+y2*cotA+x1-x2)/(cotA+cotB)
    let angleValue = 2.14    // 对应角度值
    let x3 = (startPoint.x*angleValue+endPoint.x*angleValue-startPoint.y+endPoint.y)/(2*angleValue)
    let y3 = (startPoint.y*angleValue+endPoint.y*angleValue-endPoint.x+startPoint.x)/(2*angleValue)
    // 计算两点的贝塞尔曲线坐标集合
    let paths=[];
    for(let i = 0;i <= num;i++){
        let t = i / num;
        let x = (1 - t) * (1 - t) * startPoint.x + 2 * t * (1 - t) * x3 + t * t * endPoint.x;
        let y = (1 - t) * (1 - t) * startPoint.y + 2 * t * (1 - t) * y3 + t * t * endPoint.y;
        // 坐标
        let res_point = new L.latLng([x,y])
        paths.push(res_point);
    }
    return paths;
},