cesium之飛線數據獲取（貝塞爾曲線轉換）

cesium之飛線數據獲取（貝塞爾曲線轉換）

最近研究了一下飛線生成的原理，找到一種實現方法。

以下：x指經度，y指緯度，h指飛線高度

原理：

　　1.通過兩個點和飛線高度計算出控制貝塞爾曲線弧度的第三個點

　　2.將三個點的（y， h）傳入貝塞爾曲線算法，得到一條垂直於地面的貝塞爾曲線點數組arr

　　3.通過兩點的直線公式，獲取數組arr中每個點的x值，得到空間曲線數組

代碼：

// 貝塞爾曲線二維轉三維  返回一個三維點數組
// 參數： x1,y1,x2,y2,h 兩點經緯度坐標和飛線高度
export function getBSRPoints (x1,y1,x2,y2,h) {
  let point1 = [y1, 0]
  let point2 = [(y2+y1)/2, h]
  let point3 = [y2, 0]
  let arr = getBSR(point1, point2, point3)
  let arr3d = []
  for (let i in arr) {
    let x = (x2-x1)*(arr[i][0]-y1)/(y2-y1) + x1
    arr3d.push([x, arr[i][0], arr[i][1]])
  }
  return arr3d
}
// 生成貝塞爾曲線
function getBSR (point1, point2, point3) {
  var ps = [{ x: point1[0], y: point1[1] }, { x: point2[0], y: point2[1] }, { x: point3[0], y: point3[1] }]
  let guijipoints = CreateBezierPoints(ps, 100);
  return guijipoints
}
// 貝賽爾曲線算法
// 參數：
// anchorpoints: [{ x: 116.30, y: 39.60 }, { x: 37.50, y: 40.25 }, { x: 39.51, y: 36.25 }]
function CreateBezierPoints(anchorpoints, pointsAmount) {
  var points = [];
  for (var i = 0; i < pointsAmount; i++) {
    var point = MultiPointBezier(anchorpoints, i / pointsAmount)
    points.push([point.x, point.y]);
  }
  return points;
}
function MultiPointBezier(points, t) {
  var len = points.length;
  var x = 0, y = 0;
  var erxiangshi = function (start, end) {
    var cs = 1, bcs = 1;
    while (end > 0) {
      cs *= start;
      bcs *= end;
      start--;
      end--;
    }
    return (cs / bcs);
  };
  for (var i = 0; i < len; i++) {
    var point = points[i];
    x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
    y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
  }
  return { x: x, y: y };
}

調用：

　　引入以上代碼文件，調用getBSRPoints方法即可獲取飛線數據，將其賦予動態材質，即可實現飛線。

　　動態材質見：https://www.cnblogs.com/s313139232/p/12804734.html

注意：

　　以上方法獲取到的數據格式為[[x,y,z],[x,y,z],[x,y,z],[x,y,z]],而cesium創建線fromDegreesArrayHeights方法需要的數據格式為：[x,y,z,x,y,z,x,y,z，x,y,z]

　　將一下方法加入上面文件中調用即可：

export function getBSRxyz (x1,y1,x2,y2,h) {
  let arr3d = getBSRPoints(x1,y1,x2,y2,h)
  let arrAll = []
  for (let i in arr3d) {
    arrAll.push(arr3d[i][0])
    arrAll.push(arr3d[i][1])
    arrAll.push(arr3d[i][2])
  }
  return arrAll
}

 

 

 

鑽研不易，轉載請注明出處。。。。。。