// 兩點之間拋物線繪制函數，twoPoints是一個數組：[lon1,lat1,lon2,lat2]
function animatedParabola(twoPoints) { //動態拋物線繪制
 let startPoint = [twoPoints[0],twoPoints[1],0]; //起點的經度、緯度
 let end = [twoPoints[2],twoPoints[3]]; //終點的經度、緯度
 let step = 80; //線的數量，越多則越平滑
 let heightProportion = 0.125; //最高點和總距離的比值(即圖中H比上AB的值)
 let dLon = (end[0] - startPoint[0])/step; //經度差值
 let dLat = (end[1] - startPoint[1])/step; //緯度差值
 let deltaLon = dLon * Math.abs(111000*Math.cos(twoPoints[1])); //經度差(米級)
 let deltaLat = dLat * 111000; //緯度差(米),1緯度相差約111000米
 let endPoint = [0,0,0]; //定義一個端點（后面將進行startPoint和endPoint兩點畫線）
 let heigh = (step * Math.sqrt(deltaLon*deltaLon+deltaLat*deltaLat) * heightProportion).toFixed(0);
 let x2 = (10000*Math.sqrt(dLon*dLon+dLat*dLat)).toFixed(0); //小數點擴大10000倍，提高精確度
 let a = (heigh/(x2*x2)); //拋物線函數中的a
 function y(x,height) { //模擬拋物線函數求高度
  //此處模擬的函數為y = H - a*x^2 (H為高度常數)
  return height - a*x*x;
 }
 for(let i = 1;i <= step; i++){ //逐“幀”畫線
  endPoint[0] = startPoint[0] + dLon; //更新end點經度
  endPoint[1] = startPoint[1] + dLat; //更新end點緯度
  let x = x2*(2*i/step-1); //求拋物線函數x
  endPoint[2] = (y(x,heigh)).toFixed(0); //求end點高度
  viewer.clock.currentTime = Cesium.JulianDate.now(); //將時鐘指針移到當前時間
  //這里viewer是容器初始化時new Cesium.Viewer構造的: var viewer = new Cesium.Viewer('mapContainer', {...});
  let IsoTime = Cesium.JulianDate.now(); //獲取當前時間
  viewer.entities.add({ //添加動態線
   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({ //設置顯示的時間區間
    start: {
     dayNumber: IsoTime.dayNumber,
     secondsOfDay: IsoTime.secondsOfDay+((i-1)*300),
    },
    stop: {
     dayNumber: IsoTime.dayNumber,
     secondsOfDay: IsoTime.secondsOfDay+(i*300),
    },
   })]),
  });
  viewer.entities.add({ //添加靜態線
   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點變為start點
  startPoint[0] = endPoint[0];
  startPoint[1] = endPoint[1];
  startPoint[2] = endPoint[2];
 }
 viewer.clock.shouldAnimate = true; //啟動時鐘開始轉動
 viewer.clock.multiplier = 1600; //時鐘轉動速度
}

function parabola(twoPoints) { //拋物線繪制
 let startPoint = [twoPoints[0],twoPoints[1],0]; //起點的經度、緯度
 let end = [twoPoints[2],twoPoints[3]]; //終點的經度、緯度
 let step = 80; //線的多少，越多則越平滑(但過多瀏覽器緩存也會占用越多)
 let heightProportion = 0.125; //最高點和總距離的比值
 let dLon = (end[0] - startPoint[0])/step; //經度差值
 let dLat = (end[1] - startPoint[1])/step; //緯度差值
 let deltaLon = dLon * Math.abs(111000*Math.cos(twoPoints[1])); //經度差(米級)
 let deltaLat = dLat * 111000; //緯度差(米),1緯度相差約111000米
 let endPoint = [0,0,0]; //定義一個端點（后面將進行startPoint和endPoint兩點畫線）
 let heigh = (step * Math.sqrt(deltaLon*deltaLon+deltaLat*deltaLat) * heightProportion).toFixed(0);
 let x2 = (10000*Math.sqrt(dLon*dLon+dLat*dLat)).toFixed(0); //小數點擴大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點經度
  endPoint[1] = startPoint[1] + dLat; //更新end點緯度
  let x = x2*(2*i/step-1); //求拋物線函數x
  endPoint[2] = (y(x,heigh)).toFixed(0); //求end點高度
  viewer.entities.add({ //添加靜態線
   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點變為start點
  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);