diff --git a/public/polylines_with_particles.js b/public/polylines_with_particles.js index 35eccd5eb9fb7a36c104bb94c82e4756ab8a54b8..3028cca7e03044e2554b1235cc324e6f74c61d29 100644 --- a/public/polylines_with_particles.js +++ b/public/polylines_with_particles.js @@ -150,14 +150,22 @@ $(function () { ).toISOString()); } + var divisor = 15 d3.dsv(",", "results/polylines_with_velocity.csv").then(function (text) { - const particleDuration = 90; // units in seconds the particle / point should take to move from start to finish + const particleDuration = 170; // units in seconds the particle / point should take to move from start to finish //define the czml structure var particle_czml = [ { id: "document", name: "CZML Point - Time Dynamic", version: "1.0", + clock: { + interval: get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration), // This is the time range of our simulation + currentTime: '', // This is the time associated with the start view + currentTime: get_date_time_dt(0), + multiplier: 5, + // range: 'LOOP_STOP', + } }, { id: "point", @@ -168,6 +176,8 @@ $(function () { cartographicDegrees: [ // use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt) ], + "interpolationAlgorithm": "LINEAR", + "interpolationDegree": 5 }, point: { color: { @@ -182,6 +192,17 @@ $(function () { }, ]; + ////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////// + let package_time_faktor = 2.0; + + // create an array of deep copies of the original czml data structure, to be modified below. + let czmlArr = []; + for (c=0; c < package_time_faktor; c++){ + czmlArr.push(JSON.parse(JSON.stringify(particle_czml))); + czmlArr[c][1].id = "point_arr_" + String(c); + } + var temp = text; for (var i = 0; i < temp.length; i++) { // use i+=7 when parsed as d3.text(...) @@ -278,8 +299,8 @@ $(function () { // console.log(streamDist); let t = 0; - let dt = (individual_particle_pt_distance[0] / individual_particle_avg_velo[0])/ 500; - // let dt = streamDist / individual_particle_avg_velo[0] / 500; + let dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0])/ divisor; + // let dt = streamDist / individual_particle_avg_velo[0] / divisor; let temp_pos = []; for (i = 0; i < positionsInDegrees.length; i++) { @@ -297,7 +318,7 @@ $(function () { positionsInDegrees[i][1], positionsInDegrees[i][2] ); - dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[i] / 500; + dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / divisor; // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] ); // console.log(dt); } @@ -309,12 +330,42 @@ $(function () { // czmlArray.push(particle_czml); viewer.dataSources.add(Cesium.CzmlDataSource.load(particle_czml)); - } + //////////////////////////////////////////////// + dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / divisor; + for (c=0; c < czmlArr.length ; c++){ + + temp_pos = []; + for (i = 0; i < positionsInDegrees.length; i++) { + if (i === 0) { + temp_pos.push( + t, + positionsInDegrees[i][0], + positionsInDegrees[i][1], + positionsInDegrees[i][2] + ); + } else { + temp_pos.push( + t, + positionsInDegrees[i][0], + positionsInDegrees[i][1], + positionsInDegrees[i][2] + ); + dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / divisor; + // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] ); + // console.log(dt); + } + + t += dt; + } + czmlArr[c][1].position.cartographicDegrees = temp_pos; + czmlArr[c][1].id = "point_set_" + String(c) + "_" + String(line); + czmlArr[c][1].position.epoch = get_date_time_dt(0); + viewer.dataSources.add(Cesium.CzmlDataSource.load(czmlArr[c])); + } + + + } // end bracket for: for (var line = 0; line < uniqueStreamID.length; line++) { - // for (p = 0; p < czmlArray.length; p++) { - // let temp = czmlArray[p]; - // viewer.dataSources.add(Cesium.CzmlDataSource.load(temp)); - // } }); @@ -347,36 +398,7 @@ $(function () { console.log("Position data imported."); - //// the following codes will actually generate multicolor polylines - /// just need a away to get the actual data into there... - /// - /// - // for (var line=0; line < 10; line++){ - // // Example 2: Draw a polyline with per vertex colors - // positions = []; - // colors = []; - // for (i = 0; i < 12; ++i) { - // positions.push(Cesium.Cartesian3.fromDegrees(-124.0 + line*5 + 5 * i, 35.0+line)); - // colors.push(Cesium.Color.fromRandom({ alpha: 1.0 })); - // } - // // For per segment coloring, supply the colors option with - // // an array of colors for each vertex. Also set the - // // colorsPerVertex option to true. - // scene.primitives.add( - // new Cesium.Primitive({ - // geometryInstances: new Cesium.GeometryInstance({ - // geometry: new Cesium.PolylineGeometry({ - // positions: positions, - // width: 5.0, - // vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT, - // colors: colors, - // colorsPerVertex: true, - // }), - // }), - // appearance: new Cesium.PolylineColorAppearance(), - // }) - // ); - // } + // HTML overlay for showing feature name on mouseover var nameOverlay = document.createElement("div");