Support stroke width in ColumnLayer and H3HexagonLayer (#3102)

visgl · May 16, 2019 · 0f25034 · 0f25034
1 parent e16d0c3
commit 0f25034
Show file tree

Hide file tree

Showing 14 changed files with 285 additions and 205 deletions.
diff --git a/docs/layers/column-layer.md b/docs/layers/column-layer.md
@@ -119,41 +119,71 @@ Disk offset from the position, relative to the radius. By default, the disk is c
 Radius multiplier, between 0 - 1. The radius of the disk is calculated by
 `coverage * radius`
 
+##### `elevationScale` (Number, optional)
+
+* Default: `1`
+
+Column elevation multiplier. The elevation of column is calculated by
+`elevationScale * getElevation(d)`. `elevationScale` is a handy property
+to scale all column elevations without updating the data.
+
 ##### `filled` (Boolean, optional)
 
 * Default: `true`
 
-Whether to draw a filled column (solid fill). Note that only
-the area between the outer polygon and any holes will be filled.
+Whether to draw a filled column (solid fill).
 
-##### `elevationScale` (Number, optional)
+##### `stroked` (Boolean, optional)
 
-* Default: `1`
+* Default: `false`
 
-Column elevation multiplier. The elevation of column is calculated by
-`elevationScale * getElevation(d)`. `elevationScale` is a handy property
-to scale all hexagon elevations without updating the data.
+Whether to draw an outline around the disks. Only applies if `extruded: false`.
 
 ##### `extruded` (Boolean, optional)
 
 * Default: `true`
 
-Whether to extrude hexagon. If se to false, all hexagons will be set to flat.
+Whether to extrude the columns. If set to `false`, all columns will be rendered as flat polygons.
 
 ##### `wireframe` (Boolean, optional)
 
 * Default: `false`
 
 Whether to generate a line wireframe of the column. The outline will have
 "horizontal" lines closing the top and bottom polygons and a vertical line
-(a "strut") for each vertex on the polygon.
+(a "strut") for each vertex around the disk. Only applies if `extruded: true`.
 
 ##### `fp64` (Boolean, optional)
 
 * Default: `false`
 
 Whether the layer should be rendered in high-precision 64-bit mode. Note that since deck.gl v6.1, the default 32-bit projection uses a hybrid mode that matches 64-bit precision with significantly better performance.
 
+##### `lineWidthUnits` (String, optional)
+
+* Default: `'meters'`
+
+The units of the outline width, one of `'meters'`, `'pixels'`. When zooming in and out, meter sizes scale with the base map, and pixel sizes remain the same on screen.
+
+##### `lineWidthScale` (Boolean, optional)
+
+* Default: `1`
+
+The line width multiplier that multiplied to all outlines if the `stroked` attribute is `true`.
+
+##### `lineWidthMinPixels` (Number, optional)
+
+* Default: `0`
+
+The minimum outline width in pixels.
+
+##### `lineWidthMaxPixels` (Number, optional)
+
+* Default: Number.MAX_SAFE_INTEGER
+
+The maximum outline width in pixels.
+
+
 ##### `material` (Object, optional)
 
 * Default: `new PhongMaterial()`
@@ -169,20 +199,9 @@ Check [PhongMaterial](https://github.com/uber/luma.gl/tree/7.0-release/docs/api-
 
 Method called to retrieve the position of each column, in `[x, y]`. An optional third component can be used to set the elevation of the bottom.
 
-##### `getColor` ([Function](/docs/developer-guide/using-layers.md#accessors)|Array, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
-
-* Default: `[255, 0, 255, 255]`
-
-The rgba color of each object, in `r, g, b, [a]`. Each component is in the 0-255 range.
-
-* If an array is provided, it is used as the color for all objects.
-* If a function is provided, it is called on each object to retrieve its color.
-
-It will be overridden by `getLineColor` and `getFillColor` if these new accessors are specified.
-
 ##### `getFillColor` ([Function](/docs/developer-guide/using-layers.md#accessors)|Array, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
 
-* Default: `[255, 0, 255, 255]`
+* Default: `[0, 0, 0, 255]`
 
 The rgba color of each object, in `r, g, b, [a]`. Each component is in the 0-255 range.
 
@@ -192,12 +211,12 @@ The rgba color of each object, in `r, g, b, [a]`. Each component is in the 0-255
 
 ##### `getLineColor` ([Function](/docs/developer-guide/using-layers.md#accessors)|Array, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
 
-* Default: `[255, 0, 0, 255]`
+* Default: `[0, 0, 0, 255]`
 
-The rgba outline color of each polygon, in `r, g, b, [a]`. Each component is in the 0-255 range.
+The rgba outline color of each object, in `r, g, b, [a]`. Each component is in the 0-255 range.
 
-* If an array is provided, it is used as the outline color for all polygons.
-* If a function is provided, it is called on each polygon to retrieve its outline color.
+* If an array is provided, it is used as the outline color for all columns.
+* If a function is provided, it is called on each object to retrieve its outline color.
 * If not provided, it falls back to `getColor`.
 
 ##### `getElevation` ([Function](/docs/developer-guide/using-layers.md#accessors)|Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
@@ -209,6 +228,16 @@ The elevation of each cell in meters.
 * If a number is provided, it is used as the elevation for all objects.
 * If a function is provided, it is called on each object to retrieve its elevation.
 
+
+##### `getLineWidth` ([Function](/docs/developer-guide/using-layers.md#accessors)|Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
+
+* Default: `1`
+
+The width of the outline of the column, in units specified by `lineWidthUnits` (default meters). Only applies if `extruded: false` and `stroked: true`.
+
+* If a number is provided, it is used as the outline width for all columns.
+* If a function is provided, it is called on each object to retrieve its outline width.
+
 ## Source
 
 [modules/layers/src/column-layer](https://github.com/uber/deck.gl/tree/master/modules/layers/src/column-layer)

diff --git a/docs/layers/h3-hexagon-layer.md b/docs/layers/h3-hexagon-layer.md
@@ -80,7 +80,8 @@ new deck.H3HexagonLayer({});
 
 ## Properties
 
-Inherits from all [Base Layer](/docs/api-reference/layer.md) and [CompositeLayer](/docs/api-reference/composite-layer.md) properties.
+Inherits from all [Base Layer](/docs/api-reference/layer.md), [CompositeLayer](/docs/api-reference/composite-layer.md), and [PolygonLayer](/docs/layers/polygon-layer.md) properties, plus the following:
+
 
 ### Render Options
 
@@ -96,48 +97,6 @@ However, there are 12 pentagons world wide at each resolution. The hexagons at a
 * if `false`, the layer chooses the mode automatically. High-precision rendering is only used if resolution is at or below `5`, or if a pentagon is found in the data.
 * if `true`, always use high-precision rendering.
 
-
-##### `coverage` (Number, optional)
-
-* Default: `1`
-
-Hexagon size multiplier, between 0 - 1. When a number smaller than `1` is provided, the hexagon is scaled down around the centroid.
-
-##### `elevationScale` (Number, optional)
-
-* Default: `1`
-
-Column elevation multiplier. The elevation of column is calculated by
-`elevationScale * getElevation(d)`. `elevationScale` is a handy property
-to scale all hexagon elevations without updating the data.
-
-##### `extruded` (Boolean, optional)
-
-* Default: `true`
-
-Whether to extrude hexagon. If set to false, all hexagons will be set to flat.
-
-##### `wireframe` (Boolean, optional)
-
-* Default: `false`
-
-Whether to generate a line wireframe of the hexagon. The outline will have
-"horizontal" lines closing the top and bottom hexagons and a vertical line
-(a "strut") for each vertex on the hexagon.
-
-##### `fp64` (Boolean, optional)
-
-* Default: `false`
-
-Whether the layer should be rendered in high-precision 64-bit mode. Note that since deck.gl v6.1, the default 32-bit projection uses a hybrid mode that matches 64-bit precision with significantly better performance.
-
-##### `material` (Object, optional)
-
-* Default: `new PhongMaterial()`
-
-This is an object that contains material props for [lighting effect](/docs/effects/lighting-effect.md) applied on extruded hexagons.
-Check [PhongMaterial](https://github.com/uber/luma.gl/tree/7.0-release/docs/api-reference/core/materials/phong-material.md) for more details.
-
 ### Data Accessors
 
 ##### `getHexagon` ([Function](/docs/developer-guide/using-layers.md#accessors), optional)
@@ -146,46 +105,6 @@ Check [PhongMaterial](https://github.com/uber/luma.gl/tree/7.0-release/docs/api-
 
 Method called to retrieve the [H3](https://uber.github.io/h3/) hexagon index of each object. Note that all hexagons within one `H3HexagonLayer` must use the same [resolution](https://uber.github.io/h3/#/documentation/core-library/resolution-table).
 
-##### `getColor` ([Function](/docs/developer-guide/using-layers.md#accessors)|Array, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
-
-* Default: `[0, 0, 0, 255]`
-
-The rgba color of each object, in `r, g, b, [a]`. Each component is in the 0-255 range.
-
-* If an array is provided, it is used as the color for all objects.
-* If a function is provided, it is called on each object to retrieve its color.
-
-It will be overridden by `getLineColor` and `getFillColor` if these new accessors are specified.
-
-##### `getFillColor` ([Function](/docs/developer-guide/using-layers.md#accessors)|Array, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
-
-* Default: `[0, 0, 0, 255]`
-
-The rgba color of each object, in `r, g, b, [a]`. Each component is in the 0-255 range.
-
-* If an array is provided, it is used as the color for all objects.
-* If a function is provided, it is called on each object to retrieve its color.
-* If not provided, it falls back to `getColor`.
-
-##### `getLineColor` ([Function](/docs/developer-guide/using-layers.md#accessors)|Array, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
-
-* Default: `[0, 0, 0, 255]`
-
-The rgba outline color of each hexagon, in `r, g, b, [a]`. Each component is in the 0-255 range.
-
-* If an array is provided, it is used as the outline color for all hexagons.
-* If a function is provided, it is called on each hexagon to retrieve its outline color.
-* If not provided, it falls back to `getColor`.
-
-##### `getElevation` ([Function](/docs/developer-guide/using-layers.md#accessors)|Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
-
-* Default: `1000`
-
-The elevation of each cell in meters.
-
-* If a number is provided, it is used as the elevation for all objects.
-* If a function is provided, it is called on each object to retrieve its elevation.
-
 
 ## Sub Layers
 

diff --git a/examples/layer-browser/src/examples/core-layers.js b/examples/layer-browser/src/examples/core-layers.js
@@ -290,7 +290,7 @@ const ColumnLayerExample = {
     pickable: true,
     radius: 1000,
     opacity: 1,
-    getColor: d => [245, 166, d.value * 255, 255],
+    getFillColor: d => [245, 166, d.value * 255, 255],
     getElevation: d => d.value * 5000
   }
 };

diff --git a/modules/aggregation-layers/src/grid-layer/grid-layer.js b/modules/aggregation-layers/src/grid-layer/grid-layer.js
@@ -101,7 +101,7 @@ export default class GridLayer extends CompositeLayer {
     // be called. e.g. if ColorValue needs to be updated, getColorValueDomain and getColorScale
     // will automatically be called
     return {
-      getColor: [
+      getFillColor: [
         {
           id: 'value',
           triggers: ['getColorValue'],
@@ -329,10 +329,10 @@ export default class GridLayer extends CompositeLayer {
         elevationScale,
         extruded,
 
-        getColor: this._onGetSublayerColor.bind(this),
+        getFillColor: this._onGetSublayerColor.bind(this),
         getElevation: this._onGetSublayerElevation.bind(this),
         transitions: transitions && {
-          getColor: transitions.getColorValue,
+          getFillColor: transitions.getColorValue,
           getElevation: transitions.getElevationValue
         }
       },

diff --git a/modules/aggregation-layers/src/hexagon-layer/hexagon-layer.js b/modules/aggregation-layers/src/hexagon-layer/hexagon-layer.js
@@ -97,7 +97,7 @@ export default class HexagonLayer extends CompositeLayer {
     // be called. e.g. if ColorValue needs to be updated, getColorValueDomain and getColorScale
     // will automatically be called
     return {
-      getColor: [
+      getFillColor: [
         {
           id: 'value',
           triggers: ['getColorValue'],
@@ -364,10 +364,10 @@ export default class HexagonLayer extends CompositeLayer {
         coverage,
         material,
 
-        getColor: this._onGetSublayerColor.bind(this),
+        getFillColor: this._onGetSublayerColor.bind(this),
         getElevation: this._onGetSublayerElevation.bind(this),
         transitions: transitions && {
-          getColor: transitions.getColorValue,
+          getFillColor: transitions.getColorValue,
           getElevation: transitions.getElevationValue
         }
       },