replace lat lon offset with cellSize (visgl#460)

* replace lat lon offset with cellSize * rename worldUnitSize to cellSize
aravindiiitb · Mar 24, 2017 · dd56cd4 · dd56cd4
1 parent 4725806
commit dd56cd4
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 54 deletions.
diff --git a/docs/layers/grid-cell-layer.md b/docs/layers/grid-cell-layer.md
@@ -19,17 +19,11 @@ each cell. The grid cells can be given a height using the `getElevation` accesso
 
 Inherits from all [Base Layer](/docs/layers/base-layer.md) properties.
 
-##### `latOffset` (Number, optional)
+##### `cellSize` (Number, optional)
 
-- Default: `0.0089`
+- Default: `1000`
 
-Latitude increment of each cell
-
-##### `lonOffset` (Number, optional)
-
-- Default: `0.0113`
-
-Longitude increment of each cell
+Size of each grid cell in meters
 
 ##### `elevationScale` (Number, optional)
 

diff --git a/examples/layer-browser/src/data-samples.js b/examples/layer-browser/src/data-samples.js
@@ -20,7 +20,7 @@ export {iconAtlas};
 export const points = allPoints;
 export const positionOrigin = [-122.45, 37.75, 0];
 
-export const worldGrid = pointsToWorldGrid(points, 0.5);
+export const worldGrid = pointsToWorldGrid(points, 500);
 
 export const zigzag = [
   {

diff --git a/examples/layer-browser/src/examples/core-layers.js b/examples/layer-browser/src/examples/core-layers.js
@@ -193,11 +193,13 @@ const PointCloudLayerExample = {
 
 const GridCellLayerExample = {
   layer: GridCellLayer,
+  propTypes: {
+    cellSize: {type: 'number', min: 0, max: 1000}
+  },
   props: {
     id: 'gridCellLayer',
     data: dataSamples.worldGrid.data,
-    latOffset: dataSamples.worldGrid.latOffset,
-    lonOffset: dataSamples.worldGrid.lonOffset,
+    cellSize: dataSamples.worldGrid.cellSize,
     extruded: true,
     pickable: true,
     opacity: 1,

diff --git a/examples/layer-browser/src/utils/grid-aggregator.js b/examples/layer-browser/src/utils/grid-aggregator.js
@@ -1,12 +1,12 @@
-const R_EARTH = 6378;
+const R_EARTH = 6378000;
 
 /**
  * Aggregate points for the grid layer
  * @param {array} points
- * @param {number} worldUnitSize - unit size in kilometer
+ * @param {number} cellSize - cell size in meters
  * @returns {object} - grid data and cell dimension
  */
-export function pointsToWorldGrid(points, worldUnitSize) {
+export function pointsToWorldGrid(points, cellSize) {
 
   // find the geometric center of sample points
   const allLat = points.map(p => p.COORDINATES[1]);
@@ -15,7 +15,7 @@ export function pointsToWorldGrid(points, worldUnitSize) {
 
   const centerLat = (latMin + latMax) / 2;
 
-  const gridOffset = _calculateGridLatLonOffset(worldUnitSize, centerLat);
+  const gridOffset = _calculateGridLatLonOffset(cellSize, centerLat);
 
   // calculate count per cell
   const gridHash = points.reduce((accu, pt) => {
@@ -45,19 +45,19 @@ export function pointsToWorldGrid(points, worldUnitSize) {
     return accu;
   }, []);
 
-  return Object.assign({data}, gridOffset);
+  return Object.assign({data}, {cellSize});
 }
 
 /**
  * calculate grid layer cell size in lat lon based on world unit size
  * and current latitude
- * @param {number} worldUnitSize
+ * @param {number} cellSize
  * @param {number} latitude
  * @returns {object} - lat delta and lon delta
  */
-export function _calculateGridLatLonOffset(worldUnitSize, latitude) {
-  const latOffset = calculateLatOffset(worldUnitSize);
-  const lonOffset = calculateLonOffset(latitude, worldUnitSize);
+export function _calculateGridLatLonOffset(cellSize, latitude) {
+  const latOffset = calculateLatOffset(cellSize);
+  const lonOffset = calculateLonOffset(latitude, cellSize);
   return {latOffset, lonOffset};
 }
 

diff --git a/src/layers/core/grid-cell-layer/grid-cell-layer-vertex.glsl.js b/src/layers/core/grid-cell-layer/grid-cell-layer-vertex.glsl.js
@@ -37,8 +37,7 @@ uniform vec3 selectedPickingColor;
 
 // Custom uniforms
 uniform float extruded;
-uniform float lonOffset;
-uniform float latOffset;
+uniform float cellSize;
 uniform float opacity;
 uniform float elevationScale;
 
@@ -57,12 +56,12 @@ float isPicked(vec3 pickingColors, vec3 selectedColor) {
 
 void main(void) {
 
-  // cube gemoetry vertics are between -1 to 1, scale and transform it to between 0, 1
-  vec2 ptPosition = instancePositions.xy + vec2((positions.x + 1.0 ) *
-    lonOffset / 2.0, (positions.y + 1.0) * latOffset / 2.0);
-
-  vec2 pos = project_position(ptPosition);
+  vec2 topLeftPos = project_position(instancePositions.xy);
 
+  // cube gemoetry vertics are between -1 to 1, scale and transform it to between 0, 1
+  vec2 pos = topLeftPos + vec2((positions.x + 1.0) * cellSize
+     / 2.0, (positions.y + 1.0) * cellSize / 2.0);
+  
   float elevation = 0.0;
 
   if (extruded > 0.5) {

diff --git a/src/layers/core/grid-cell-layer/grid-cell-layer.js b/src/layers/core/grid-cell-layer/grid-cell-layer.js
@@ -32,10 +32,6 @@ const DEFAULT_COLOR = [255, 0, 255, 255];
 
 const defaultProps = {
   cellSize: 1000,
-  // AUDIT - replace with cellsize
-  lonOffset: 0.0113,
-  latOffset: 0.0089,
-
   elevationScale: 1,
   extruded: true,
   fp64: false,
@@ -62,8 +58,7 @@ export default class GridCellLayer extends Layer {
    *
    * @param {array} props.data -
    * @param {boolean} props.extruded - enable grid elevation
-   * @param {number} props.latOffset - grid cell size in lat delta
-   * @param {number} props.lonOffset - grid cell size in lng delta
+   * @param {number} props.cellSize - grid cell size in meters
    * @param {function} props.getPosition - position accessor, returned as [minLng, minLat]
    * @param {function} props.getElevation - elevation accessor
    * @param {function} props.getColor - color accessor, returned as [r, g, b, a]
@@ -138,14 +133,15 @@ export default class GridCellLayer extends Layer {
   }
 
   updateUniforms() {
-    const {opacity, extruded, elevationScale, latOffset, lonOffset, lightSettings} = this.props;
+    const {opacity, extruded, elevationScale, cellSize, lightSettings} = this.props;
+    const {viewport} = this.context;
+    const {pixelsPerMeter} = viewport.getDistanceScales();
 
     this.setUniforms(Object.assign({}, {
       extruded,
       elevationScale,
       opacity,
-      latOffset,
-      lonOffset
+      cellSize: cellSize * pixelsPerMeter[0]
     },
     lightSettings));
   }

diff --git a/src/layers/core/grid-layer/grid-aggregator.js b/src/layers/core/grid-layer/grid-aggregator.js
@@ -3,13 +3,13 @@ const R_EARTH = 6378000;
 /**
  * Calculate density grid from an array of points
  * @param {array} points
- * @param {number} worldUnitSize - unit size in meters
+ * @param {number} cellSize - cell size in meters
  * @param {function} getPosition - position accessor
  * @returns {object} - grid data, cell dimension and count range
  */
-export function pointToDensityGridData(points, worldUnitSize, getPosition) {
+export function pointToDensityGridData(points, cellSize, getPosition) {
 
-  const {gridHash, gridOffset} = _pointsToGridHashing(points, worldUnitSize, getPosition);
+  const {gridHash, gridOffset} = _pointsToGridHashing(points, cellSize, getPosition);
   const layerData = _getGridLayerDataFromGridHash(gridHash, gridOffset);
   const countRange = _getCellCountExtent(layerData);
 
@@ -23,11 +23,11 @@ export function pointToDensityGridData(points, worldUnitSize, getPosition) {
 /**
  * Project points into each cell, return a hash table of cells
  * @param {array} points
- * @param {number} worldUnitSize - unit size in meters
+ * @param {number} cellSize - unit size in meters
  * @param {function} getPosition - position accessor
  * @returns {object} - grid hash and cell dimension
  */
-function _pointsToGridHashing(points, worldUnitSize, getPosition) {
+function _pointsToGridHashing(points, cellSize, getPosition) {
 
   // find the geometric center of sample points
   const allLat = points.map(p => getPosition(p)[1]);
@@ -36,7 +36,7 @@ function _pointsToGridHashing(points, worldUnitSize, getPosition) {
 
   const centerLat = (latMin + latMax) / 2;
 
-  const gridOffset = _calculateGridLatLonOffset(worldUnitSize, centerLat);
+  const gridOffset = _calculateGridLatLonOffset(cellSize, centerLat);
 
   if (gridOffset.xOffset <= 0 || gridOffset.yOffset <= 0) {
     return {gridHash: {}, gridOffset};
@@ -85,13 +85,13 @@ function _getCellCountExtent(data) {
 /**
  * calculate grid layer cell size in lat lon based on world unit size
  * and current latitude
- * @param {number} worldUnitSize
+ * @param {number} cellSize
  * @param {number} latitude
  * @returns {object} - lat delta and lon delta
  */
-function _calculateGridLatLonOffset(worldUnitSize, latitude) {
-  const yOffset = _calculateLatOffset(worldUnitSize);
-  const xOffset = _calculateLonOffset(latitude, worldUnitSize);
+function _calculateGridLatLonOffset(cellSize, latitude) {
+  const yOffset = _calculateLatOffset(cellSize);
+  const xOffset = _calculateLonOffset(latitude, cellSize);
   return {yOffset, xOffset};
 }
 

diff --git a/src/layers/core/grid-layer/grid-layer.js b/src/layers/core/grid-layer/grid-layer.js
@@ -48,7 +48,6 @@ function _needsReProjectPoints(oldProps, props) {
 export default class GridLayer extends Layer {
   initializeState() {
     this.state = {
-      gridOffset: {yOffset: 0.0089, xOffset: 0.0113},
       layerData: [],
       countRange: null
     };
@@ -58,10 +57,10 @@ export default class GridLayer extends Layer {
     if (changeFlags.dataChanged || _needsReProjectPoints(oldProps, props)) {
       const {data, cellSize, getPosition} = this.props;
 
-      const {gridOffset, layerData, countRange} =
+      const {layerData, countRange} =
         pointToDensityGridData(data, cellSize, getPosition);
 
-      Object.assign(this.state, {gridOffset, layerData, countRange});
+      Object.assign(this.state, {layerData, countRange});
     }
   }
 
@@ -90,7 +89,7 @@ export default class GridLayer extends Layer {
   }
 
   renderLayers() {
-    const {id, elevationScale, fp64, extruded} = this.props;
+    const {id, elevationScale, fp64, extruded, cellSize} = this.props;
 
     // base layer props
     const {opacity, pickable, visible} = this.props;
@@ -101,8 +100,7 @@ export default class GridLayer extends Layer {
     return new GridCellLayer({
       id: `${id}-grid-cell`,
       data: this.state.layerData,
-      latOffset: this.state.gridOffset.yOffset,
-      lonOffset: this.state.gridOffset.xOffset,
+      cellSize,
       elevationScale,
       extruded,
       fp64,

diff --git a/src/layers/core/hexagon-cell-layer/hexagon-cell-layer.js b/src/layers/core/hexagon-cell-layer/hexagon-cell-layer.js
@@ -196,7 +196,6 @@ export default class HexagonCellLayer extends Layer {
 
       angle = this.props.angle;
       radius = this.props.radius * pixelsPerMeter[0];
-
     }
 
     this.setUniforms({
-Original file line number
+Diff line change
@@ Expand Up / @@ -196,7 +196,6 @@ export default class HexagonCellLayer extends Layer { @@
           angle = this.props.angle;
           radius = this.props.radius * pixelsPerMeter[0];
         }
         this.setUniforms({
@@ Expand Down @@