Cesium earthSD實現相機飛行動畫

2022-03-15 00:49:09 字數 4521 閱讀 4233

cesium+earthsd實現相機飛行動畫

效果:

原理:1.通過earthsdk將在兩個點之間畫出飛線,得到飛線點集資料

2.通過飛線點集資料,計算出每個點上的攝像機方向,得到攝像機方向集合

注意:在經過經度180度線的時候,會有攝像機反向問題,需特別處理 

3.將飛線點集資料和攝像機方向集合生成  path  物件,完成攝像機貼線飛行

4.在飛線路徑外圍新增 polylinevolume 管道物件達成效果

注意:當管道長度很長的時候,中間會出現管道扭曲,未找到原因。

解決辦法:將飛線沒兩個點拆成乙個線段建立多個管道。由於entityid不能重複,所以需要使用 customdatasource 建立實體集合

**:呼叫:

createcamerafollow(item)
1.建立地球

init() )

},startup() //',

srccoordtype: 'wgs84',

dstcoordtype: 'wgs84'}}}

}]}var tileset =earth.scenetree.$refs.tileset.czmobject

},

2.主要方法:

//

建立相機跟隨

createcamerafollow(line)

var p1 =[[[

this.dtor(line.srciplon * 1), this.dtor(line.srciplat * 1), 0],

[this.dtor(line.cluelon * 1), this.dtor(line.cluelat * 1), 0]]];

//獲取飛行距離

//let distance = this.getdistance(p1[0])

let parms =[

this.rtod(p1[0][0][0]),

this.rtod(p1[0][0][1]),

this.rtod(p1[0][1][0]),

this.rtod(p1[0][1][1]),

]let distance = this

.getflatterndistance(...parms)

//獲取飛線路徑

let flyline = this.getflyline(this

._earth, p1)

//新增管道

this.createcylinder(this

._earth, flyline)

//攝像機貼線飛行

settimeout(() =>, 100)

},//攝像機貼線飛行

camerafly (flyline, distance)

}this

._earth.scenetree.root.children.push(leafconfig)

var path1 = this

._earth.scenetree.$refs.path1.czmobject;

path1.show = false; //

是否顯示

path1.currentspeed = (distance)/5; //執行速度

path1.currentd = 1; //

當前位置,單位公尺

path1.cameraattached = true; //

繫結相機

path1.playing = true; //

飛行//

path1._currentposition = true; // 飛行

path1.preupdateevalstring =`

if (p.currentd === 0)

`;//定義乙個pin用來跟蹤路徑

//const pin = new xe.obj.pin(this._earth);

'position', path1, 'currentposition');

},

//新增管道-圓柱形-三角柱

createcylinder(earth, line)

viewer.entities.add(})}

for(let item of line)

//將飛線每兩個點處理成一條線段

let line1 =json.parse(json.stringify(line))

let linearr =

for (let i in

line1)

}//兩種顏色交替材質

/*var stripematerial = new cesium.stripematerialproperty();

*/var stripematerial = new

cesium.imagematerialproperty();

//計算圓

function

computecircle(radius)

return

positions;

}//計算稜柱 arms 稜柱角的數量 router 外角突出距離 rinner 內角收縮距離

function

computestar(arms, router, rinner)

return

positions;

}//建立實體集合

var datasource = new cesium.customdatasource('lines');

viewer.datasources.add(datasource);

for (let i=0; i< linearr.length;i++) ,

});}

},//清除管道和攝像機繫結

clearcylinder(earth),

3.工具方法:

//

建立飛線 - 返回飛線點資料集合 -earthsdk方法

getflyline(earth, data) );

return

poss;

});return positionscollection[0]

},//計算攝像機角度陣列 -- 忽略俯仰角面對映 line:線路徑

countrotations(line) )

//計算偏航角

function

counthornx(point1, point2)

else

if ((y1 > 0 && y0 > 0) || (y1<0 && y0 < 0))

else

a =math.atan2(x,y);

return

a }

//計算俯仰角

function

counthorny(point1, point2)

//計算rotations

let rotations =

for (let i = 0; i < l.length - 1; i++)

rotations.push(rotations[rotations.length - 1])

return

rotations

},//獲取兩點間的距離

getflatterndistance(lat1,lng1,lat2,lng2)

var f = getrad((lat1 + lat2)/2);

var g = getrad((lat1 - lat2)/2);

var l = getrad((lng1 - lng2)/2);

var sg =math.sin(g);

var sl =math.sin(l);

var sf =math.sin(f);

vars,c,w,r,d,h1,h2;

var a =earth_radius;

var fl = 1/298.257;

sg = sg*sg;

sl = sl*sl;

sf = sf*sf;

s = sg*(1-sl) + (1-sf)*sl;

c = (1-sg)*(1-sl) + sf*sl;

w = math.atan(math.sqrt(s/c));

r = math.sqrt(s*c)/w;

d = 2*w*a;

h1 = (3*r -1)/2/c;

h2 = (3*r +1)/2/s;

return d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));

},//度轉弧度

dtor(val) ,

//弧度轉度

rtod(val) ,

//公尺轉為度

mtod(val) ,

//公尺轉為度

dtom(val) ,

//弧度轉公尺

rtom (val)

快速排序演算法實現(遞迴實現 棧實現)

基本思想 選擇乙個基準元素,比如選擇最後乙個元素,通過一趟掃瞄,將待排序列分成兩部分,一部分比基準元素小,一部分大於等於基準元素,此時基準元素在其排好序後的正確位置,又稱為軸位置,此位置的元素確定後不再參與排序,然後再用同樣的方法遞迴地排序劃分的兩部分。分析 快速排序是不穩定的排序。快速排序的時間複...

介面實現與配置實現

在實現系統功能的時候,通常會首先定義好功能的介面,在系統功能不斷被實現的過程中,慢慢的發現有些介面的實現很類似,這個時候通常會開始做一次抽象,形 成乙個共同的部分,慢慢的系統形成了乙個抽象的層次,而為了通用,通常是通過定義介面,形成乙個抽象類,抽象類中暴露出一些抽象方法供外部擴充套件實 現,逐步的積...

js分頁實現,前端實現。

主要是借鑑了網上乙個例子,自己重新加了樣式,新增了跳轉,修改了一些小地方,用於和大家一起分享,前端分頁的技巧,的資料是我已經寫好了,其實大家也可以前端渲染 然後再分頁,都是可以的。其實分頁最關鍵是這兩句 var startrow currentpage 1 pagesize 1 currentpag...