make hotspot.js

Author: cocoslime

README.md

@@ -142,6 +142,29 @@ var property2 = { ...}
 showProperty([property1, property2,..], 'graph');
 ```
 
+#### View hotspot cube
+
+* show3DHotSpotMovingPoint([mf_arr], x_deg, y_deg, time_deg, max_height)
+
+Show Hotspot cube for MovingPoint Array.
+
+'x_deg' is how much divide longitude.
+
+'y_deg' is latitude.
+
+'time_deg' is seconds.
+
+'max_height' is meters that assume how much maximum height. it can be omitted.(default 15000000)
+
+```js
+scene.primitives.add(show3DHotSpotMovingPoint(mf_arr, 1, 1, 3600));
+```
+
+e.g.
+
+![hotspotPoint](http://i.imgur.com/7pN8bDz.png)
+
+
 - - -
 
 ## Building

js/MFOC/Model.js

@@ -0,0 +1,4 @@
+function BoxCoord(){
+  this.minimum = {};
+  this.maximum = {};
+};

js/MFOC/README.md

@@ -1,14 +1,21 @@
-# Moving Feature On Cesium
+# Moving Feature On Cesium (MFOC)
 
-## Visualize Movement
+We are developing API for this project.
+
+[OGC Moving Features Encoding Extension - JSON](https://ksookim.github.io/mf-json/)
+
+
+#### Visualize Movement
 
 * movePolygonArray([movingfeature_array], with_height);
 
 movingfeature is moving feature json object array.
 
+It should be have 'temporalGeometry' key.
+
 'with_height' means path of animation with own height.(boolean)
 
-return czml.
+Returns [czml](https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Guide) object.
 
 ```js
 var mf1 = {
@@ -32,25 +39,30 @@ var mf1 = {
       "name" : "Max wind speed",
       "uom" : "kt",
       "values" : [ 0.0, 0.0,..., 0.0, 0.0 ],
-      "datetimes" : [ "2015-07-30 03:00:00",.., "2015-08-11 03:00:00", "2015-08-11 09:00:00", "2015-08-11 15:00:00", "2015-08-11 21:00:00", "2015-08-12 03:00:00", "2015-08-12 09:00:00" ],
+      "datetimes" : [ "2015-07-30 03:00:00",.., "2015-08-12 09:00:00" ],
       "interpolations" : "Linear"
     } ]
   }
 var mf_arr = [ mf1, mf2 ]; //mf is movingfeature object.
 var czml = movePolygonArray(mf_arr);
 ```
 
-* movePointArray([mf_arr], with_height);
+* movePointArray([mf_arr], with_height)
 
-* moveLineStringArray([mf_arr], with_height);
+Returns czml object.
 
-## Draw Primitive
+* moveLineStringArray([mf_arr], with_height)
+
+Returns czml object.
+
+
+#### Draw Primitive
 
 * drawPolygons([mf_arr], with_height)
 
-draw multiple Polygon.
+Draw multiple Polygon.
 
-return Cesium.primitiveCollection
+Return Cesium.primitiveCollection.
 
 * drawTyphoons([mf_arr], with_height)
 
@@ -64,14 +76,43 @@ draw multiple Point.
 
 draw multiple LineString.
 
-## view Properties graph
+* drawPointsPath([mf_arr], with_height)
+
+Returns Cesium.PolylineCollection. Draw path for MovingPoint.
+
+* drawLinesPath([mf_arr], with_height)
+
+Returns Cesium.PrimitiveCollection. Draw triangles using each linestring points.
+
+
+#### Draw IndoorGML Data (With Z-value)
+
+* drawPointsWithZvalue([mf_arr], with_height);
+
+Returns Cesium.PointPrimitiveCollection. z-value apperas in color.
+
+```js
+$.getJSON('json_data/indoor.json').then(
+  function(data){
+    var mf_arr = [];
+    for (var i = 0 ; i < data.features.length ; i++){
+      mf_arr.push(data.features[i]);
+    }
+    scene.primitives.add(drawPointsWithZvalue(mf_arr, true));
+  }
+);
+```
+
+#### View Properties graph
 
 * showProperty([obj_arr], div_id)
 
-showProperties by d3 graph. (https://github.com/d3/d3/blob/master/API.md)
+Show Property graph by [d3](https://github.com/d3/d3/blob/master/API.md).
+
+It is recommended that propery objects have same attributes.
 
 ```js
