基于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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
table行随鼠标移动变色示例
May 07 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
vue.js的安装方法
May 12 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 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
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
python简单实现获取当前时间
2016/08/27 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
python3中eval函数用法使用简介
2019/08/02 Python
python实现连连看游戏
2020/02/14 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
新闻学专业应届生求职信
2013/11/08 职场文书
三爱活动实施方案
2014/03/19 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
个人综合鉴定材料
2014/05/23 职场文书
七夕情人节促销方案
2014/06/07 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
2016年党建工作简报
2015/11/26 职场文书
五年级作文之成长
2019/09/16 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android