Cesium 實現動態加載管道
1、安裝node.js 環境
1)下載node.js 官網:https://nodejs.org/en/
下載完成後雙擊安裝,選擇默認。
確認node.js是否安裝成功:命令窗口(windows+r,輸入cmd,enter確認)輸入命令:node -v,如果成功,會顯示版本號。
安裝npm,執行命令:npm install;
確認npm是否安裝成功:命令窗口(windows+r,輸入cmd,enter確認)輸入命令:npm -v,如果成功,會顯示版本號。
2、下載cesiumjs項目
官網下載地址:http://cesiumjs.org/downloads.html
2:前臺代碼部分(入門級別都改知道的)
<HTTP>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<這裏放你後臺的JS 文件 或者直接前臺直接script 也行 >
</HTTP>
3:JS 代碼 註:如果本地不能運行(多半環境沒配好),可以去粘貼到網址上去 (http://www.marsgis.cn/cesium/docs/go.html?id=14)
<script>
var viewer = new Cesium.Viewer(‘cesiumContainer‘);
viewer.clock.shouldAnimate = true;
var start=-110,startpoint=15,end=-110,endpoint=15,Zer=-100,Zerpoint=16;
function getMidpoint() {
end+=0.01;
if (end>=-110&&end>=-100) {
end=-100;
Zerpoint+=0.01;
if(Zerpoint<=20)
{
return Cesium.Cartesian3.fromDegreesArray([start, startpoint,
end, endpoint,Zer,Zerpoint
]);
}else if(Zerpoint>=20)
{
Zerpoint=20;
return Cesium.Cartesian3.fromDegreesArray([start, startpoint,
end, endpoint,Zer,Zerpoint
]);
}
}else
{
return Cesium.Cartesian3.fromDegreesArray([start, startpoint,
end, endpoint
]);
}
}
function computeCircle(radius) {
var positions = [];
for (var i = 0; i < 360; i++) {
var radians = Cesium.Math.toRadians(i);
positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
}
return positions;
}
// 用計算長度標註折線。
var lable= viewer.entities.add({
polylineVolume : {
positions : new Cesium.CallbackProperty(getMidpoint, false),
shape : computeCircle(100000.0),
material : Cesium.Color.WHITE.withAlpha(0.4)
}
});
viewer.zoomTo(lable);
viewer.trackedEntity = lable;
</script>
Cesium 實現動態加載管道