-<div id="graph" class="graph" > </svg>
+<div id="graph" class="graph" > </div>
 var property1 = {
   "name" : "central pressure",
   "uom" : "hPa",
@@ -82,3 +123,25 @@ var property1 = {
 var property2 = { ...}
 showProperty([property1, property2,..], 'graph');
 ```
+
+#### View hotspot cube
+
+* show3DHotSpotMovingPoint([mf_arr], x_deg, y_deg, time_deg, max_height)
+
+Show Hotspot cube for MovingPoint Array.
+
+'x_deg' is how much divide longitude.
+
+'y_deg' is latitude.
+
+'time_deg' is seconds.
+
+'max_height' is meters that assume how much maximum height. it can be omitted.(default 15000000)
+
+```js
+scene.primitives.add(show3DHotSpotMovingPoint(mf_arr, 1, 1, 3600));
+```
+
+e.g.
+
+![hotspotPoint](http://i.imgur.com/7pN8bDz.png)

js/MFOC/draw.js

@@ -440,34 +440,61 @@ function drawTrinaglesWithNextPos(line_1, line_2, height1, height2, with_height)
 }
 
 
-function drawOneCube(lower, upper, ){
-
-  /*
+function drawOneCube(positions, rating = 1.0){
+  var red_rate = 1.0, green_rate = (-2 * rating) + 2;
+
+  var rating_color = new Cesium.Color(
+    1.0,
+    green_rate,
+    0.0,
+    rating
+  );
+
+  if (rating < 0){
+    rating_color = new Cesium.Color(
+      1.0,
+      green_rate,
+      0.5,
+      0.2
+    );
+  }
+  var size = calcSidesBoxCoord(positions);
 
-    var prim = new Cesium.Primitive({
-      geometryInstances : instances,
-      appearance : new Cesium.PerInstanceColorAppearance({
-        translucent : true
-      }),
-      show : true
-    });
+  var geometry = Cesium.BoxGeometry.fromDimensions({
+    vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
+    dimensions :  new Cesium.Cartesian3( size[0], size[1], size[2] )
+  });
+  //console.log(positions, geometry);
+  var position = Cesium.Cartesian3.fromDegrees( (positions.minimum.x + positions.maximum.x) / 2, (positions.maximum.y + positions.minimum.y) /2 , (positions.minimum.z + positions.maximum.z) / 2);
 
+  var point3d = new Cesium.Cartesian3( 0.0, 0.0, 0.0 );
+  var translation = Cesium.Transforms.eastNorthUpToFixedFrame( position );
+  var matrix = Cesium.Matrix4.multiplyByTranslation( translation, point3d, new Cesium.Matrix4() );
 
-    var p_geometry = Cesium.PolygonGeometry.createGeometry(polygon);
 
-    return (new Cesium.GeometryInstance({
-      geometry : p_geometry,
-      attributes : {
-        color : Cesium.ColorGeometryInstanceAttribute.fromColor(r_color)
-      }
+  var geo_instance = new Cesium.GeometryInstance({
+    geometry : geometry,
+    modelMatrix : matrix,
+    attributes : {
+      color : Cesium.ColorGeometryInstanceAttribute.fromColor(rating_color)
+    }
 
-    } ));
+  } );
 
-    var box = new Cesium.BoxGeometry({
-    vertexFormat : Cesium.VertexFormat.POSITION_ONLY,
-    maximum : new Cesium.Cartesian3(250000.0, 250000.0, 250000.0),
-    minimum : new Cesium.Cartesian3(-250000.0, -250000.0, -250000.0)
+  return new Cesium.Primitive({
+    geometryInstances : geo_instance,
+    appearance : new Cesium.PerInstanceColorAppearance({
+      translucent : true
+    }),
+    show : true
   });
-  */
 
 }
+
+function calcSidesBoxCoord(box_coord){
+  var x_dist = Cesium.Cartesian3.distance(Cesium.Cartesian3.fromDegrees(box_coord.minimum.x, box_coord.minimum.y, box_coord.minimum.z), Cesium.Cartesian3.fromDegrees(box_coord.maximum.x, box_coord.minimum.y, box_coord.minimum.z));
+  var y_dist = Cesium.Cartesian3.distance(Cesium.Cartesian3.fromDegrees(box_coord.minimum.x, box_coord.minimum.y, box_coord.minimum.z), Cesium.Cartesian3.fromDegrees(box_coord.minimum.x, box_coord.maximum.y, box_coord.minimum.z));
+  var z_dist = Cesium.Cartesian3.distance(Cesium.Cartesian3.fromDegrees(box_coord.minimum.x, box_coord.minimum.y, box_coord.minimum.z), Cesium.Cartesian3.fromDegrees(box_coord.minimum.x, box_coord.minimum.y, box_coord.maximum.z));
+
+  return [x_dist, y_dist, z_dist];
+}

js/MFOC/draw_indoor.js

@@ -9,7 +9,6 @@ var drawPointsWithZvalue = function(mf_arr, with_height){
   var pointCollection = new Cesium.PointPrimitiveCollection();
   var min_max = findAllMinMaxTimeAndZ(mf_arr, true);
 
-  LOG(min_max.value);
   for (var id = 0 ; id < mf_arr.length ; id++){
     var r_color = Cesium.Color.fromRandom({
       red : 0.0,