Cesium绘制抛物线弧线
Cesium绘制抛物线弧线
想做一个行人轨迹的动态显示,在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录
思路
两点连线作为坐标轴,取线段中点画垂线作为y轴,在线上取一点作为开口向下的抛物线最高点
抛物线上取n个点,依次画直线,得到近似的抛物线,点越多越光滑
JS代码
动态线
// 两点之间抛物线绘制函数,twoPoints是一个数组:[lon1,lat1,lon2,lat2]
function animatedParabola(twoPoints) { // 动态抛物线绘制const startPoint = [twoPoints[0],twoPoints[1],0]; // 起点的经度、纬度const step = 80; // 自定义线段的数量,越多则越平滑const heightProportion = 0.125; // 自定义最高点和总距离的比值(即图中H比上AB的值),值越大则抛物线越弯曲const dLon = (twoPoints[2] - startPoint[0]) / step; // 经度差值const dLat = (twoPoints[3] - startPoint[1]) / step; // 纬度差值const deltaLon = dLon * Math.abs(111000*Math.cos(twoPoints[1])); // 经度差(米级)const deltaLat = dLat * 111000; // 纬度差(米),1纬度相差约111000米const endPoint = [0,0,0]; // 定义一个端点(后面将进行startPoint和endPoint两点画线)const heigh = Math.floor(step * Math.sqrt(deltaLon*deltaLon+deltaLat*deltaLat) * heightProportion);const x2 = 10000*Math.sqrt(dLon*dLon+dLat*dLat); // 小数点扩大10000倍,提高精确度const a = heigh / (x2*x2); // 抛物线函数中的afunction y(x, height) { // 模拟抛物线函数,求高度H// 此处模拟的函数为y = H - a*x^2 (H为高度常数),取整后返回return Math.floor(height - a*x*x);}for(let i = 1;i <= step; i++){ // 逐“帧”画线endPoint[0] = startPoint[0] + dLon; // 更新end点纬度endPoint[1] = startPoint[1] + dLat; // 更新end点纬度const x = x2*(2*i/step-1); // 求抛物线函数xendPoint[2] = y(x,heigh); // 求end点高度viewer.clock.currentTime = Cesium.JulianDate.now(); // 将时钟指针移到当前时间// 这里的viewer是容器初始化时new Cesium.Viewer构造的: var viewer = new Cesium.Viewer('mapContainer', {...});const 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) { // 抛物线绘制const startPoint = [twoPoints[0],twoPoints[1],0]; // 起点的经度、纬度const step = 80; // 自定义线段的数量,越多则越平滑(但过多浏览器缓存也会占用越多)const heightProportion = 0.125; // 最高点和总距离的比值const dLon = (twoPoints[2] - startPoint[0])/step; // 经度差值const dLat = (twoPoints[3] - startPoint[1])/step; // 纬度差值const deltaLon = dLon * Math.abs(111000*Math.cos(twoPoints[1])); // 经度差(米级)const deltaLat = dLat * 111000; // 纬度差(米),1纬度相差约111000米const endPoint = [0,0,0]; // 定义一个端点(后面将进行startPoint和endPoint两点画线)const heigh = Math.floor(step * Math.sqrt(deltaLon*deltaLon+deltaLat*deltaLat) * heightProportion);const x2 = (10000*Math.sqrt(dLon*dLon+dLat*dLat)); // 小数点扩大10000倍,提高精确度const a = (heigh/(x2*x2));function y(x, height) { return Math.floor(height - a*x*x); }for(let i = 1;i <= step; i++){ // 逐“帧”画线endPoint[0] = startPoint[0] + dLon; // 更新end点经度endPoint[1] = startPoint[1] + dLat; // 更新end点纬度const x = x2*(2*i/step-1); // 求抛物线函数xendPoint[2] = y(x,heigh); // 求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
const viewer = new Cesium.Viewer('mapContainer');
const twoPoints = [114.3698, 22.6139, 114.2135, 22.6127];
animatedParabola(twoPoints);
运行可得到:
Cesium绘制抛物线弧线相关推荐
- cesium画飞线_基于Cesium绘制抛物弧线
Cesium绘制抛物弧线,供大家参考,具体内容如下 在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录 思路 两点连线作为坐标轴,模拟抛物线,在线上取点画直线,主要用于高度/p> ...
- Cesium:绘制抛物线/散射线
Cesium:抛物线/散射线,可用于展示中心位置对于附近区域点的辐射关系,效果如下, 示例代码如下, 定义中心点和辐射点 //中心点const center = {name: "中心点&qu ...
- matlab绘制抛物线,MATLAB中绘制抛物线的图像,请补充完成下面代码: clc,clear; x=linspace(...
MATLAB中绘制抛物线的图像,请补充完成下面代码: clc,clear; x=linspace(-2,2,100); ____________; plot(x,y) 答: y=x.^2 在下列各项中 ...
- scratch教程----2.绘制抛物线
Hi!大家好,这里是Rocky丶的scratch教程--第二期, 这起我们来讲讲如何运用scratch绘制抛物线: 我们今天来讲两种"方法"绘制抛物线(两种精确度) 目录 开始讲解 ...
- 基于 React hooks + Typescript + Cesium 绘制四棱锥(视椎体)
文章目录 效果截图 功能介绍 实现思路 实现步骤 安装 react-dat-gui 库 创建四棱锥 根据参数面板更新视椎体参数 整体代码 效果截图 先上截图: 功能介绍 本例子基于 React hoo ...
- cesium绘制中国边界,设置边界样式
cesium绘制中国边界,设置边界样式,步骤如下: 步骤一: 从http://datav.aliyun.com/portal/school/atlas/area_selector网站下载geojson ...
- Unity中绘制抛物线
效果如下: 之所以加个2,是因为我以前写过一个抛物线的文章,之前的文章请看这: Unity绘制抛物线代码 上一篇文章只是简单地绘制了一个抛物线,但是无法随意移动或者旋转,最近因为做个项目可能会用到这个 ...
- cesium绘制动态线,多段线
动态线实现 传递顶点时,附加每个顶点距线段起点的距离,用此距离来实现线段分段 shader中对传入的距离取模,即可实现分段绘制不通的颜色 PolylineColorAppearance + Fabri ...
- php抛物线函数,js绘制抛物线代码分享
本文主要和大家分享js绘制抛物线代码,我们先和大大家展示效果图,具体方法大家来一起看代码吧,希望能帮助到大家. 效果图: 抛物线运动效果 body { overflow: hidden; } .bol ...
最新文章
- R语言偏相关或者部分相关性系数计算实战:使用psych包计算(Partial Correlation)偏相关系数、拟合回归模型使用两个回归模型的残差计算偏相关性系数
- python开发工具
- idea GsonFormat插件使用报错 StringIndexOutOfBoundsException: begin 0, end -1, length 9
- ITK:均值滤波的图像
- ITK:VTK图像到ITK图像
- 手动选择显示_QGIS 二次开发笔记(2)——显示图层
- [原]调试PInvoke导致的内存破坏
- mysql数值处理函数exp_mysql数值函数
- 捕捉Web页面子类错误堆栈中的信息
- 不用U盘安卓Linux系统,不用U盘,不要光驱,不需分区,windows下安装noilinux双系统...
- java project 连接hibernate 出错
- 深度学习网络训练中出现nan的原因分析
- android 集成融云客服,第三方客服
- SAP常用TCODE收藏
- 会计计算机学什么软件有哪些,会计学习软件
- 进销存管理系统基本功能
- Win10新电脑里的设备和驱动器下如何分盘
- 【等保小知识】安全等保是什么意思?是ccrc吗?
- mysql为什么用B+树
- 2010 ACR/EULAR 类风湿关节炎分类标准的应用:针对非常早期的滑膜炎患者与1987年ACR标准的比较...
热门文章
- 贵溪市网络营销信息源类别
- 2022 弱口令安全实验室招新赛-靶机挑战记录
- 推荐系统算法--ItemCF--MF(ALS)--FF
- python枪战项目计划书_用python分析了20万场吃鸡数据
- 【FFmpeg】avg_frame_rate 计算 及在TS 中使用
- inherit和initial:两个特殊的css值
- 使用 ERD Online元数据管理平台,轻松创建和共享企业元数据
- Oracle项目管理主数据之OBS
- python基础------绘制条形图、直方图、饼图、热力图、极坐标图、进度条
- 图解Esp32/ESP8266进行组网开发所需了解的那些小概念