cesium画飞线_基于Cesium绘制抛物弧线
Cesium绘制抛物弧线,供大家参考,具体内容如下
在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录
思路
两点连线作为坐标轴,模拟抛物线,在线上取点画直线,主要用于高度/p>
取n个点,依次画线,得到近似的抛物线,点越多越光滑
JS代码
// 两点之间抛物线绘制函数,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);
运行可得到:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
cesium画飞线_基于Cesium绘制抛物弧线相关推荐
- cesium画飞线_Cesium+earthSD实现相机飞行动画
//创建相机跟随 createCameraFollow(line) {//var p1 = [ //[[DtoR(-122.174699), DtoR(37.433888), 0], [ 2.0991 ...
- python 画k线_使用matplotlib绘制k线图
利用matplotlib.finance绘制K线图时使用关键要点 绘制k线图的核心语句是: import matplotlib.finance as mpf mpf.candlestick_ochl( ...
- cesium实现飞线特效
效果如下 另外我这边做了4种飞线特效,是用不同的着色器来实现的 此效果依赖着色器,主要代码如下: 根据经纬度.高计算飞线数据 computeFlyline (point1,point2,h ) {le ...
- cesium 车流_基于Cesium的城市三维可视化地下管线系统的建立方法与流程
本发明属于虚拟三维管线领域,特别是涉及基于Cesium的城市三维可视化地下管线系统的建立方法. 背景技术: 随着我国经济的快速发展,城市规模也在不断地扩大,而城市地下管网的铺设力度也不断加大,城市地下 ...
- java 计算移动平均线_基于Java语言开发的个性化股票分析技术:移动平均线(MA)...
基于Java语言开发的个性化股票分析技术:移动平均线(MA) 基于 Java 语言开发的个性化股票分析技术:移动平均线(MA)移动平均线(MA)是以道·琼斯的"平均成本概念"为理论 ...
- python画资本市场线_使用matplotlib轻松绘制股票K线图
K线图是看懂股票走势的最基本知识,K线分为阴线和阳线,阴线和阳线都包含了最低价.开盘价.最高价和收盘价,一般都K线如下图所示: 度娘说:K线图源于日本德川幕府时代(1603-1867年),被当时日本米 ...
- 基于vue的svg画线_基于SVG的Vue图组件库
基于vue的svg画线 图表 (diagram-vue) A vue component library of diagrams. Vue组件图库. View Demo 查看演示 Download S ...
- python画资本市场线_【投资组合理论】Python绘制上证50成分股有效前沿和CML
马科维茨有效前沿是经典的资产配置模型,对于给定收益率,有效前沿上的投资组合风险最小. 初学时,感觉绘制有效前沿是个极其有难度的事情,基本不可能完成.后来学了Python的一些数值计算方法,才感觉用程序 ...
- autocad.net 画多段线_解决AutoCAD2014绘制多段线的详细教程--系统之家
AutoCAD2014如何绘制多线段?多段是由相连的直线和圆弧曲线组成的, 在直线和圆弧曲线之间可进行自由切换.用户可以设置多段线的宽度,也可以在不同的线段中设置不同的线宽.此外, 线段的始末端点也可 ...
最新文章
- 欲瘦其包,必先探清其底细
- 在ASP.NET MVC3项目中,自定义404错误页面
- mysql允许所有用户连接_Mysql权限控制 - 允许用户远程连接
- 此计算机无法设置密码,电脑该怎么设置密码
- Python3 色情图片识别
- oracle 本地数据库卸载,完美卸载Oracle数据库
- 加权平均数的例子_加权平均法举例说明
- 直播系统源码开发 JavaCV实现本机摄像头画面远程直播
- Character与char的区别
- 对接中国银联刷卡支付系统架构小demo
- wav文件隐写:Deepsound+TIFF图片PS处理( AntCTF x D^3CTF 2022 misc BadW3ter)
- 讨伐Cucumber行为驱动
- windows如何远程桌面mac
- ssh 修改超时时间
- 搭建Git远程仓库详细步骤(保姆级)
- mysql5.7错误提示ERROR 1265 (01000)的问题分析及解决方案和修改字段属性为中文
- iOS开发-使用OC搭建自己的Socket 包括服务端和客服端
- 猫眼电影是怎么从美团网长出来的?
- android点击选择相册,android: 从相册中选择照片
- css中width是什么意思,css width是什么意思