cesium+earthsd實現相機飛行動畫
效果:
原理:1.通過earthsdk將在兩個點之間畫出飛線,得到飛線點集資料
2.通過飛線點集資料,計算出每個點上的攝像機方向,得到攝像機方向集合
注意:在經過經度180度線的時候,會有攝像機反向問題,需特別處理
3.將飛線點集資料和攝像機方向集合生成 path 物件,完成攝像機貼線飛行
4.在飛線路徑外圍新增 polylinevolume 管道物件達成效果
注意:當管道長度很長的時候,中間會出現管道扭曲,未找到原因。
解決辦法:將飛線沒兩個點拆成乙個線段建立多個管道。由於entityid不能重複,所以需要使用 customdatasource 建立實體集合
**:呼叫:
createcamerafollow(item)1.建立地球
init() )2.主要方法:},startup() //',
srccoordtype: 'wgs84',
dstcoordtype: 'wgs84'}}}
}]}var tileset =earth.scenetree.$refs.tileset.czmobject
},
//3.工具方法:建立相機跟隨
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),
//建立飛線 - 返回飛線點資料集合 -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...