使用Cesium實(shí)現(xiàn)繪制一個(gè)拋物弧線

// 兩點(diǎn)之間拋物線繪制函數(shù)，twoPoints是一個(gè)數(shù)組：[lon1,lat1,lon2,lat2]
function animatedParabola(twoPoints) { //動(dòng)態(tài)拋物線繪制
 let startPoint = [twoPoints[0],twoPoints[1],0]; //起點(diǎn)的經(jīng)度、緯度
 let end = [twoPoints[2],twoPoints[3]]; //終點(diǎn)的經(jīng)度、緯度
 let step = 80; //線的數(shù)量，越多則越平滑
 let heightProportion = 0.125; //最高點(diǎn)和總距離的比值(即圖中H比上AB的值)
 let dLon = (end[0] - startPoint[0])/step; //經(jīng)度差值
 let dLat = (end[1] - startPoint[1])/step; //緯度差值
 let deltaLon = dLon * Math.abs(111000*Math.cos(twoPoints[1])); //經(jīng)度差(米級(jí))
 let deltaLat = dLat * 111000; //緯度差(米),1緯度相差約111000米
 let endPoint = [0,0,0]; //定義一個(gè)端點(diǎn)（后面將進(jìn)行startPoint和endPoint兩點(diǎn)畫線）
 let heigh = (step * Math.sqrt(deltaLon*deltaLon+deltaLat*deltaLat) * heightProportion).toFixed(0);
 let x2 = (10000*Math.sqrt(dLon*dLon+dLat*dLat)).toFixed(0); //小數(shù)點(diǎn)擴(kuò)大10000倍，提高精確度
 let a = (heigh/(x2*x2)); //拋物線函數(shù)中的a
 function y(x,height) { //模擬拋物線函數(shù)求高度
  //此處模擬的函數(shù)為y = H - a*x^2 (H為高度常數(shù))
  return height - a*x*x;
 }
 for(let i = 1;i <= step; i++){ //逐“幀”畫線
  endPoint[0] = startPoint[0] + dLon; //更新end點(diǎn)經(jīng)度
  endPoint[1] = startPoint[1] + dLat; //更新end點(diǎn)緯度
  let x = x2*(2*i/step-1); //求拋物線函數(shù)x
  endPoint[2] = (y(x,heigh)).toFixed(0); //求end點(diǎn)高度
  viewer.clock.currentTime = Cesium.JulianDate.now(); //將時(shí)鐘指針移到當(dāng)前時(shí)間
  //這里viewer是容器初始化時(shí)new Cesium.Viewer構(gòu)造的: var viewer = new Cesium.Viewer('mapContainer', {...});
  let IsoTime = Cesium.JulianDate.now(); //獲取當(dāng)前時(shí)間
  viewer.entities.add({ //添加動(dòng)態(tài)線
   polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights(startPoint.concat(endPoint)),
    width: 4,
    material: new Cesium.PolylineOutlineMaterialProperty({
     color: Cesium.Color.GOLD,
     outlineWidth: 0.3,
    })
   },
   availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ //設(shè)置顯示的時(shí)間區(qū)間
    start: {
     dayNumber: IsoTime.dayNumber,
     secondsOfDay: IsoTime.secondsOfDay+((i-1)*300),
    },
    stop: {
     dayNumber: IsoTime.dayNumber,
     secondsOfDay: IsoTime.secondsOfDay+(i*300),
    },
   })]),
  });
  viewer.entities.add({ //添加靜態(tài)線
   polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights(startPoint.concat(endPoint)),
    width: 4,
    material: new Cesium.PolylineGlowMaterialProperty({
     color: Cesium.Color.AQUA.withAlpha(0.9),
     outlineWidth: 0.3,
     glowPower : 0.3,
    })
   },
  });
  // end點(diǎn)變?yōu)閟tart點(diǎn)
  startPoint[0] = endPoint[0];
  startPoint[1] = endPoint[1];
  startPoint[2] = endPoint[2];
 }
 viewer.clock.shouldAnimate = true; //啟動(dòng)時(shí)鐘開始轉(zhuǎn)動(dòng)
 viewer.clock.multiplier = 1600; //時(shí)鐘轉(zhuǎn)動(dòng)速度
}

function parabola(twoPoints) { //拋物線繪制
 let startPoint = [twoPoints[0],twoPoints[1],0]; //起點(diǎn)的經(jīng)度、緯度
 let end = [twoPoints[2],twoPoints[3]]; //終點(diǎn)的經(jīng)度、緯度
 let step = 80; //線的多少，越多則越平滑(但過多瀏覽器緩存也會(huì)占用越多)
 let heightProportion = 0.125; //最高點(diǎn)和總距離的比值
 let dLon = (end[0] - startPoint[0])/step; //經(jīng)度差值
 let dLat = (end[1] - startPoint[1])/step; //緯度差值
 let deltaLon = dLon * Math.abs(111000*Math.cos(twoPoints[1])); //經(jīng)度差(米級(jí))
 let deltaLat = dLat * 111000; //緯度差(米),1緯度相差約111000米
 let endPoint = [0,0,0]; //定義一個(gè)端點(diǎn)（后面將進(jìn)行startPoint和endPoint兩點(diǎn)畫線）
 let heigh = (step * Math.sqrt(deltaLon*deltaLon+deltaLat*deltaLat) * heightProportion).toFixed(0);
 let x2 = (10000*Math.sqrt(dLon*dLon+dLat*dLat)).toFixed(0); //小數(shù)點(diǎn)擴(kuò)大10000倍，提高精確度
 let a = (heigh/(x2*x2));
 function y(x,height) { return height - a*x*x; }
 for(var i = 1;i <= step; i++){ //逐“幀”畫線
  endPoint[0] = startPoint[0] + dLon; //更新end點(diǎn)經(jīng)度
  endPoint[1] = startPoint[1] + dLat; //更新end點(diǎn)緯度
  let x = x2*(2*i/step-1); //求拋物線函數(shù)x
  endPoint[2] = (y(x,heigh)).toFixed(0); //求end點(diǎn)高度
  viewer.entities.add({ //添加靜態(tài)線
   polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights(startPoint.concat(endPoint)),
    width: 4,
    material: new Cesium.PolylineGlowMaterialProperty({
     color: Cesium.Color.AQUA.withAlpha(0.9),
     outlineWidth: 0.3,
     glowPower : 0.3,
    })
   },
  });
  // end點(diǎn)變?yōu)閟tart點(diǎn)
  startPoint[0] = endPoint[0];
  startPoint[1] = endPoint[1];
  startPoint[2] = endPoint[2];
 }
}

// An Example
var viewer = new Cesium.Viewer('mapContainer');
var twoPoints = [114.3698, 22.6139, 114.2135, 22.6127];
animatedParabola(twoPoints);