Cesium 贝塞尔曲线、抛物线（笔记）

生成曲线接口

//实例化工具类
var newutiltool = new utiltool();
var positionList = [114.02048399607341, 22.757323501356566,114.01985896451872,22.759784413255586,114.01960650640102,22.757819762637702];
var positionsshow = newutiltool.createcurveline(positionList);
var e= viewer.entities.add({name: "Red line on terrain",polyline: {positions: positionsshow,width: 5,material: Cesium.Color.RED,clampToGround: true,},});

效果图：

打印结果：

贝塞尔曲线源码

偷懒一下，各位可以查看一下文献
贝塞尔曲线

生成抛物线

var startPoint1 = Cesium.Cartesian3.fromDegrees(114.049505, 22.528752, 1.9);
var endPoint1 = Cesium.Cartesian3.fromDegrees(114.060201,22.529449, 1.8);
var height1 = 10000;//抛物线高度
var pointnum1 = 40;//返回多少个点
var parabolapositions1 = newutiltool.getParabolaPositions(startPoint1,endPoint1,height1,pointnum1);
var line = viewer.entities.add({polyline: {positions: parabolapositions1,width: 5,material: Cesium.Color.RED,  }
});

效果图

打印结果：

抛物线源码

1、首先将笛卡尔坐标转成经纬度

var startPosition = Cesium.Cartographic.fromCartesian(“起点-笛卡尔坐标”);
var endPosition = Cesium.Cartographic.fromCartesian(“终点-笛卡尔坐标”);
var startLon = startPosition.longitude * 180 / Math.PI;
var startLat = startPosition.latitude * 180 / Math.PI;
var endLon = endPosition.longitude * 180 / Math.PI;
var endLat = endPosition.latitude * 180 / Math.PI;

2、根据抛物线高度和点集数量计算抛物线

//numOfSingleLine 为 抛物线由多少个点组成 （笛卡尔坐标数组）
var result = [];
//计算两点之间的角度
var omega = Cesium.Cartesian3.angleBetween(“起点-笛卡尔坐标”, “终点-笛卡尔坐标”);
result.push(“起点-笛卡尔坐标”);
for (var i = 1; i < numOfSingleLine - 1; i++) {var t = i * 1.0 / (numOfSingleLine - 1);var invT = 1 - t;//正弦var startScalar = Math.sin(invT * omega) / Math.sin(omega);var endScalar = Math.sin(t * omega) / Math.sin(omega);//两个笛卡尔坐标实例的相减(分量差)后的笛卡尔坐标var startScalarVec = Cesium.Cartesian3.multiplyByScalar(startVec, “起点-笛卡尔坐标”, new Cesium.Cartesian3());var endScalarVec = Cesium.Cartesian3.multiplyByScalar(endVec, “终点-笛卡尔坐标”, new Cesium.Cartesian3());var centerVec = Cesium.Cartesian3.add(startScalarVec, endScalarVec, new Cesium.Cartesian3());var ht = t * Math.PI;//startLength 为“起点-笛卡尔坐标”到原点（0,0，0）的距离//endLength 为“终点-笛卡尔坐标”到原点（0,0，0）的距离var centerLength = startLength * invT + endLength * t + Math.sin(ht) * “抛物线高度”;centerVec = Cesium.Cartesian3.multiplyByScalar(centerVec, centerLength, centerVec);result.push(centerVec);
}
result.push(endPoint);//result为图上打印结果

资源链接：
脚本有混淆，请慎重下载
https://download.csdn.net/download/qq_35984445/85064658

Cesium 贝塞尔曲线、抛物线（笔记）相关推荐

【转】贝塞尔曲线介绍
原文链接: http://blog.csdn.net/sangxiaonian/article/details/51984013 http://blog.csdn.net/sangxiaonian/a ...
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效特效预览图什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图 ...
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效（富文本编辑器）
特效预览图什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段 ...
贝塞尔曲线的数学原理
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线. 曲线定义:起始点.终止点(也称锚点).控制点.通过调整控制点,贝塞尔曲线的形状会发生变化. 1962年,法国数学家Pierr ...
【HTML 中的二次贝塞尔曲线和三次贝塞尔曲线】(使用说明详解)
二次贝塞尔曲线和三次贝塞尔曲线使用说明 1. 二次贝塞尔曲线和三次贝塞尔曲线 1.1 贝塞尔曲线的基本知识 1.2 贝塞尔曲线生成动图 1.3 HTML 中画贝塞尔曲线的 2 种方 ...
贝塞尔曲线下的动画效果
最近有一个需求是这样的:点赞后变化的数字从VIew的底部上浮到label的text的对应的需要改变的数字位置,替换该数字.(也就是说,如果点赞前该数字是158,点赞后变成159,那么从View底部飘上 ...
史上最全的贝塞尔曲线(Bezier)全解(一):初识贝塞尔曲线
作为一个有只志向的码农,除了知道一些基本的知识够自己努力搬砖以外,还应该get一些更炫酷的技能,用更优雅的姿势进行搬砖;想要实现一些十分炫酷的效果,贝塞尔曲线就必须进行一些研究了; 最近一段时间, ...
三阶贝塞尔曲线选点_用三阶贝塞尔曲线拟合圆
前言由于贝塞尔曲线控制简便且具有极强的描述能力,它常被用来生成复杂的平滑曲线:圆形是一种很常用的普通图形,在计算机图形学中也有很多画圆的算法,本文想探究一下如何用三阶贝塞尔曲线拟合圆形. 在研究这个 ...
曲线平滑-贝塞尔曲线
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线. 曲线定义:起始点.终止点(也称锚点).控制点.通过调整控制点,贝塞尔曲线的形状会发生变化. 1962年,法国数学家Pierr ...

Cesium 贝塞尔曲线、抛物线（笔记）

生成曲线接口

效果图：

贝塞尔曲线源码

生成抛物线

效果图

抛物线源码

Cesium 贝塞尔曲线、抛物线（笔记）相关推荐

最新文章

热门文章