//the dynamic line from orgin to direction
|
(function (window) {
|
'use strict';
|
|
function define_CesiumODline(){
|
//Main object
|
var CesiumODline = {};
|
|
function createFlightLinesApperance(color) {
|
var polylineAppearance = new Cesium.PolylineMaterialAppearance({
|
material: new Cesium.Material({
|
fabric : {
|
type : 'Color',
|
uniforms : {
|
color : color
|
}
|
},
|
translucent: true
|
})
|
});
|
var renamedVS = Cesium.ShaderSource.replaceMain(polylineAppearance._vertexShaderSource, 'czm_twp_main');
|
var twpMain =
|
'varying vec4 v_twp; \n' +
|
'void main() \n' +
|
'{ \n' +
|
' czm_twp_main(); \n' +
|
' v_twp = czm_batchTable_twp(batchId); \n' +
|
'}';
|
polylineAppearance._vertexShaderSource = renamedVS + '\n' + twpMain;
|
var renamedFS = Cesium.ShaderSource.replaceMain(polylineAppearance._fragmentShaderSource, 'czm_twp2_main');
|
var twp2Main =
|
'varying vec4 v_twp; \n' +
|
'void main() \n' +
|
'{ \n' +
|
' czm_twp2_main(); \n' +
|
' float t = v_twp.x;' +
|
' t *= 1.03;' + //控制飞行速度
|
' float alpha = smoothstep(t - 0.055, t, v_st.s) * step(-t, -v_st.s); ' + //控制尾迹长度
|
' alpha += 0.0;' + //控制轨迹底线的透明度
|
' alpha *= step(-0.1, -abs(0.5-v_st.t)); ' +
|
' gl_FragColor.a *= alpha;' +
|
'}';
|
polylineAppearance._fragmentShaderSource = renamedFS + '\n' + twp2Main;
|
return polylineAppearance;
|
}
|
|
function createFlightLinesGeometryInstance(positions,width) {
|
var gi = new Cesium.GeometryInstance({
|
geometry: new Cesium.PolylineGeometry({
|
positions: positions,
|
width: width,
|
vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT
|
}),
|
attributes : {
|
twp: new Cesium.GeometryInstanceAttribute({
|
componentDatatype : Cesium.ComponentDatatype.FLOAT,
|
componentsPerAttribute : 4,
|
normalize : false,
|
value : [0.0, 0.5, 1.0, 1.0]
|
})
|
},
|
});
|
return gi;
|
}
|
|
function createFlightLinesPrimitive(routePaths,color,tracewidth) {
|
var geometryInstances = [];
|
routePaths.forEach(function (route) {
|
//线路样式在此分流：连续路径||只有起止点
|
var positions = route.positions || createTransmitPolyline(route.startPos, route.endPos);
|
var gi = createFlightLinesGeometryInstance(positions,tracewidth);
|
geometryInstances.push(gi);
|
});
|
var flightLinesPrimitive = new Cesium.Primitive({
|
geometryInstances: geometryInstances,
|
appearance: createFlightLinesApperance(color)
|
});
|
return flightLinesPrimitive;
|
}
|
|
var scratchTWP;
|
function getScratchTWP() {
|
if (typeof scratchTWP === 'undefined') {
|
scratchTWP = new Cesium.Cartesian4(0.0, 0.0, 0.0, 0.0);
|
}
|
return scratchTWP;
|
}
|
|
function setFlightLinesStatus(flightLinesPrimitive, statusCallback) {
|
var scratchTWP = getScratchTWP();
|
if (typeof flightLinesPrimitive._batchTable !== 'undefined') {
|
//var attributeName = 'color';
|
var attributeName = 'twp';
|
var attributeIndex = flightLinesPrimitive._batchTableAttributeIndices[attributeName];
|
var ni = flightLinesPrimitive._batchTable._numberOfInstances;
|
for (var i = 0; i < ni; ++i) {
|
var instanceIndex = i;
|
statusCallback(instanceIndex, scratchTWP);
|
flightLinesPrimitive._batchTable.setBatchedAttribute(instanceIndex, attributeIndex, scratchTWP);
|
}
|
}
|
}
|
|
function addGlowLine(viewer,ODLines,color,linewidth,lineglow){
|
var glowLines = [];
|
ODLines.forEach(function (line) {
|
var glowLine = viewer.entities.add({
|
polyline : {
|
positions : line.positions,
|
width : linewidth,
|
material : new Cesium.PolylineGlowMaterialProperty({
|
color : color,
|
glowPower : lineglow
|
})
|
}
|
});
|
glowLines.push(glowLine);
|
});
|
return glowLines;
|
}
|
|
/*Option = {
|
viewer: viewer,
|
geoJsonUrl: '../data/busLines.json',
|
linecolor: Cesium.Color.GOLD,//ORANGE;//ORANGE;//GOLD;//底线颜色
|
linewidth: 8.0,//底线宽度
|
lineheight: 500.0,//底线高度
|
lineglow: 0.15,//底线光晕宽度
|
tracecolor: Cesium.Color.WHITE,//ORANGE;//GOLD;//尾迹线颜色
|
tracewidth: 28.0,//尾迹线宽度
|
positions: [[Cartesian3,Cartesian3,...],[Cartesian3,...],...],//坐标点数组
|
timeDuration: 3.0,//各个尾迹线发出的时间间隔
|
moveBaseDuration: 3.0,//各个尾迹线的速度，数值越大越慢
|
};*/
|
|
var jsonresult = [];
|
CesiumODline.loadGeoJson = function(option){
|
var glowlines;
|
var flightLinesPrimitive;
|
Cesium.Resource.fetchJson(option.geoJsonUrl).then(function(data) {
|
var ODLines = [];
|
data.features.map(function (dataArr, idx) {
|
var points = [];
|
var coords = dataArr.geometry.coordinates;
|
for (var i = 0; i < coords.length; i++) {
|
var cart = Cesium.Cartesian3.fromDegrees(
|
coords[i][0], coords[i][1], option.lineheight);
|
points.push(cart);
|
}
|
ODLines.push({
|
positions: points,
|
startTime: option.timeDuration * Math.random(),
|
duration: option.moveBaseDuration + 1.0 * Math.random(),
|
});
|
});
|
flightLinesPrimitive = createFlightLinesPrimitive(ODLines,
|
option.tracecolor,option.tracewidth);
|
option.viewer.scene.primitives.add(flightLinesPrimitive);
|
glowlines = addGlowLine(option.viewer,ODLines,option.linecolor,
|
option.linewidth,option.lineglow);
|
|
var time = 0;
|
var disposeListener = option.viewer.scene.preUpdate.addEventListener(function() {
|
time += 0.01;
|
if (time >= option.timeDuration) {
|
time = 0.0;
|
}
|
setFlightLinesStatus(flightLinesPrimitive, function(instanceIndex, result) {
|
var st = ODLines[instanceIndex].startTime;
|
var dr = ODLines[instanceIndex].duration;
|
var diff = time > st ? time - st : time + option.timeDuration - st;
|
var timeRatio = Math.min(diff / dr, 1.0);
|
|
Cesium.Cartesian4.fromElements(timeRatio, 0.3, 1.0, 1.0, result);
|
});
|
});
|
jsonresult.push(flightLinesPrimitive,glowlines);
|
});
|
};
|
|
/*Option = {
|
viewer: viewer,
|
linecolor: Cesium.Color.GOLD,//ORANGE;//ORANGE;//GOLD;//底线颜色
|
linewidth: 8.0,//底线宽度
|
lineglow: 0.15,//底线光晕宽度
|
tracecolor: Cesium.Color.WHITE,//ORANGE;//GOLD;//尾迹线颜色
|
tracewidth: 28.0,//尾迹线宽度
|
positions: [[Cartesian3,Cartesian3,...],[Cartesian3,...],...],//坐标点数组
|
timeDuration: 3.0,//各个尾迹线发出的时间间隔
|
moveBaseDuration: 3.0,//各个尾迹线的速度，数值越大越慢
|
};*/
|
CesiumODline.add = function(option){
|
var ODLines = [];
|
for ( var i = 0; i < option.positions.length; i++) {
|
ODLines.push({
|
positions: option.positions[i],
|
startTime: option.timeDuration * Math.random(),
|
duration: option.moveBaseDuration + 1.0 * Math.random(),
|
});
|
}
|
|
var flightLinesPrimitive = createFlightLinesPrimitive(ODLines,
|
option.tracecolor,option.tracewidth);
|
option.viewer.scene.primitives.add(flightLinesPrimitive);
|
var glowlines = addGlowLine(option.viewer,ODLines,option.linecolor,
|
option.linewidth,option.lineglow);
|
|
var time = 0;
|
var disposeListener = option.viewer.scene.preUpdate.addEventListener(function() {
|
time += 0.01;
|
if (time >= option.timeDuration) {
|
time = 0.0;
|
}
|
setFlightLinesStatus(flightLinesPrimitive, function(instanceIndex, result) {
|
var st = ODLines[instanceIndex].startTime;
|
var dr = ODLines[instanceIndex].duration;
|
var diff = time > st ? time - st : time + option.timeDuration - st;
|
var timeRatio = Math.min(diff / dr, 1.0);
|
|
Cesium.Cartesian4.fromElements(timeRatio, 0.3, 1.0, 1.0, result);
|
});
|
});
|
|
return [flightLinesPrimitive, glowlines];
|
};
|
|
CesiumODline.remove = function(viewer, odlines){
|
if(odlines.length!=0&&odlines!=undefined){
|
viewer.scene.primitives.remove(odlines[0]);
|
for ( var i = 0; i < odlines[1].length; i++) {
|
viewer.entities.remove(odlines[1][i]);
|
}
|
}
|
};
|
|
CesiumODline.removeJson = function(viewer){
|
if(jsonresult.length!=0){
|
viewer.scene.primitives.remove(jsonresult[0]);
|
for ( var i = 0; i < jsonresult[1].length; i++) {
|
viewer.entities.remove(jsonresult[1][i]);
|
}
|
jsonresult = [];
|
}
|
};
|
|
return CesiumODline;
|
}
|
|
if (typeof(CesiumODline) === 'undefined') {
|
window.CesiumODline = define_CesiumODline();
|
} else {
|
console.log("CesiumODline already defined.");
|
}
|
})(window);
|
