该方案借鉴了多个大佬的，把代码理了一遍再整合了一下做了个集合（算是一个练手的demo）
重点👇
这里初始化地球的时候注意下这个参数requestRenderMode（减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率），如果你开启了，那么流线材质就会动一下就不动了，切记！！！！
下面是vue组件代码
https://segmentfault.com/u/yo...
<template>
<div class="tole">
<div id="cesiumContainer" style="height: 100%;width: 100%">
</div>
</div>
</template>
<script>
import * as Cesium from 'cesium/Cesium'
import widget from 'cesium/Widgets/widgets.css'
var viewer = null
export default {
data(){
return{
viewer:null
}
},
mounted(){
console.log(widget);
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZGMwM2M2OC02ZGYwLTQ5NzQtYjBkOS1lYTM0MmYxNTZlZTkiLCJpZCI6NjEwNTMsImlhdCI6MTYyNTY0ODgzN30.9B76dtOIBsNmX3laJ5VXFOqt2NlBT-n16j4ppUF8IYA'
// viewer = new Cesium.CesiumWidget('cesiumContainer')
viewer = new Cesium.Viewer("cesiumContainer",{
animation: false, // 隐藏动画控件
baseLayerPicker: false, // 隐藏图层选择控件
fullscreenButton: false, // 隐藏全屏按钮
vrButton: false, // 隐藏VR按钮，默认false
geocoder: false, // 隐藏地名查找控件
homeButton: false, // 隐藏Home按钮
infoBox: false, // 隐藏点击要素之后显示的信息窗口
sceneModePicker: false, // 隐藏场景模式选择控件
selectionIndicator: true, // 显示实体对象选择框，默认true
timeline: false, // 隐藏时间线控件
navigationHelpButton: false, // 隐藏帮助按钮
scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
shouldAnimate: true, // 开启动画自动播放
sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3
requestRenderMode: false, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
// 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
maximumRenderTimeChange: Infinity,
//天地图影像
// imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
// url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=39ca2b2b8dc2f3e1e9c3de07f4d4de57",
// layer: "tdtBasicLayer",
// style: "default",
// format: "tiles",
// tileMatrixSetID: "GoogleMapsCompatible",
// show: true,
// maximumLevel: 18
// })
})
this.viewer = viewer
//添加天地图标注
// viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
// url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=39ca2b2b8dc2f3e1e9c3de07f4d4de57",
// layer: "tdtAnnoLayer",
// style: "default",
// format: "tiles",
// tileMatrixSetID: "GoogleMapsCompatible",
// show: true
// }));
viewer.cesiumWidget.creditContainer.style.display = "none"
//添加线
// var orangeOutlined = viewer.entities.add({
// name:
// "Orange line with black outline at height and following the surface",
// polyline: {
// positions: Cesium.Cartesian3.fromDegreesArrayHeights([
// -75,
// 39,
// 0,
// -125,
// 39,
// 0,
// ]),
// width: 5,
// material: new Cesium.PolylineOutlineMaterialProperty({
// color: Cesium.Color.ORANGE,
// outlineWidth: 2,
// outlineColor: Cesium.Color.BLACK,
// }),
// },
// });
// console.log(orangeOutlined);
//添加点位
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(120.9677706,30.7985748,2.61),
point: {
color: Cesium.Color.RED, //点位颜色
pixelSize: 10 //像素点大小
},
label : {
text : '测试名称',
font : '14pt Source Han Sans CN', //字体样式
fillColor:Cesium.Color.BLACK, //字体颜色
backgroundColor:Cesium.Color.AQUA, //背景颜色
showBackground:true, //是否显示背景颜色
style: Cesium.LabelStyle.FILL, //label样式
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.CENTER,//垂直位置
horizontalOrigin :Cesium.HorizontalOrigin.LEFT,//水平位置
pixelOffset:new Cesium.Cartesian2(10,0) //偏移
}
});
console.log(entity);
//这里通过算法得到曲线
let mm = this.parabola([-75,39,-175,39])
var polyline = new Cesium.PolylineGeometry({
positions: mm,
width : 2
});
const instance = new Cesium.GeometryInstance({
geometry: polyline,
id: 'flyline',
})
//添加至场景
this.viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: [instance],
appearance: this.getFlylineMaterial(),
releaseGeometryInstances: false,
compressVertices: false,
})
)
},
methods:{
computeFlyline(
point1 = [-75, 39],
point2 = [-175,39],
h = 500000
) {
let flyline = getBSRxyz(...point1, ...point2, h)
return flyline
// 将数据转换为cesium polyline positions格式
function getBSRxyz(x1, y1, x2, y2, h) {
let arr3d = getBSRPoints(x1, y1, x2, y2, h)
let arrAll = []
for (let ite of arr3d) {
arrAll.push(ite[0])
arrAll.push(ite[1])
arrAll.push(ite[2])
}
return Cesium.Cartesian3.fromDegreesArrayHeights(arrAll)
}
function getBSRPoints(x1, y1, x2, y2, h) {
let point1 = [y1, 0]
let point2 = [(y2 + y1) / 2, h]
let point3 = [y2, 0]
let arr = getBSR(point1, point2, point3)
let arr3d = []
for (let i = 0; i< arr.length; i++) {
let x = ((x2 - x1) * (arr[i][0] - y1)) / (y2 - y1) + x1
arr3d.push([x, arr[i][0], arr[i][1]])
}
return arr3d
}
// 生成贝塞尔曲线
function getBSR(point1, point2, point3) {
var ps = [
{ x: point1[0], y: point1[1] },
{ x: point2[0], y: point2[1] },
{ x: point3[0], y: point3[1] }
]
// 100 每条线由100个点组成
let guijipoints = CreateBezierPoints(ps, 100)
return guijipoints
}
// 贝赛尔曲线算法
// 参数：
// anchorpoints: [{ x: 116.30, y: 39.60 }, { x: 37.50, y: 40.25 }, { x: 39.51, y: 36.25 }]
function CreateBezierPoints(anchorpoints, pointsAmount) {
var points = []
for (var i = 0; i < pointsAmount; i++) {
var point = MultiPointBezier(anchorpoints, i / pointsAmount)
points.push([point.x, point.y])
}
return points
}
function MultiPointBezier(points, t) {
var len = points.length
var x = 0,
y = 0
var erxiangshi = function(start, end) {
var cs = 1,
bcs = 1
while (end > 0) {
cs *= start
bcs *= end
start--
end--
}
return cs / bcs
}
for (var i = 0; i < len; i++) {
var point = points[i]
x +=
point.x *
Math.pow(1 - t, len - 1 - i) *
Math.pow(t, i) *
erxiangshi(len - 1, i)
y +=
point.y *
Math.pow(1 - t, len - 1 - i) *
Math.pow(t, i) *
erxiangshi(len - 1, i)
}
return { x: x, y: y }
}
},
parabola(twoPoints) { //抛物线绘制
let s = []
let startPoint = [twoPoints[0],twoPoints[1],0]; //起点的经度、纬度
s = s.concat(startPoint)
let step = 80; //线的多少，越多则越平滑(但过多浏览器缓存也会占用越多)
let heightProportion = 0.125; //最高点和总距离的比值
let dLon = (twoPoints[2] - startPoint[0])/step; //经度差值
let dLat = (twoPoints[3] - 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)*2;
let x2 = (10000*Math.sqrt(dLon*dLon+dLat*dLat)); //小数点扩大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)*1; //求end点高度
s = s.concat(endPoint)
// end点变为start点
startPoint[0] = endPoint[0];
startPoint[1] = endPoint[1];
startPoint[2] = endPoint[2];
}
return Cesium.Cartesian3.fromDegreesArrayHeights(s)
},
getFlylineMaterial(){
// 创建材质，在MaterialAppearance中若不添加基础材质，模型将会透明
var material = new Cesium.Material.fromType('Color')
material.uniforms.color = Cesium.Color.ORANGE
// 飞线效果-飞线间隔，宽度2
let fragmentShaderSource = `
varying vec2 v_st;
varying float v_width;
varying float v_polylineAngle;
varying vec4 v_positionEC;
varying vec3 v_normalEC;
void main()
{
vec2 st = v_st;
// 箭头飞线，宽度 8
float xx = fract(st.s*10.0 + st.t - czm_frameNumber/60.0);
if (st.t<0.5) {
xx = fract(st.s*10.0 - st.t - czm_frameNumber/60.0);
}
float r = 0.0;
float g = xx;
float b = xx;
float a = xx;
// 飞线边框
if (st.t>0.8||st.t<0.2) {
g = 1.0;
b = 1.0;
a = 0.4;
}
gl_FragColor = vec4(r,g,b,a);
}
`
// 自定义材质
const aper = new Cesium.PolylineMaterialAppearance({
material: material,
translucent: true,
vertexShaderSource: `
#define CLIP_POLYLINE
void clipLineSegmentToNearPlane(
vec3 p0,
vec3 p1,
out vec4 positionWC,
out bool clipped,
out bool culledByNearPlane,
out vec4 clippedPositionEC)
{
culledByNearPlane = false;
clipped = false;
vec3 p0ToP1 = p1 - p0;
float magnitude = length(p0ToP1);
vec3 direction = normalize(p0ToP1);
float endPoint0Distance = czm_currentFrustum.x + p0.z;
float denominator = -direction.z;
if (endPoint0Distance > 0.0 && abs(denominator) < czm_epsilon7)
{
culledByNearPlane = true;
}
else if (endPoint0Distance > 0.0)
{
float t = endPoint0Distance / denominator;
if (t < 0.0 || t > magnitude)
{
culledByNearPlane = true;
}
else
{
p0 = p0 + t * direction;
p0.z = min(p0.z, -czm_currentFrustum.x);
clipped = true;
}
}
clippedPositionEC = vec4(p0, 1.0);
positionWC = czm_eyeToWindowCoordinates(clippedPositionEC);
}
vec4 getPolylineWindowCoordinatesEC(vec4 positionEC, vec4 prevEC, vec4 nextEC, float expandDirection, float width, bool usePrevious, out float angle)
{
#ifdef POLYLINE_DASH
vec4 positionWindow = czm_eyeToWindowCoordinates(positionEC);
vec4 previousWindow = czm_eyeToWindowCoordinates(prevEC);
vec4 nextWindow = czm_eyeToWindowCoordinates(nextEC);
vec2 lineDir;
if (usePrevious) {
lineDir = normalize(positionWindow.xy - previousWindow.xy);
}
else {
lineDir = normalize(nextWindow.xy - positionWindow.xy);
}
angle = atan(lineDir.x, lineDir.y) - 1.570796327;
angle = floor(angle / czm_piOverFour + 0.5) * czm_piOverFour;
#endif
vec4 clippedPrevWC, clippedPrevEC;
bool prevSegmentClipped, prevSegmentCulled;
clipLineSegmentToNearPlane(prevEC.xyz, positionEC.xyz, clippedPrevWC, prevSegmentClipped, prevSegmentCulled, clippedPrevEC);
vec4 clippedNextWC, clippedNextEC;
bool nextSegmentClipped, nextSegmentCulled;
clipLineSegmentToNearPlane(nextEC.xyz, positionEC.xyz, clippedNextWC, nextSegmentClipped, nextSegmentCulled, clippedNextEC);
bool segmentClipped, segmentCulled;
vec4 clippedPositionWC, clippedPositionEC;
clipLineSegmentToNearPlane(positionEC.xyz, usePrevious ? prevEC.xyz : nextEC.xyz, clippedPositionWC, segmentClipped, segmentCulled, clippedPositionEC);
if (segmentCulled)
{
return vec4(0.0, 0.0, 0.0, 1.0);
}
vec2 directionToPrevWC = normalize(clippedPrevWC.xy - clippedPositionWC.xy);
vec2 directionToNextWC = normalize(clippedNextWC.xy - clippedPositionWC.xy);
if (prevSegmentCulled)
{
directionToPrevWC = -directionToNextWC;
}
else if (nextSegmentCulled)
{
directionToNextWC = -directionToPrevWC;
}
vec2 thisSegmentForwardWC, otherSegmentForwardWC;
if (usePrevious)
{
thisSegmentForwardWC = -directionToPrevWC;
otherSegmentForwardWC = directionToNextWC;
}
else
{
thisSegmentForwardWC = directionToNextWC;
otherSegmentForwardWC = -directionToPrevWC;
}
vec2 thisSegmentLeftWC = vec2(-thisSegmentForwardWC.y, thisSegmentForwardWC.x);
vec2 leftWC = thisSegmentLeftWC;
float expandWidth = width * 0.5;
if (!czm_equalsEpsilon(prevEC.xyz - positionEC.xyz, vec3(0.0), czm_epsilon1) && !czm_equalsEpsilon(nextEC.xyz - positionEC.xyz, vec3(0.0), czm_epsilon1))
{
vec2 otherSegmentLeftWC = vec2(-otherSegmentForwardWC.y, otherSegmentForwardWC.x);
vec2 leftSumWC = thisSegmentLeftWC + otherSegmentLeftWC;
float leftSumLength = length(leftSumWC);
leftWC = leftSumLength < czm_epsilon6 ? thisSegmentLeftWC : (leftSumWC / leftSumLength);
vec2 u = -thisSegmentForwardWC;
vec2 v = leftWC;
float sinAngle = abs(u.x * v.y - u.y * v.x);
expandWidth = clamp(expandWidth / sinAngle, 0.0, width * 2.0);
}
vec2 offset = leftWC * expandDirection * expandWidth * czm_pixelRatio;
return vec4(clippedPositionWC.xy + offset, -clippedPositionWC.z, 1.0) * (czm_projection * clippedPositionEC).w;
}
vec4 getPolylineWindowCoordinates(vec4 position, vec4 previous, vec4 next, float expandDirection, float width, bool usePrevious, out float angle)
{
vec4 positionEC = czm_modelViewRelativeToEye * position;
vec4 prevEC = czm_modelViewRelativeToEye * previous;
vec4 nextEC = czm_modelViewRelativeToEye * next;
return getPolylineWindowCoordinatesEC(positionEC, prevEC, nextEC, expandDirection, width, usePrevious, angle);
}
attribute vec3 position3DHigh;
attribute vec3 position3DLow;
attribute vec3 prevPosition3DHigh;
attribute vec3 prevPosition3DLow;
attribute vec3 nextPosition3DHigh;
attribute vec3 nextPosition3DLow;
attribute vec2 expandAndWidth;
attribute vec2 st;
attribute float batchId;
varying float v_width;
varying vec2 v_st;
varying float v_polylineAngle;
varying vec4 v_positionEC;
varying vec3 v_normalEC;
void main()
{
float expandDir = expandAndWidth.x;
float width = abs(expandAndWidth.y) + 0.5;
bool usePrev = expandAndWidth.y < 0.0;
vec4 p = czm_computePosition();
vec4 prev = czm_computePrevPosition();
vec4 next = czm_computeNextPosition();
float angle;
vec4 positionWC = getPolylineWindowCoordinates(p, prev, next, expandDir, width, usePrev, angle);
gl_Position = czm_viewportOrthographic * positionWC;
v_width = width;
v_st.s = st.s;
v_st.t = st.t;
// v_st.t = czm_writeNonPerspective(st.t, gl_Position.w);
v_polylineAngle = angle;
vec4 eyePosition = czm_modelViewRelativeToEye * p;
v_positionEC = czm_inverseModelView * eyePosition; // position in eye coordinates
//v_normalEC = czm_normal * normal; // normal in eye coordinates
}
`,
fragmentShaderSource: fragmentShaderSource
})
return aper;
},
}
}
</script>
<style scope lang="scss">
.tole{
width: 100%;
height: 100%;
}
</style>这里有两个曲线算法computeFlyline和parabola,任选其一即可
其中一个来自于
https://www.cnblogs.com/s3131...
另一个忘了（原作者可以联系我）
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。