基于Cesium绘制抛物弧线


Posted in Javascript onNovember 18, 2020

Cesium绘制抛物弧线,供大家参考,具体内容如下

在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录

思路

两点连线作为坐标轴,模拟抛物线,在线上取点画直线,主要用于高度/p>

基于Cesium绘制抛物弧线

取n个点,依次画线,得到近似的抛物线,点越多越光滑

基于Cesium绘制抛物弧线

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绘制抛物弧线

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 程序编码规范
Nov 23 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
详解React 条件渲染
Jul 08 Javascript
使用javascript解析二维码的三种方式
Nov 11 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 #Vue.js
js实现简易计算器小功能
Nov 18 #Javascript
微信小程序实现购物车功能
Nov 18 #Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
微信小程序实现日历小功能
Nov 18 #Javascript
微信小程序实现底部弹出模态框
Nov 18 #Javascript
微信小程序实现左滑删除效果
Nov 18 #Javascript
You might like
PHP游戏编程25个脚本代码
2011/02/08 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
JavaScript中的类继承
2010/11/25 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
python合并文本文件示例
2014/02/07 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
Python线程同步的实现代码
2018/10/03 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
python仿抖音表白神器
2019/04/08 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
自主实习接收函
2014/01/13 职场文书
小班秋游活动方案
2014/02/22 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
中班教师个人总结
2015/02/05 职场文书
税务会计岗位职责
2015/04/02 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
运动会三级跳加油稿
2015/07/21 职场文书