基于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中利用数组实现的循环队列代码
Jan 24 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
Vue中使用clipboard实现复制功能
Sep 05 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语法速查表
2007/01/02 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
python中字符串变二维数组的实例讲解
2018/04/03 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
社区敬老月活动实施方案
2014/02/17 职场文书
检讨书1000字
2014/10/11 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
详解pytorch创建tensor函数
2022/03/22 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python