From b7c6c8dfcbd9185bfbc957a56350dab60b948dda Mon Sep 17 00:00:00 2001 From: dariaterekhovaae <98411986+dariaterekhovaae@users.noreply.github.com> Date: Fri, 29 Apr 2022 13:00:24 +0300 Subject: [PATCH] Translate deckgl-layers/3d-building-layer to .ts (#1794) Signed-off-by: Daria Terekhova --- ...building-layer.js => 3d-building-layer.ts} | 11 ++-- ...building-utils.js => 3d-building-utils.ts} | 53 +++++++++++++------ src/deckgl-layers/3d-building-layer/types.ts | 29 ++++++++++ 3 files changed, 71 insertions(+), 22 deletions(-) rename src/deckgl-layers/3d-building-layer/{3d-building-layer.js => 3d-building-layer.ts} (83%) rename src/deckgl-layers/3d-building-layer/{3d-building-utils.js => 3d-building-utils.ts} (78%) create mode 100644 src/deckgl-layers/3d-building-layer/types.ts diff --git a/src/deckgl-layers/3d-building-layer/3d-building-layer.js b/src/deckgl-layers/3d-building-layer/3d-building-layer.ts similarity index 83% rename from src/deckgl-layers/3d-building-layer/3d-building-layer.js rename to src/deckgl-layers/3d-building-layer/3d-building-layer.ts index 20a80e0043..e3ed0d5717 100644 --- a/src/deckgl-layers/3d-building-layer/3d-building-layer.js +++ b/src/deckgl-layers/3d-building-layer/3d-building-layer.ts @@ -21,12 +21,13 @@ import {CompositeLayer} from '@deck.gl/core'; import {TileLayer as DeckGLTileLayer} from '@deck.gl/geo-layers'; import {getTileData} from './3d-building-utils'; +import {ThreeDBuildingLayerProps, Coordinates, TileDataItem} from './types'; import {SolidPolygonLayer} from '@deck.gl/layers'; -export default class ThreeDBuildingLayer extends CompositeLayer { +export default class ThreeDBuildingLayer extends CompositeLayer { // this layer add its subLayers to the redux store, and push sample data - renderSubLayers(props) { + renderSubLayers(props: ThreeDBuildingLayerProps) { return new SolidPolygonLayer({ ...props, parameter: { @@ -36,8 +37,8 @@ export default class ThreeDBuildingLayer extends CompositeLayer { extruded: true, opacity: 1, filled: true, - getElevation: feature => feature.properties.height || 0, - getPolygon: feature => feature.coordinates, + getElevation: (feature: TileDataItem) => feature.properties.height || 0, + getPolygon: (feature: TileDataItem) => feature.coordinates, getFillColor: this.props.threeDBuildingColor }); } @@ -45,7 +46,7 @@ export default class ThreeDBuildingLayer extends CompositeLayer { renderLayers() { return [ new DeckGLTileLayer({ - getTileData: args => + getTileData: (args: Coordinates) => getTileData(this.props.mapboxApiUrl, this.props.mapboxApiAccessToken, args), minZoom: 13, renderSubLayers: this.renderSubLayers.bind(this), diff --git a/src/deckgl-layers/3d-building-layer/3d-building-utils.js b/src/deckgl-layers/3d-building-layer/3d-building-utils.ts similarity index 78% rename from src/deckgl-layers/3d-building-layer/3d-building-utils.js rename to src/deckgl-layers/3d-building-layer/3d-building-utils.ts index b186aab6b2..1a4e050038 100644 --- a/src/deckgl-layers/3d-building-layer/3d-building-utils.js +++ b/src/deckgl-layers/3d-building-layer/3d-building-utils.ts @@ -21,13 +21,24 @@ import Protobuf from 'pbf'; import {VectorTile} from '@mapbox/vector-tile'; import {worldToLngLat} from 'viewport-mercator-project'; +import { + Coordinates, + FlatFigure, + TileDataItem, + VectorTileFeature, + VectorTileFeatureProperties +} from './types'; /* global fetch */ const TILE_SIZE = 512; const MAPBOX_HOST = 'https://a.tiles.mapbox.com'; const MAP_SOURCE = '/v4/mapbox.mapbox-streets-v7'; -export function getTileData(host, token, {x, y, z}) { +export function getTileData( + host: string, + token: string, + {x, y, z}: Coordinates +): Promise { const mapSource = `${host || MAPBOX_HOST}${MAP_SOURCE}/${z}/${x}/${y}.vector.pbf?access_token=${token}`; @@ -36,10 +47,15 @@ export function getTileData(host, token, {x, y, z}) { .then(buffer => decodeTile(x, y, z, buffer)); } -export function decodeTile(x, y, z, arrayBuffer) { +export function decodeTile( + x: number, + y: number, + z: number, + arrayBuffer: ArrayBuffer +): TileDataItem[] { const tile = new VectorTile(new Protobuf(arrayBuffer)); - const result = []; + const result: TileDataItem[] = []; const xProj = x * TILE_SIZE; const yProj = y * TILE_SIZE; const scale = Math.pow(2, z); @@ -65,7 +81,7 @@ export function decodeTile(x, y, z, arrayBuffer) { return result; } -function project(x, y, scale, line, extent) { +function project(x: number, y: number, scale: number, line: FlatFigure, extent: number): void { const sizeToPixel = extent / TILE_SIZE; for (let ii = 0; ii < line.length; ii++) { @@ -77,11 +93,14 @@ function project(x, y, scale, line, extent) { /* adapted from @mapbox/vector-tile/lib/vectortilefeature.js for better perf */ /* eslint-disable */ -export function vectorTileFeatureToProp(vectorTileFeature, project) { - let coords = getCoordinates(vectorTileFeature); +export function vectorTileFeatureToProp( + vectorTileFeature: VectorTileFeature, + project: (r: FlatFigure, n: number) => void +): {coordinates: FlatFigure[]; properties: VectorTileFeatureProperties}[] { + let coords: FlatFigure[][] | FlatFigure[] = getCoordinates(vectorTileFeature); const extent = vectorTileFeature.extent; - let i; - let j; + let i: number; + let j: number; coords = classifyRings(coords); for (i = 0; i < coords.length; i++) { @@ -96,7 +115,7 @@ export function vectorTileFeatureToProp(vectorTileFeature, project) { })); } -function getCoordinates(vectorTileFeature) { +function getCoordinates(vectorTileFeature: VectorTileFeature): FlatFigure[] { const pbf = vectorTileFeature._pbf; pbf.pos = vectorTileFeature._geometry; @@ -106,8 +125,8 @@ function getCoordinates(vectorTileFeature) { let x = 0; let y = 0; - const lines = []; - let line; + const lines: FlatFigure[] = []; + let line: FlatFigure | undefined; while (pbf.pos < end) { if (length <= 0) { @@ -146,14 +165,14 @@ function getCoordinates(vectorTileFeature) { // classifies an array of rings into polygons with outer rings and holes -function classifyRings(rings) { +function classifyRings(rings: FlatFigure[]): FlatFigure[][] { const len = rings.length; if (len <= 1) return [rings]; - const polygons = []; - let polygon; - let ccw; + const polygons: FlatFigure[][] = []; + let polygon: FlatFigure[] | undefined; + let ccw: boolean | undefined; for (let i = 0; i < len; i++) { const area = signedArea(rings[i]); @@ -181,9 +200,9 @@ function classifyRings(rings) { return polygons; } -function signedArea(ring) { +function signedArea(ring: FlatFigure): number { let sum = 0; - for (let i = 0, len = ring.length, j = len - 1, p1, p2; i < len; j = i++) { + for (let i = 0, len = ring.length, j = len - 1, p1: number[], p2: number[]; i < len; j = i++) { p1 = ring[i]; p2 = ring[j]; sum += (p2[0] - p1[0]) * (p1[1] + p2[1]); diff --git a/src/deckgl-layers/3d-building-layer/types.ts b/src/deckgl-layers/3d-building-layer/types.ts new file mode 100644 index 0000000000..6292436d04 --- /dev/null +++ b/src/deckgl-layers/3d-building-layer/types.ts @@ -0,0 +1,29 @@ +import {RGBColor} from '../../reducers'; + +export type ThreeDBuildingLayerProps = { + id: string; + mapboxApiAccessToken: string; + mapboxApiUrl: string; + threeDBuildingColor: RGBColor; + updateTriggers: { + getFillColor: RGBColor; + }; +}; +export type Coordinates = {x: number; y: number; z: number}; +// TODO rename +export type FlatFigure = number[][]; +export type TileDataItem = {coordinates: FlatFigure[]; properties: VectorTileFeatureProperties}; +export type VectorTileFeatureProperties = {layer: string; height?: number}; +export type VectorTileFeature = { + extent: number; + properties: VectorTileFeatureProperties; + _pbf: { + buf: ArrayBuffer; + pos: number; + type: number; + length: number; + readVarint: (b?: boolean) => number; + readSVarint: () => number; + }; + _geometry: number; +};