fix 3d buildings rendering (#2080)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Jan 10, 2023 · 47b1124 · 47b1124
1 parent 8edb5b2
commit 47b1124
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/deckgl-layers/src/3d-building-layer/3d-building-layer.ts b/src/deckgl-layers/src/3d-building-layer/3d-building-layer.ts
@@ -18,21 +18,23 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {CompositeLayer} from '@deck.gl/core';
-import {TileLayer as DeckGLTileLayer} from '@deck.gl/geo-layers';
+import GL from '@luma.gl/constants';
+import {CompositeLayer} from '@deck.gl/core/typed';
+import {TileLayer as DeckGLTileLayer} from '@deck.gl/geo-layers/typed';
+import {SolidPolygonLayer, SolidPolygonLayerProps} from '@deck.gl/layers/typed';
+
 import {getTileData} from './3d-building-utils';
-import {ThreeDBuildingLayerProps, Coordinates, TileDataItem} from './types';
-import {SolidPolygonLayer} from '@deck.gl/layers';
+import {ThreeDBuildingLayerProps, TileDataItem, TileLoadProps} from './types';
 
-export default class ThreeDBuildingLayer extends CompositeLayer<{}, ThreeDBuildingLayerProps> {
+export default class ThreeDBuildingLayer extends CompositeLayer<ThreeDBuildingLayerProps> {
   // this layer add its subLayers to the redux store, and push sample data
 
-  renderSubLayers(props: ThreeDBuildingLayerProps) {
+  renderSubLayers(props: SolidPolygonLayerProps<any>) {
     return new SolidPolygonLayer<TileDataItem>({
       ...props,
       parameters: {
-        blendFunc: ['SRC_ALPHA', 'ONE_MINUS_SRC_ALPHA', 'ONE', 'ONE_MINUS_SRC_ALPHA'],
-        blendEquation: ['FUNC_ADD', 'FUNC_ADD']
+        blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA, GL.ONE, GL.ONE_MINUS_SRC_ALPHA],
+        blendEquation: [GL.FUNC_ADD, GL.FUNC_ADD]
       },
       extruded: true,
       opacity: 1,
@@ -46,9 +48,9 @@ export default class ThreeDBuildingLayer extends CompositeLayer<{}, ThreeDBuildi
   renderLayers() {
     return [
       new DeckGLTileLayer({
-        id: `${this.id}-deck-3d-building`,
-        getTileData: (args: Coordinates) =>
-          getTileData(this.props.mapboxApiUrl, this.props.mapboxApiAccessToken, args),
+        id: `${this.id}-deck-3d-building` as string,
+        getTileData: (tile: TileLoadProps) =>
+          getTileData(this.props.mapboxApiUrl, this.props.mapboxApiAccessToken, tile.index),
         minZoom: 13,
         renderSubLayers: this.renderSubLayers.bind(this),
         updateTriggers: this.props.updateTriggers

diff --git a/src/deckgl-layers/src/3d-building-layer/types.ts b/src/deckgl-layers/src/3d-building-layer/types.ts
@@ -1,5 +1,17 @@
 import {RGBColor} from '@kepler.gl/types';
 
+export type TileIndex = {x: number; y: number; z: number};
+
+export type TileLoadProps = {
+  id: string;
+  index: TileIndex;
+  bbox: any;
+  url?: string | null;
+  signal?: AbortSignal;
+  userData?: Record<string, any>;
+  zoom?: number;
+};
+
 export type ThreeDBuildingLayerProps = {
   id: string;
   mapboxApiAccessToken: string;