基于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 相关文章推荐
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
puppeteer实现html截图的示例代码
Jan 10 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
jQuery 连续列表实现代码
2009/12/21 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
python新手学习使用库
2020/06/11 Python
使用K.function()调试keras操作
2020/06/17 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
10个顶级Python实用库推荐
2021/03/04 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
在校学生职业规划范文
2014/01/08 职场文书
公司联欢会策划方案
2014/05/19 职场文书
农村党员对照检查材料
2014/09/24 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
nginx内存池源码解析
2021/11/20 Servers
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技