介绍
今天就跟大家聊聊有关使用铯实现绘制一个抛物弧线,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强>思路
两点连线作为坐标轴,模拟抛物线,在线上取点画直线,主要用于高度/p>
取n个点,依次画线,得到近似的抛物线、点越多越光滑
<强> JS代码
//两点之间抛物线绘制函数,两点是一个数组:[lon1, lat1 lon2, lat2]
函数animatedParabola(两点){//动态抛物线绘制
让曾经繁荣=[两点[0],两点[1],0];//起点的经度,纬度
我们结束=[两点[2],两点[3]];//终点的经度,纬度
让一步=80;//线的数量,越多则越平滑
让heightProportion=0.125;//最高点和总距离的比值(即图中H比上AB的值)
让dLon=([0]——曾经繁荣[0])/步骤;//经度差值
让dLat=([1]——曾经繁荣[1])/步骤;//纬度差值
让deltaLon=dLon * Math.abs (111000 * Math.cos(两点[1]));//经度差(米级)
让deltaLat=dLat * 111000;//纬度差(米),1纬度相差约111000米
让端点=(0,0,0);//定义一个端点(后面将进行曾经繁荣和端点两点画线)
让嗨!=(步骤* Math.sqrt (deltaLon * deltaLon + deltaLat * deltaLat) * heightProportion) .toFixed (0);
让x2=(10000 * Math.sqrt (dLon * dLon + dLat * dLat)) .toFixed (0);//小数点扩大10000倍,提高精确度
让一个=(嗨!/(x2 * x2));//抛物线函数中的一个
函数y (x,高度){//模拟抛物线函数求高度//此处模拟的函数为y=x ^ 2 H - * (H为高度常数)
返回的高度——* * x;
}
(让我=1;我& lt;=步骤;我+ +){//逐“帧”画线
端点[0]=曾经繁荣[0]+ dLon;//更新结束点经度
端点[1]=曾经繁荣[1]+ dLat;//更新结束点纬度
让x=x2 *(2 *我/步骤1);//求抛物线函数x
端点[2]=(y (x,嗨!)).toFixed (0);//求结束点高度
viewer.clock。currentTime=Cesium.JulianDate.now ();//将时钟指针移到当前时间//这里查看器是容器初始化时新的铯。观众观众构造的:var=new Cesium.Viewer (& # 39; mapContainer& # 39;, {…});
让IsoTime=Cesium.JulianDate.now ();//获取当前时间
viewer.entities。添加({//添加动态线
多段线:{
职位:Cesium.Cartesian3.fromDegreesArrayHeights (startPoint.concat(端点)),
宽度:4
材料:新Cesium.PolylineOutlineMaterialProperty ({
颜色:Cesium.Color.GOLD,
outlineWidth: 0.3,
})
},
可用性:新铯。TimeIntervalCollection([新铯。TimeInterval({//设置显示的时间区间
开始:{
dayNumber: IsoTime.dayNumber,
secondsOfDay: IsoTime.secondsOfDay +((张)* 300),
},
站:{
dayNumber: IsoTime.dayNumber,
secondsOfDay: IsoTime.secondsOfDay +(我* 300),
},
}))),
});
viewer.entities。添加({//添加静态线
多段线:{
职位:Cesium.Cartesian3.fromDegreesArrayHeights (startPoint.concat(端点)),
宽度:4
材料:新Cesium.PolylineGlowMaterialProperty ({
颜色:Cesium.Color.AQUA.withAlpha (0.9),
outlineWidth: 0.3,
glowPower: 0.3,
})
},
});//结束点变为开始点
曾经繁荣[0]=端点[0];
曾经繁荣[1]=端点[1];
曾经繁荣[2]=端点[2];
}
viewer.clock。shouldAnimate=true;//启动时钟开始转动
viewer.clock。乘数=1600;//时钟转动速度
} 函数抛物线(两点){//抛物线绘制
让曾经繁荣=[两点[0],两点[1],0];//起点的经度,纬度
我们结束=[两点[2],两点[3]];//终点的经度,纬度
让一步=80;//线的多少,越多则越平滑(但过多浏览器缓存也会占用越多)
让heightProportion=0.125;//最高点和总距离的比值
让dLon=([0]——曾经繁荣[0])/步骤;//经度差值
让dLat=([1]——曾经繁荣[1])/步骤;//纬度差值
让deltaLon=dLon * Math.abs (111000 * Math.cos(两点[1]));//经度差(米级)
让deltaLat=dLat * 111000;//纬度差(米),1纬度相差约111000米
让端点=(0,0,0);//定义一个端点(后面将进行曾经繁荣和端点两点画线)
让嗨!=(步骤* Math.sqrt (deltaLon * deltaLon + deltaLat * deltaLat) * heightProportion) .toFixed (0);
让x2=(10000 * Math.sqrt (dLon * dLon + dLat * dLat)) .toFixed (0);//小数点扩大10000倍,提高精确度
让一个=(嗨!/(x2 * x2));
函数y (x,高度){返回高度——* * x;}
(var i=1;我& lt;=步骤;我+ +){//逐“帧”画线
端点[0]=曾经繁荣[0]+ dLon;//更新结束点经度
端点[1]=曾经繁荣[1]+ dLat;//更新结束点纬度
让x=x2 *(2 *我/步骤1);//求抛物线函数x
端点[2]=(y (x,嗨!)).toFixed (0);//求结束点高度
viewer.entities。添加({//添加静态线
多段线:{
职位:Cesium.Cartesian3.fromDegreesArrayHeights (startPoint.concat(端点)),
宽度:4
材料:新Cesium.PolylineGlowMaterialProperty ({
颜色:Cesium.Color.AQUA.withAlpha (0.9),
outlineWidth: 0.3,
glowPower: 0.3,
})
},
});//结束点变为开始点
曾经繁荣[0]=端点[0];
曾经繁荣[1]=端点[1];
曾经繁荣[2]=端点[2];
}
}使用铯实现绘制一个抛物弧线
